My VS Code setting for Web Development in 2022
Tags: vscode, webdev, productivity, programming
Published: 2022-07-30 13:48:18

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](https://draculatheme.com/visual-studio-code)  for quite a long. There are other themes also worth trying like **Monokai, Tokyo Night, Ayu, Night Owl, Cobalt2**.

![Dracula Theme VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gflioqrte2v47nihzn0g.png)

### 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](https://github.com/microsoft/cascadia-code/wiki/Installing-Cascadia-Code) or [Fira Code](https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions). 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).

![Cascadia Code VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lb14kwtd6rj82wtj2d7.png)

## 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](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo) - Rich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform
2. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - Automatically rename paired HTML/XML tag *
3. [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel) - VSCode syntax highlighting for today's JavaScript. *
4. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) - Improve your code commenting by annotating with alert, informational, TODOs, and more!
5. [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode) - Code Time is an open source plugin that provides programming metrics right in Visual Studio Code.
6. [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) - Highlight web colors in your editor
7. [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-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](https://marketplace.visualstudio.com/items?itemName=IronGeek.vscode-env) - Adds formatting and syntax highlighting support for env files (.env) to Visual Studio Code
9. [Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) - Improve highlighting of errors, warnings and other language diagnostics. *
10. [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your JavaScript code. *
11. [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Your AI pair programmer
12. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - Supercharge Git within VS Code *
13. [GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode) - GraphQL syntax highlighting, linting, auto-complete, and more!
14. [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) - CSS Intellisense for HTML
15. [htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap) - Wraps selected code with HTML tags
16. [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) - Display import/require package size in the editor *
17. [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - Code snippets for JavaScript in ES6 syntax *
18. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Launch a development local Server with live reload feature for static & dynamic pages *
19. [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - Visual Studio Code plugin that autocompletes npm modules in import statements *
20. [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console) - Nx Console for Visual Studio Code
21. [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) - 📸 Polaroid for your code
22. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatter using prettier *
23. [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) - Easily switch between projects *
24. [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) - Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. *
25. [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - Official Stylelint extension for Visual Studio Code
26. [Svg Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview) - Preview for Svg files.
27. [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.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](https://code.visualstudio.com/docs/editor/emmet)
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.

![Prettier config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksokv73bgqbp1jvy4o9l.png)
2. Set **Auto Save** to *onWindowChange.* and avoid loosing the changes made while switching the editor.

![File AutoSave](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4heh1zsu935pljl0swm.png)
    
3. 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.
4. Configure terminal with code command and use VSCode inbuilt terminal. It saves a lot of time.
5. Never hesitate of using good extensions just to save some space on the system, It helps a lot in our day-to-day work.
6. Use CLI for every possible thing, and avoid GUI.