Posted in

Best VS Code Settings for a Cleaner, Faster, and More Productive Coding Workflow

•0•Posted inDevelopment Tools

Introduction

Visual Studio Code is already one of the most powerful code editors available, but its real strength appears when you customize it properly. With the right VS Code settings, you can reduce visual clutter, improve navigation, make search results more useful, organize project files, customize the terminal, and create a much smoother coding experience.

Most developers install extensions and themes, but they often ignore the settings.json file. This file controls how VS Code behaves at a deeper level. A few smart changes can make your editor feel faster, cleaner, and more professional.

In this guide, you will find some of the best VS Code settings for developers who want a more productive workflow. These settings cover the editor, Explorer, search, source control, testing, terminal, and user interface.

What Is settings.json in VS Code?

The settings.json file is where Visual Studio Code stores your custom editor preferences. Instead of changing every option through the graphical Settings panel, you can directly edit this file and control your environment with clear JSON configuration.

To open your VS Code settings.json file:

  1. Press Ctrl + Shift + P
  2. Search for Preferences: Open User Settings (JSON)
  3. Open the file and paste your preferred settings

Using settings.json is especially useful because your configuration becomes portable. You can back it up, version it with Git, or reuse it across multiple machines.

Best VS Code Editor Settings

1. Improve Comment Readability with Better Comments

Comments are useful, but plain comments can become difficult to scan in large projects. The Better Comments extension helps you visually separate important notes, questions, completed tasks, warnings, and removed code.

After installing the Better Comments extension, add this configuration to your settings.json file:

"better-comments.tags": [
  {
    "tag": "!",
    "color": "#FF6961",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "?",
    "color": "#AEC6CF",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "//",
    "color": "#474747",
    "strikethrough": true,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "[]",
    "color": "#FEFE95",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "[x]",
    "color": "#FEFE95",
    "strikethrough": true,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  },
  {
    "tag": "*",
    "color": "#B19CD9",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": false,
    "italic": false
  }
]

This setting makes your comments easier to scan and helps you quickly identify what needs attention inside your codebase.

2. Use Custom Editor Labels for Better File Identification

In large projects, it is common to have multiple files with the same name. For example, you may have several styles.css files in different folders. By default, this can make editor tabs confusing.

Custom editor labels allow you to display file paths in a more meaningful way.

"workbench.editor.customLabels.enabled": true,
"workbench.editor.customLabels.patterns": {
  "src/**/*.css": "/${dirname} ${filename}.${extname}"
}

With this configuration, files like these:

src/home/styles.css
src/layout/styles.css

can appear with clearer labels, making it easier to switch between files without opening the wrong one.

3. Hide Inlay Hints by Default

Inlay hints show extra information inside the editor, such as parameter names, inferred types, and return values. They can be helpful, but they can also make your editor feel crowded.

A balanced option is to hide them by default and show them only when needed:

"editor.inlayHints.enabled": "offUnlessPressed"

This keeps the editor clean while still giving you access to extra code context when necessary.

4. Enable Auto Save

Auto Save is one of the simplest ways to speed up your workflow. It reduces the need to manually save files and works especially well with tools that support hot reload, such as React, Vite, Next.js, and Live Server.

"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000

This setting saves your file automatically after one second.

5. Automatically Fold Imports

Import sections can become long and distracting, especially in JavaScript, TypeScript, Python, React, and backend projects. You can make VS Code fold imports automatically when opening a file.

"editor.foldingImportsByDefault": true

This gives you a cleaner view and lets you focus on the actual logic of the file.

6. Enable Smooth Cursor Animation

This setting improves the visual feel of the editor by making cursor movement smoother.

"editor.cursorSmoothCaretAnimation": "on"

It does not change the functionality of VS Code, but it makes the editing experience feel more polished.

7. Always Show Folding Controls

Code folding helps you collapse functions, classes, imports, and code blocks. By default, folding controls may only appear when you hover over the gutter. To make them always visible, use:

"editor.showFoldingControls": "always"

You can also enable Sticky Scroll:

"editor.stickyScroll.enabled": true

Sticky Scroll helps you understand where you are inside large files by keeping the current scope visible at the top of the editor.

Best VS Code Explorer Settings

8. Disable Compact Folders

VS Code displays single-child folders in a compact format by default. While this saves space, it can make project structure harder to understand.

To display folders in a clearer hierarchy, use:

"explorer.compactFolders": false

This is useful when working with large or deeply nested projects.

9. Disable File Decorations for a Cleaner Explorer

VS Code can show badges and colors in the Explorer for Git changes, errors, warnings, and other file states. These indicators can be useful, but they can also make the file tree visually noisy.

To simplify the Explorer view:

"explorer.decorations.badges": false,
"explorer.decorations.colors": false

This setting is ideal if you prefer a minimal and distraction-free file tree.

10. Enable File Nesting

File nesting helps organize related files under a main file. This is useful for generated files, configuration files, CSS files, and environment-specific files.

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
  "*.scss": "${capture}.css",
  ".eslintrc.*": ".eslintignore, .editorconfig, .prettierrc",
  "appsettings.json": "appsettings.*.json"
}

With file nesting enabled, your Explorer becomes easier to scan and less cluttered.

11. Sort Files by Type

Sorting files by type can make your project structure easier to navigate.

"explorer.sortOrder": "type"

This groups files and folders in a more structured way, helping you find what you need faster.

Best VS Code Search Settings

12. Exclude Unnecessary Files from Search

Search results can become messy when folders like node_modules or log files are included. Excluding unnecessary files improves both speed and accuracy.

"files.exclude": {
  "**/node_modules": true,
  "**/node_modules/**": true,
  "**/*.log": true
}

This helps you focus only on relevant project files.

13. Show Line Numbers in Search Results

When searching across a project, line numbers make it much easier to understand where a match appears.

"search.showLineNumbers": true

This is especially helpful when debugging, refactoring, or reviewing a large codebase.

14. Enable Smart Case Search

Smart Case makes search behavior more intelligent. If your search query is lowercase, VS Code performs a case-insensitive search. If your query contains uppercase letters, it performs a case-sensitive search.

"search.smartCase": true

For example, searching for code can match both code and Code, while searching for Code will return more specific matches.

Best VS Code Source Control Settings

15. Customize Source Control Font

If you use Git inside VS Code, the Source Control input box is where you write commit messages. A better font can improve readability and consistency.

"scm.inputFontFamily": "'Cascadia Code', Consolas, monospace"

This gives the source control input a more developer-friendly appearance.

16. Increase Commit Message Input Height

The default commit message input can feel too small. Increasing the minimum and maximum number of visible lines makes it easier to write better commit messages.

"scm.inputMinLineCount": 3,
"scm.inputMaxLineCount": 10

This is useful if you follow structured commit messages or write detailed descriptions.

17. Add Column Rulers for Commit Messages

Many developers follow the 50/72 rule for Git commit messages. You can add vertical rulers to help keep commit messages readable and consistent.

"[scminput]": {
  "editor.rulers": [50, 72],
  "editor.wordWrap": "off"
}

This encourages cleaner commit formatting and helps maintain better Git history.

Best VS Code Testing Setting

18. Stop Test Results from Opening Automatically

If you run tests frequently, VS Code may automatically open the Testing view, interrupting your workflow. You can prevent that with:

"testing.automaticallyOpenTestResults": "neverOpen"

This keeps your focus on the editor and lets you check test results only when you decide to.

Best VS Code Terminal Settings

19. Customize Terminal Cursor Style

The integrated terminal is one of the most-used parts of VS Code. A clearer cursor makes terminal work easier, especially during long sessions.

"terminal.integrated.cursorStyle": "line",
"terminal.integrated.cursorWidth": 4,
"terminal.integrated.cursorBlinking": false

This makes the cursor more visible and less distracting.

20. Adjust Terminal Font Size and Line Height

Terminal readability matters. These settings create a comfortable terminal layout:

"terminal.integrated.fontSize": 14,
"terminal.integrated.lineHeight": 1.2

You can adjust the font size depending on your monitor and personal preference.

21. Disable Persistent Terminal Sessions

Persistent terminal sessions can be useful, but they can also restore old terminal states that you no longer need.

"terminal.integrated.persistentSessions": false

Disabling this keeps your terminal cleaner when reopening VS Code.

Best VS Code User Interface Settings

22. Open Settings as JSON by Default

If you prefer direct control over your configuration, make VS Code open settings in JSON format by default.

"workbench.settings.editor": "json"

This is useful for developers who like version-controlled, portable configuration.

23. Hide the Command Center

The Command Center can be useful, but if you do not use it often, it takes up unnecessary space in the title bar.

"window.commandCenter": false

This creates a cleaner and more focused interface.

24. Hide Breadcrumbs

Breadcrumbs show the current file path at the top of the editor. If you prefer a cleaner workspace, you can disable them.

"breadcrumbs.enabled": false

This gives you more vertical space for your code.

Complete VS Code settings.json Example

Here is a complete version of the recommended VS Code settings:

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  "editor.inlayHints.enabled": "offUnlessPressed",
  "editor.foldingImportsByDefault": true,
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.showFoldingControls": "always",
  "editor.stickyScroll.enabled": true,

  "explorer.compactFolders": false,
  "explorer.decorations.badges": false,
  "explorer.decorations.colors": false,
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.expand": false,
  "explorer.fileNesting.patterns": {
    "*.scss": "${capture}.css",
    ".eslintrc.*": ".eslintignore, .editorconfig, .prettierrc",
    "appsettings.json": "appsettings.*.json"
  },
  "explorer.sortOrder": "type",

  "files.exclude": {
    "**/node_modules": true,
    "**/node_modules/**": true,
    "**/*.log": true
  },
  "search.showLineNumbers": true,
  "search.smartCase": true,

  "scm.inputFontFamily": "'Cascadia Code', Consolas, monospace",
  "scm.inputMinLineCount": 3,
  "scm.inputMaxLineCount": 10,

  "[scminput]": {
    "editor.rulers": [50, 72],
    "editor.wordWrap": "off"
  },

  "testing.automaticallyOpenTestResults": "neverOpen",

  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorWidth": 4,
  "terminal.integrated.cursorBlinking": false,
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.lineHeight": 1.2,
  "terminal.integrated.persistentSessions": false,

  "workbench.settings.editor": "json",
  "window.commandCenter": false,
  "breadcrumbs.enabled": false,

  "workbench.editor.customLabels.enabled": true,
  "workbench.editor.customLabels.patterns": {
    "src/**/*.css": "/${dirname} ${filename}.${extname}"
  },

  "better-comments.tags": [
    {
      "tag": "!",
      "color": "#FF6961",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "?",
      "color": "#AEC6CF",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "[]",
      "color": "#FEFE95",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "[x]",
      "color": "#FEFE95",
      "strikethrough": true,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    },
    {
      "tag": "*",
      "color": "#B19CD9",
      "strikethrough": false,
      "underline": false,
      "backgroundColor": "transparent",
      "bold": false,
      "italic": false
    }
  ]
}

Which VS Code Settings Should You Start With?

If you do not want to apply everything at once, start with these essential settings:

  • Auto Save
  • File Nesting
  • Hidden Inlay Hints
  • Search line numbers
  • Smart Case search
  • Terminal font size
  • Import folding
  • JSON settings editor

These options give you the biggest productivity improvement without making your configuration too complex.

Final Thoughts

The best VS Code settings are not only about appearance. They directly affect how quickly you can navigate files, write code, search across projects, use the terminal, manage Git commits, and stay focused.

A clean editor helps you think clearly. A structured Explorer helps you move faster. A better terminal improves daily command-line work. Small configuration changes can create a major improvement in your development workflow.

Start with the essential settings, test them for a few days, and then adjust them based on your own coding style. The goal is not to add every possible setting, but to build a VS Code environment that feels fast, focused, and reliable.

FAQ

What is the best VS Code setting for productivity?

Auto Save is one of the most useful productivity settings because it removes the need to manually save files and works well with hot reload tools.

Where is the VS Code settings.json file?

You can open it by pressing Ctrl + Shift + P and selecting Preferences: Open User Settings (JSON).

Is it safe to edit settings.json manually?

Yes. It is safe as long as you keep valid JSON syntax. VS Code usually highlights errors if the configuration is invalid.

Should I use all these VS Code settings?

Not necessarily. Start with the settings that match your workflow, then add more as needed.

Can I use the same VS Code settings on another computer?

Yes. You can copy your settings.json file and use it on another machine. You can also sync settings through VS Code’s built-in Settings Sync feature.

Leave a Reply

Your email address will not be published. Required fields are marked *