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 usinglint
script fromreact-scripts
) so we're helping the extension to find theeslint
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)