DEV Community 👩‍💻👨‍💻

Victoria
Victoria

Posted on

VS Code - the best customization for Web developer

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:

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

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

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

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

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

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

Friendly AI assistant

Examples from GitHub. Quite optional but I like it.

Well known must have :)

Fancy icons, great looking

If you prefer something minimal, try this one!

For Next.js developers - highly recommended.

Autocompletes npm modules in import statements for you

Convenient npm scripts in the sidebar, run with one click

The most popular code formatter, can be configured

A visual sugar for brackets

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

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:

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

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
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
fjones profile image
FJones

I think it's worth noting that almost all of these are included out-of-the-box with the jetbrains web dev IDEs (and as official plugins for the others).

Obviously, if you prefer VSCode or find the pricing of the jetbrains IDEs imposing, go for it, but it's an alternative worth pointing to, especially if these are the main additional features you're looking for in an IDE.

Collapse
 
hugaidas profile image
Victoria

Yes, the article quite clear pointing that it is for those who prefer VS Code, I am using both, but imho Jetbrains ide consumes twice more memory, slower to start, and some useful extensions that I am used to are not available :)

Collapse
 
wesborland profile image
Marcos Gomez • Edited on

The Jetbrains Font its wonderful. I'll take it, Thanks ! :)

Collapse
 
hugaidas profile image
Victoria

Thank you for you time, enjoy ;)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.