This article describes five tips on how to make
VS Code development experience a bit better (at least for my kind
of use cases -> Frontend Development) by enabling and editing some settings which are not set by default. You can go to your
settings and enable each one of these by either opening it up via the command palette
- CMD + ⌘ + P
- Type in settings
- - 3. Select Open Workspace Settings (JSON)
or with the shortcut (CMD + ,) and click on the icon Open Settings (JSON) on the upper right corner.
Here are the five 🔥 things I add to improve my development environment.
1. Enable bracket colorization
Using bracket colorization makes it easier to see where code blocks start and end.
// settings.json
// 1. enables vscode native bracket colorization
"editor.bracketPairColorization.enabled": true
2. Enable bracket pair guides
Besides using bracket colorization, I love to add bracket pair guides.
// settings.json
// 2. enables vscode pair guides
"editor.guides.bracketPairs": true,
3. Highlight modified Tab
I like to make it more clear which file I work on.
// settings.json
// 3. highlight active tab
"workbench.editor.highlightModifiedTabs": true,
4. Using Font Ligatures
It makes it easier to distinguish comparisons between code lines.
// settings.json
// use a font with font ligatures
"editor.fontFamily": "Jetbrains Mono, Menlo, Monaco, 'Courier New', monospace",
// 4. enable font ligature
"editor.fontLigatures": true,
5. Enabling Inlay hints
It can help you see what properties need to get passed into functions. without having to hover over the function call.
// settings.json
// 5. enable parameter hints
"typescript.inlayHints.parameterNames.enabled": "all",
Top comments (24)
Nice one Jacob, it's very useful, but I think there's a typo on the second setting, it was the same with the first, I think this is what you want to put there:
Oh yes my bad 😅 thank you :)
Nice article Jacob.
This comment here is true.
You should update this article based on this comment
thanks @madeindra it's helpful :)
Great. There are some others settings, like the new file nesting, tree indent, and more.
I missed examples/screenshots in article.
Would you mind sharing the setting names? I could not find
Offcourse.
My settings (settings.json) for Tree indent:
FileNesting:
Nice Jacob. These settings can be applied in user settings which applies to all workspaces or projects instead of current workspace
Nice article Jacob, I suggest the next time you add gifs showing how the enabled settings works.
Hi Ovidio thanks :) tried but everytime I got stuck with an 422 HTTP error 🙈. I have uploaded some to my blog -> jcofman.de/blog/vs-code-tips
Those animations are great, thank you!
(at least for my kind
of use cases -> Frontende Development)
I see a typo, an extra "e" after Frontend
This is dope. It's always the little things that make a big difference.
very thanks @jcofman i like this theme 🥰✌
Wow how detailed, well-written and in-depth 😐
Nice 👍 thank you
Great ones, I would like to add some of my favorite settings as well: