43
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:
We'll use Workspace Settings and few extensions to improve our development experience in VSCode.
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-vscodeor 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-eslintCreate 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:
node_modules and .nyc_output
eslint directly (we're using lint script from react-scripts) so we're helping the extension to find the eslint binary.eslint plugins. We're helping ESLint extension to pick up the right rules for each project.I hope you'll find these settings useful.
43