My VS Code setting for Web Development in 2022

After using VS Code for the last 5–6 years, I've tried tons of customization and setup in my Editor. No doubt VS code is expensive in terms of its memory usage of the system but with lots of features and being a Developer centric Editor it's worth trying.

I've been now very obsessed with the configuration and setup I've done which has undoubtedly increased my overall productivity a lot, and now would like to share my VS code setup with you all.

Appearance

Theme

I’ve been using the Dark color scheme from the start when I started using sublime(again one cool editor you can try).

Now, this is a personal choice and you can try the Light theme also.

I've tried several different themes, and now using Dracula for quite a long. There are other themes also worth trying like Monokai, Tokyo Night, Ayu, Night Owl, Cobalt2.

Font and Styling

Choosing a good font and its styling is very important if you're planning to spend most of your time on the editor itself.

My personal choice here is Cascadia Code or Fira Code. You're going to get some very cool interactive styling while writing the code. This even increases the readability of the code a lot. Few other fonts worth trying here are Source Code Pro, JetBrains Mono, Monolisa(paid).

Extensions

Now comes the real power of VSCode. Let me introduce you to some of the coolest extensions ones can use for writing efficient code while creating some cool web applications.

Those marked with an asterisk(*) should be definitely tried once.

1. Apollo GraphQL - Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform
2. Auto Rename Tag - Automatically rename paired HTML/XML tag *
3. Babel JavaScript - VSCode syntax highlighting for today's JavaScript. *
4. Better Comments - Improve your code commenting by annotating with alert, informational, TODOs, and more!
5. Code Time - Code Time is an open source plugin that provides programming metrics right in Visual Studio Code.
6. Color Highlight - Highlight web colors in your editor
7. CSS Peek - Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.
8. ENV - Adds formatting and syntax highlighting support for env files (.env) to Visual Studio Code
9. Error Lens - Improve highlighting of errors, warnings and other language diagnostics. *
10. Eslint - Find and fix problems in your JavaScript code. *
11. GitHub Copilot - Your AI pair programmer
12. GitLens - Supercharge Git within VS Code *
13. GraphQL for VSCode - GraphQL syntax highlighting, linting, auto-complete, and more!
14. HTML CSS Support - CSS Intellisense for HTML
15. htmltagwrap - Wraps selected code with HTML tags
16. Import Cost - Display import/require package size in the editor *
17. JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 syntax *
18. Live Server - Launch a development local Server with live reload feature for static & dynamic pages *
19. npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements *
20. Nx Console - Nx Console for Visual Studio Code
21. Polacode - 📸 Polaroid for your code
22. Prettier - Code formatter using prettier *
23. Project Manager - Easily switch between projects *
24. Settings Sync - Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. *
25. Stylelint - Official Stylelint extension for Visual Studio Code
26. Svg Preview - Preview for Svg files.
27. vscode-icons - Icons for Visual Studio Code

Frequently used shortcuts (in Mac) which ease my development

1. Toggle Explorer - CMD+B
2. Global search - CMD+SHIFT+F
3. Global search and Replace - CMD+SHIFT+H
4. Opening list of projects (Project Manager) - CMD+OPTION+P
5. Selecting line of codes in all the directions from the cursor - CMD+SHIFT+ARROW_KEY
6. Navigating the whole line UP/DOWN - OPTION+TOP/BOTTOM ARROW KEY
7. Copying the whole line beneath it - SHIFT+OPTION+DOWN_ARROW
8. Selecting any word in all the places present in the file - Double click on that word and CMD+D.
9. Multiple cursors - CMD+LEFT_CLICK
10. Emmet shortcuts - checkout to the link
11. Faster navigation with keyboard - Try using arrow_keys with OPTION/CMD Keys.

Recommended Settings/Configs I follow.

1. Set Require config to true and avoid unnecessary formatting when working on collaborative project.

1. Set Auto Save to onWindowChange. and avoid loosing the changes made while switching the editor.

1. Use the Project Manager extension and add frequently used projects there. You can easily switch between multiple projects despite of their location with a few keystrokes.
2. Configure terminal with code command and use VSCode inbuilt terminal. It saves a lot of time.
3. Never hesitate of using good extensions just to save some space on the system, It helps a lot in our day-to-day work.
4. Use CLI for every possible thing, and avoid GUI.