VSCode settings.json: A Complete Guide

VSCode's settings.json file is the key to customizing your coding environment. This guide will walk you through everything you need to know about this powerful configuration file.

How to Open settings.json in VSCode

There are multiple ways to access your settings.json file:

1. Keyboard Shortcut: Press Ctrl+, (Windows/Linux) or Cmd+, (Mac) to open Settings, then click the "Open Settings (JSON)" icon in the top-right corner.

2. Command Palette: Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac), type "settings json" and select "Preferences: Open Settings (JSON)".

3. File Menu: Go to File > Preferences > Settings, then click the JSON icon in the upper-right corner.

Essential VSCode settings.json Configurations

Here are some basic settings to enhance your coding experience:

{
  "editor.fontSize": 16,
  "editor.fontFamily": "Fira Code, Consolas, monospace",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "workbench.colorTheme": "One Dark Pro",
  "terminal.integrated.fontSize": 14,
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Common settings.json Modifications

Apart from these essential settings, there are also a few things that you can do to make your VScode editor more personalised.

Customizing Your Editor

Make your coding environment more visually appealing and functional with these settings. They improve cursor visibility, add animations for smoother interactions, and enable helpful visual aids like bracket pair colorization that make code structure easier to understand.

{
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}

Enhancing File Management

These settings help maintain clean code and organized projects. They automatically remove trailing whitespace, add newlines at file ends, and hide distracting system files like .git directories and node_modules folders from your workspace explorer.

{
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true
  }
}

Pro Tips for VSCode settings.json

Language-Specific Settings

Different programming languages often require different formatting conventions. These settings allow you to configure VSCode to automatically apply the right formatting rules based on the file type you're editing.

{
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "ms-python.python"
  }
}

Terminal Customization

The integrated terminal is a powerful VSCode feature. These settings let you choose your preferred shell for each operating system and set a coding-optimized font that supports programming ligatures and icons.

{
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontFamily": "MesloLGS NF"
}

Handy VSCode Settings for Productivity

Auto-Formatting and Linting

These settings automate code quality control. They configure VSCode to automatically fix ESLint errors, organize imports, and apply Prettier formatting rules when you save files, maintaining consistent code style across your projects.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all"
}

Git Integration

Streamline your version control workflow with these Git settings. They enable automatic commits when staging changes, remove confirmation dialogs for sync operations, set up automatic fetching of remote changes, and improve diff views by showing whitespace changes.

{
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "diffEditor.ignoreTrimWhitespace": false
}

VSCode Tips and Tricks

1. Multi-cursor editing: Hold Alt (Windows) or Option (Mac) while clicking to add multiple cursors

2. Command Palette: Use Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to access all VSCode commands quickly

3. Zen Mode: Use Ctrl+K Z to enter distraction-free coding mode

4. Split editors: Ctrl+\ to split the editor or drag a tab to the side

5. Quick file navigation: Ctrl+P to quickly jump between files

Conclusion

Your VSCode settings.json file is the ultimate customization tool. With these one-time settings changes, you can transform VSCode into the perfect coding environment for your specific needs and workflow. Experiment with different configurations to discover what works best for you.

Pro tip: Backup your settings.json file using the Settings Sync feature or by storing it in a GitHub repository to easily transfer your preferences between different machines or for the events when something goes wrong :)

Note: If you are a developer, you should be on Peerlist. It is a big community of developers and designers, you must be part of!