DEV Community

Make VS Code better by editing and updating some settings

Jacob Cofman on March 18, 2022

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 Devel...

Read full post

Made Indra • Mar 19 '22

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

Jacob Cofman • Mar 20 '22

Oh yes my bad 😅 thank you :)

Jedidiah Amaraegbu • Mar 19 '22

Nice article Jacob.
This comment here is true.

You should update this article based on this comment

Jackson Kasi • Mar 20 '22

thanks @madeindra it's helpful :)

Arthur Nascimento Assunção • Mar 20 '22 • Edited

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

coinzdude • Mar 26 '22

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

Arthur Nascimento Assunção • Mar 27 '22

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

"workbench.tree.indent": 15,

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"
  },

Madhan S • Mar 19 '22 • Edited

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

CMD + ⌘ + P
Type in settings
Select Open User Settings (JSON)

Ovidio Pérez • Mar 20 '22

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

Jacob Cofman • Mar 20 '22

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

coinzdude • Mar 26 '22

Those animations are great, thank you!

Timmortal • Mar 20 '22

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

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

alsidneio • Mar 20 '22

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

Jackson Kasi • Mar 20 '22

very thanks @jcofman i like this theme 🥰✌

Josh Corbett • Mar 20 '22 • Edited

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

Ahmad Saman Abdulhadi • Mar 19 '22

Nice 👍 thank you

Boshra Jaber • Mar 23 '22 • 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

marouane moutih • Mar 24 '22

it's the little things that make a big difference, thnaks a lott

iniisking • Mar 24 '22

Not everyone uses a Mac. There's no guide for Windows users.

Marco Giuliani • Mar 25 '22

It's the same,
with Ctrl+Shift+P
rather than CMD + ⌘ + P

Randell Brian Knight • Mar 20 '22

Awesome, Thanks

RobbeCl • Mar 20 '22

I love this setting "typescript.inlayHints.parameterNames.enabled", thanks! :-)

Erlangga Dewa Sakti • Mar 23 '22

number 5 is so awesome, thanks sir

coinzdude • Mar 26 '22

Amazing. Would love to see a compilation of this, and others suggestions in the thread here