DEV Community

Saulo Dias
Saulo Dias

Posted on • Edited on

Setting up ESLint + Prettier

#eslint #prettier #typescript #linting

Disclaimer: This is not intended as a step-by-step tutorial. It's just a suggestion of implementation of basic opinionated rules.

Install Prettier

npm install prettier --save-dev

Create the .prettierrc file.

{ "printWidth": 80, "singleQuote": true, "useTabs": false, "tabWidth": 2, "semi": true, "bracketSpacing": true, "trailingComma": "es5", "jsxSingleQuote": false, "bracketSameLine": true, "arrowParens": "always", "endOfLine": "crlf", "singleAttributePerLine": true }
Enter fullscreen mode Exit fullscreen mode

Install ESlint and Dependencies 

npm install --save-dev eslint eslint-config-prettier @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest`
Enter fullscreen mode Exit fullscreen mode

Create the .eslintrc.json file.

{ "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": 12, "sourceType": "module" }, "plugins": [ "@typescript-eslint" ], "rules": { "indent": ["error", 2, { "SwitchCase": 1 }], "linebreak-style": ["error", "windows"], "quotes": ["error", "single", { "avoidEscape": true }], "semi": ["error", "always"], "curly": ["error", "multi-line"] } }
Enter fullscreen mode Exit fullscreen mode

Create the .eslintignore file.

# Add folders, files, and glob patterns # which should be ignored by the linter /node_modules /dist
Enter fullscreen mode Exit fullscreen mode

Set up scripts (package.json) 

"scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "lint": "eslint . --quiet", "lint:fix": "eslint . --fix" }
Enter fullscreen mode Exit fullscreen mode

VSCode Extensions

Install Prettier - Code formatter [VSCode Extension]

Name: Prettier - Code formatter
Publisher: Prettier
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Set Prettier as your default code formatter

On VSCode, open your settings.json file and add the following configurations.

"editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
Enter fullscreen mode Exit fullscreen mode

Install ESLint [VSCode Extension]

Name: ESLint
Publisher: Dirk Baeumer
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Setup Library Execution

The ESLint plugin requires permission to execute the local ESLint installation from your node_modules. Open the command palette (F1 or Ctrl + Shift + P) and select ESLint: Manage Library Execution to open the dialog for your project and confirm with 'Accept'.

Troubleshooting

ESLint not working in VSCode? Help build a troubleshooting checklist!

Top comments (0)