Make VS Code better by editing and updating some settings

This article describes five tips on how to make
VS Code development experience a bit better (at least for my kind
of use cases -> Frontende Development) by enabling and editing some settings which are not set by default. You can go to your
settings …


This content originally appeared on DEV Community and was authored by Jacob Cofman

This article describes five tips on how to make
VS Code development experience a bit better (at least for my kind
of use cases -> Frontende 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

2. Enable bracket pair guides

Besides using bracket colorization, I love to add bracket pair guides.

// settings.json

// 2. enables vscode native bracket colorization
 "editor.bracketPairColorization.enabled": 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",


This content originally appeared on DEV Community and was authored by Jacob Cofman


Print Share Comment Cite Upload Translate Updates
APA

Jacob Cofman | Sciencx (2022-03-18T21:53:24+00:00) Make VS Code better by editing and updating some settings. Retrieved from https://www.scien.cx/2022/03/18/make-vs-code-better-by-editing-and-updating-some-settings/

MLA
" » Make VS Code better by editing and updating some settings." Jacob Cofman | Sciencx - Friday March 18, 2022, https://www.scien.cx/2022/03/18/make-vs-code-better-by-editing-and-updating-some-settings/
HARVARD
Jacob Cofman | Sciencx Friday March 18, 2022 » Make VS Code better by editing and updating some settings., viewed ,<https://www.scien.cx/2022/03/18/make-vs-code-better-by-editing-and-updating-some-settings/>
VANCOUVER
Jacob Cofman | Sciencx - » Make VS Code better by editing and updating some settings. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/18/make-vs-code-better-by-editing-and-updating-some-settings/
CHICAGO
" » Make VS Code better by editing and updating some settings." Jacob Cofman | Sciencx - Accessed . https://www.scien.cx/2022/03/18/make-vs-code-better-by-editing-and-updating-some-settings/
IEEE
" » Make VS Code better by editing and updating some settings." Jacob Cofman | Sciencx [Online]. Available: https://www.scien.cx/2022/03/18/make-vs-code-better-by-editing-and-updating-some-settings/. [Accessed: ]
rf:citation
» Make VS Code better by editing and updating some settings | Jacob Cofman | Sciencx | https://www.scien.cx/2022/03/18/make-vs-code-better-by-editing-and-updating-some-settings/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts