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_.
Top comments (7)
Another awesome theme is called Canvas. It's kind of like a mix of Cobalt 2 and Xcode Default Dark. I'm sure you'll like it if you find it.
Update, this is a great theme!
I'll check it out! Thanks for letting me know!
Surely enough, use all of them 😉
I feel like these are pretty common ones, but it's still good to list out for people.
If you want Operator Mono AND ligatures, you can use this. It’s great!
github.com/kiliman/operator-mono-lig
Thanks! I've got this installed and I stared the repo. Hopefully someone does the other font styles. Main reason is the contrast between book and light isn't enough for me, but they look great!