Build a scalable front-end with Rush monorepo and React — VSCode

In previous posts, we added prettier and eslint to format our code and enforce a consistent code style across our projects. We can save time by automatically formatting pasted code, or fix lint errors while writing code, without running lint command to see all the errors.

VSCode provides two different types of settings:

• User Settings - applied to all VSCode instances
• Workspace Settings - applied to the current project only.

We'll use Workspace Settings and few extensions to improve our development experience in VSCode.

Install extensions

Let's add Prettier Formatter for VSCode. Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install esbenp.prettier-vscode

or you can open [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and install it manually.

In the same manner, let's install VSCode ESLint extension:

ext install dbaeumer.vscode-eslint

or install manually from [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Add settings

Create a new file .vscode/settings.json in the root of our monorepo and let's add the following settings:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/.nyc_output": true,
    "**/.rush": true
  },
  "files.exclude": {
    "**/.nyc_output": true,
    "**/.rush": true,
    "**/*.build.log": true,
    "**/*.build.error.log": true,
    "**/generated-docs": true,
    "**/package-deps.json": true,
    "**/test-apps/**/build": true
  },
  "files.trimTrailingWhitespace": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "eslint.nodePath": "common/temp/node_modules",
  "eslint.trace.server": "verbose",
  "eslint.options": {
    "resolvePluginsRelativeTo": "node_modules/@monorepo/eslint-config"
  },
  "eslint.format.enable": true,
  "eslint.lintTask.enable": true,
  "editor.codeActionsOnSave": {
    "editor.action.fixAll": true,
    "source.fixAll.eslint": true
  }
}

In these settings we:

• set Prettier as default formatter
• exclude from search some irrelevant folders like node_modules and .nyc_output
• exclude from VSCode file explorer irrelevant files
• provide a nodePath for ESLint. We're not using eslint directly (we're using lint script from react-scripts) so we're helping the extension to find the eslint binary.
• provide a path to eslint plugins. We're helping ESLint extension to pick up the right rules for each project.

I hope you'll find these settings useful.