In this post, I''m going to cover my favorite VS Code extensions, the settings I use, and some other things I like about the text editor!

If you'd rather watch than read the post, then here is the YouTube Video.

What do I use VS Code for? Well, I use it for web development and notes if needed but mainly for web development in React or Vue depending on what I need to accomplish. I also like it for writing in mark down due to it's Mark down preview

What also makes VS Code my favorite Text Editor are the extensions and here are my favorites! You can quickly get all the extensions in this post from my kit.co page.

1. Path Intellisense

Path intellisense is going to auto complete file names for you. This is super useful when trying to link to a custom component or a CSS style sheet in an HTLM file.

2. Better Comments

Now, I like this extension because I love leaving meaningful comments in my code for me or my team mates. It's helpful to know what I was thinking at the time or to know why I chose to pass a specific parameter and Better Comments makes that easy to see and distinguish. It has custom formatting for important notes, questions, todos, and parameters.

Some languages it supports are HTML, CSS, JavaScript which includes React, Swift, Go and so much more.

So, the jist of better comments is to make the code comments be easier to read at a glance.

3. Bracket Pair Colorizer 2

This extension highlights nested bracket pairs by giving them different colors. It also outlines the section of the code in the editor.

This really helps read-ability and edit-ability of the code since brackets can get nested quite fast in React.

4. Prettier

The Prettier extension helps code look better and be more consistent. It keeps me coding in the same style all the time or for specific directories. Another reason I love using formatters because it helps me realize where I make errors. If the code doesn't format, then there is an issue with my code some where.

5. ES7 React/Redux/GraphQL/React-Native snippets

This snippet example is super duper useful. It can save some typing and cause less typos. You type the abbreviation, then hit Enter and then you have the full thing. Here are my favorite snippets:

• imr - Imports react
• exp - Exports default
• imd - Import {destructed module} from 'module'
• nfn - Creates a constant function
• clg - Console.log

These aren't that hard to type out, but it helps me be consistent.

My Aesthetics

Here's a list of my fonts, icons, and themes.

Fonts

• Operator Mono - this stays the same between Xcode and VS Code.
• Fira Code - Occasionally I do use Fira Code if I really want ligatures.

Themes

• Xcode Default Dark - This is my go to theme so VS Code looks similar to Xcode
• Cobalt2 - This is my "I'm feeling crazy and need a change real quick" theme

Icons

• Material Icon Theme - Gives cool icon

Get all the extensions from my kit.co page.

Thanks for reading or watching the video! If you enjoyed this post, then share it please!
Feel free to stop by my Twitch stream on Tuesdays and Thursdays at 6:45am CST and say hi! @maeganwilson_
You can also follow me no Instagram @parttimedeveloper_ and subscribe to my YouTube channel parttimedeveloper_.