DEV Community

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

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...
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
Collapse
 
mmoutih profile image
marouane moutih

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

Collapse
 
randellbrianknight profile image
Randell Brian Knight

Awesome, Thanks

Collapse
 
iniisking profile image
iniisking

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

Collapse
 
marcogiuliani89 profile image
Marco Giuliani

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

Collapse
 
robbecl profile image
RobbeCl

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

Collapse
 
erlanggadewa profile image
Erlangga Dewa Sakti

number 5 is so awesome, thanks sir

Collapse
 
coinzdude profile image
coinzdude

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