DEV Community

Cover image for Make VS Code better by editing and updating some settings
Jacob Cofman
Jacob Cofman

Posted on • Edited on • Originally published at jcofman.de

Make VS Code better by editing and updating some settings

#vscode #javascript #productivity

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

  1. CMD + ⌘ + P
  2. Type in settings
  3. - 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
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

Top comments (24)

Collapse
 
madeindra profile image
Made Indra •

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:

// settings.json

// 2. enables vscode native bracket pairs guide
"editor.guides.bracketPairs": true
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jcofman profile image
Jacob Cofman •

Oh yes my bad 😅 thank you :)

Collapse
 
amjedidiah profile image
Jedidiah Amaraegbu •

Nice article Jacob.
This comment here is true.

You should update this article based on this comment

Collapse
 
jacksonkasi profile image
Jackson Kasi •

thanks @madeindra it's helpful :)

Collapse
 
arthurassuncao profile image
Arthur Nascimento Assunção • • Edited

Great. There are some others settings, like the new file nesting, tree indent, and more.
I missed examples/screenshots in article.

Collapse
 
coinzdude profile image
coinzdude •

Would you mind sharing the setting names? I could not find

Collapse
 
arthurassuncao profile image
Arthur Nascimento Assunção •

Offcourse.
My settings (settings.json) for Tree indent:

"workbench.tree.indent": 15,
Enter fullscreen mode Exit fullscreen mode

FileNesting:

"explorer.experimental.fileNesting.enabled": true,
  "explorer.experimental.fileNesting.expand": false,
  "explorer.experimental.fileNesting.patterns": {
    "*.tsx": "$(capture).module.css, $(capture).module.scss, $(capture).stories.tsx, $(capture).stories.mdx, $(capture).test.ts, $(capture).test.tsx, $(capture).spec.ts",
    "*.jsx": "$(capture).module.css, $(capture).module.scss, $(capture).stories.jsx, $(capture).stories.mdx, $(capture).test.js, $(capture).test.jsx, $(capture).spec.js",
    "*.ts": "$(capture).module.css, $(capture).module.scss, $(capture).stories.tsx, $(capture).stories.mdx, $(capture).test.ts, $(capture).spec.ts",
    "*.js": "$(capture).module.css, $(capture).module.scss, $(capture).stories.jsx, $(capture).stories.mdx, $(capture).test.js, $(capture).spec.js"
  },
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jacksonkasi profile image
Jackson Kasi •

very thanks @jcofman i like this theme 🥰✌

Collapse
 
ovirex profile image
Ovidio Pérez •

Nice article Jacob, I suggest the next time you add gifs showing how the enabled settings works.

Collapse
 
jcofman profile image
Jacob Cofman •

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

Collapse
 
coinzdude profile image
coinzdude •

Those animations are great, thank you!

Collapse
 
madhan_s profile image
Madhan S • • Edited

Nice Jacob. These settings can be applied in user settings which applies to all workspaces or projects instead of current workspace

  1. CMD + ⌘ + P
  2. Type in settings
  3. Select Open User Settings (JSON)
Collapse
 
alsidneio profile image
alsidneio •

This is dope. It's always the little things that make a big difference.

Collapse
 
ahmadsaman profile image
Ahmad Saman Abdulhadi •

Nice 👍 thank you

Collapse
 
timmortal profile image
Timmortal •

(at least for my kind
of use cases -> Frontende Development)

I see a typo, an extra "e" after Frontend

Collapse
 
joshistoast profile image
Josh Corbett • • Edited

Wow how detailed, well-written and in-depth 😐

Collapse
 
boshrajaber profile image
Boshra Jaber • • Edited

Great ones, I would like to add some of my favorite settings as well:

 // settings for auto format on paste, save, and type
 "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnType": true
Enter fullscreen mode Exit fullscreen mode
View full discussion (24 comments)

Read next

aralroca profile image

Brisa 0.2.0 Release Notes

Aral Roca -

shavonharrisdev profile image

Understanding K Element Patterns in LeetCode: The Basics (Part 1)

Shavon Harris -

abhay_yt_52a8e72b213be229 profile image

Mastering Redux Toolkit: Simplify State Management in Your React App

Abhay Singh Kathayat -

iprogrammer_solutionspvt profile image

Progressive Web Applications: Your Ultimate Guide to Modern Web Development

iProgrammer Solutions Pvt. Ltd. -