DEV Community

Cover image for Build a scalable front-end with Rush monorepo and React — VSCode
Alexandru Bereghici
Alexandru Bereghici

Posted on • Originally published at bereghici.dev

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)