VS Code - the best customization for Web developer
Tags: javascript, webdev, programming, vscode
Published: 2022-10-23 18:55:29

During the last 3 years I was trying to find the most comfortable theme, font, configuration and a set of extensions for my VS code IDE and it seems like this year I feel really comfortable with what I have. 
I want to share all my discovering so you could try and find the best for yourself :)

So, let's start from the **extensions**:

- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

Helps you to automatically rename paired HTML/XML tags. 
Often comes in handy!

- [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)

JavaScript syntax highlighting for ES201x, React JSX, Flow and GraphQL.

- [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

Super useful snippets. Customizable. Built-in integration with prettier.

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Enforces code styles, makes your life easier, check it by yourself!

- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

Shows a Git Graph of your repository, and perform Git actions from the graph.

- [GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode)

GraphQL syntax highlighting, linting, auto-complete, and more!

- [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

Friendly AI assistant

- [IntelliCode API Usage Examples](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.intellicode-api-usage-examples)

Examples from GitHub. Quite optional but I like it.

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

Well known must have :)

- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

Fancy icons, great looking

- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

If you prefer something minimal, try this one!

- [Next.js snippets](https://marketplace.visualstudio.com/items?itemName=rettimo.nextjs-vscode-snippets)

For Next.js developers - highly recommended.

- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense)

Autocompletes npm modules in import statements for you

- [NPM-Scripts](https://marketplace.visualstudio.com/items?itemName=jianglinghao.vscode-npm-scripts)

Convenient npm scripts in the sidebar, run with one click

- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

The most popular code formatter, can be configured

- [Rainbow Brackets](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets)

A visual sugar for brackets

- [vscode-faker](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker)

Generate fake data for name, address, lorem ipsum, commerce and much more - fast and easy to use

- [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

Show TODO, FIXME, etc. comment tags in a tree view, without toxic colors and with useful tab in the sidebar

**Wooah! It was a long list, but you made it, now it is time for themes. 
Do not worry, this list will be shorter :)**

Several **themes** that I love the most:

- Default Dark+ theme

- [Panda Theme](https://marketplace.visualstudio.com/items?itemName=tinkertrain.theme-panda)

- [Theme - Oceanic Next](https://marketplace.visualstudio.com/items?itemName=naumovs.theme-oceanicnext)

And the last thing that was bothering me - it is the default font, 
after many iterations with fonts I have found the best one:

- [JetBrains Mono](https://www.jetbrains.com/lp/mono/)

The full configuration file:

```
{
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "workbench.iconTheme": "material-icon-theme",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
 //this line makes prettier work with ts files 
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[css]": {
    "editor.suggest.insertMode": "replace"
  },
  "editor.mouseWheelZoom": true,
  "security.workspace.trust.untrustedFiles": "open",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "terminal.integrated.fontSize": 13,
  "editor.fontWeight": "500",
  //enables ligartures
  "editor.fontLigatures": true,
  "files.autoSave": "onFocusChange",
  "editor.cursorStyle": "line-thin",
  //this helps you to format the lines when you are typing
  "editor.formatOnType": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "gitlens.hovers.currentLine.over": "line",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.fontFamily": "JetBrains Mono, 'Courier New', monospace",
  "prettier.endOfLine": "crlf",
  "prettier.jsxSingleQuote": true,
  "prettier.quoteProps": "consistent",
  "prettier.singleQuote": true,
  "editor.tabSize": 2
}
```

Thank you for your time, hope this article helps you to find your own the best configurations for VS Code :)