Tips on using VSCode

1. Override vscode global settings with per “project” setting

You may work on multiple repositories, each with their own programming language, linting rules, etc… so the default User settings in VSCode may not fit for all of them.

To customise settings for individual “project” (or “workspace” as it’s called in VSCode), head to the Settings Menu and switch to Workspace tab, or simply create a settings.jsonfile under .vscode folder.

The .vscode/settings.json file should be also checked in into your source control

2. Specify a default formatter for your language

// .vscode/.settings.json file
{
  "[javascriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

3. Specify recommended plugins for better collaboration

To make sure you and your teammates are using the same set of plugins, declare the plugins that you use in the .vscode/extensions.json file, e.g

// .vscode/extensions.json
{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "streetsidesoftware.code-spell-checker"
  ]
}