I have been using Visual Studio Code for more than two years, when I jumped on it from Sublime Text.
I spend about 5–6 hours every day inside VS Code so it’s imperative that it is tailored to my needs to make me as productive as possible. Over the years, I have tried many extensions and settings but now I feel settled with what I have so it’s worth talking about them.
I use Prettier for code formatting across all of my projects and I’ve set up this extension so that it automatically formats my HTML/CSS/JS when I hit ⌘ + S. This has allowed me to get rid of language-specific code formatters.
I use this extension along with npm intellisense (below) to ensure that my
package.json is up to date and not bloated with modules that I am not using.
This extension indexes my package.json and allows me to autocomplete my
import statements when requiring modules.
This extension color codes all of my brackets, allowing me to quickly see where each code block starts and ends.
This is the newest extension that I have added to my arsenal and I really like it. It lets you select some JSX and refactor it out into a custom React Class, function, or hook.
Another simple extension that does one thing well: auto-closes my JSX tags.
I recently moved from the native Source Control setting that VSCode has to Gitlens. I like this extension because it lets me:
I write so much React code that I needed an extension to help me save some time. I now use this extension to fill in some of the boilerplate that comes along with writing React components.
This extension helps me a lot when writing READMEs, or other Markdown documents. I specifically enjoy how it deals with lists, tables, and table of contents.
Apart from the extensions, the other aspect of customizing your VS Code experience are your User Settings. I have shared my complete Settings file below, but here are some of the important bits:
My complete font stack is:
"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "editor.fontLigatures": true,
To detect indentation, I also prefer these settings:
"editor.detectIndentation": true, "editor.renderIndentGuides": false,
To help manage my imports, I prefer these:
Emmet now comes included with VS Code now, but to make it work well with React, I had to update some of the settings.
Here’s my complete
For more tips and tricks about Visual Studio Code, I recommend checking out VSCode Can Do That.
Originally published by ***Tilo** at **tilomitra.com ***
Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.
Best Visual Studio Code Extensions for Web Development. One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you’re a web developer, you won’t be able to live without installing these extensions!