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:
Default Dark+ theme
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
}
Thank you for your time, hope this article helps you to find your own the best configurations for VS Code :)
Top comments (5)
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.
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 :)
The Jetbrains Font its wonderful. I'll take it, Thanks ! :)
Thank you for you time, enjoy ;)
Thanks for this article. :)