Angular project have deprecated the use of TSLint and Codelyzer in version 11, and even if it continues doing the job I strongly recommend to migrate to ESLint and Prettier to help maintaining a consistent style:
- Prettier for Formatting rules: eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…
- ESLint for Code-quality rules: eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…
Prettier and ESLint complement each other, but they can also conflict when they disagree about style rules. The Prettier project has a guide to integrating Prettier with ESLint to make sure there are no conflicts and a guide on how to integrate Prettier with your text editor.
To migrate form our Angular project from TSLint+Codelyzer to ESLint+Prettier we’ll follow the read of dev.to/gsarciotto - Migrating and configuring Eslint with Angular 11.
Migrate from TSLint + Codelyzer to ESLint + angular-eslint
angular-eslint schematics
Codelyzer is a set of TSLint rules for static code analysis of Angular TypeScript projects. Since Angular project has deprecated the use of TSLint and Codelyzer in version 11, and even if it continues doing the job I strongly recommend to migrate to ESLint and angular-eslint
angular-eslint provides schematics to help with the migration as well as specific Angular linting rules for ESLint.
$ ng add @angular-eslint/schematics
$ ng g @angular-eslint/schematics:convert-tslint-to-eslint app
What the schematics will do is look at the chosen project’s tslint.json and try to match your TSlint rules with ESLint rules in a new file .eslintrc.json, adjust your Angular configurations to use ESLint instead of TSlint as well as replace tslint:disable comments to their ESLint equivalent.
Once you are happy with your ESLint setup, you simply need to remove the root-level tslint.json and uninstall both tslint and codelyzer from your project.
$ git rm tslint.json
$ npm uninstall tslint codelyzer @angular-eslint/schematics -D
Once setup complete, test linting any file to guarantee it’s working fine.
$ npx eslint src/app/stacks/index.ts
/Users/vdias38/Dvpt/PROJECTS/app-ionic4/src/app/stacks/index.ts
1:49 error Strings must use singlequote @typescript-eslint/quotes
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Add files to ignore
To exclude files from linting, create a .eslintignore file in the root of your project.
package.json
package-lock.json
e2e/**
karma.conf.js
Customizing ESLint
Update typescript configs on .eslintrc.json and turn off some rules to run linter without errors.
I’ve added void operator to prevent @typescript-eslint/no-floating-promises as recommended by eslint .
{
"extends": [
"plugin:@angular-eslint/recommended",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@typescript-eslint/no-unsafe-assignment": "off",
"@typescript-eslint/no-unsafe-member-access": "off",
"@typescript-eslint/no-unsafe-call": "off",
...
}
Add Prettier
What works well along with ESLint is prettier, which does a great job at handling code formatting.
$ npm install -D prettier eslint-config-prettier
+ prettier@2.2.1
+ eslint-config-prettier@7.1.0
./.prettierrc.json
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"bracketSpacing": true,
"arrowParens": "always",
"printWidth": 80
}
$ npx prettier --check src/app/app.component.ts
Checking formatting...
[warn] src/app/app.component.ts
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
$
OBS: if you use VSCode text editor, do not use Prettier extension if you have ESLint running Prettier, as we suggest on this post. Below I share my VSCode settings.json, I use eslint extension for js and ts formatting and prettier as default formatter for others languages:
You can edit the underlying settings.json file by using the Open Settings (JSON) command.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.minimap.enabled": true,
"breadcrumbs.enabled": true,
"editor.formatOnSave": true
}
eslint-config-prettier turns off all rules that are unnecessary or might conflict with Prettier.
Then, add eslint-config-prettier to the “extends” array in your .eslintrc.* file. Make sure to put it last, so it gets the chance to override other configs.
"extends": [
"plugin:@angular-eslint/ng-cli-compat",
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
"plugin:@angular-eslint/template/process-inline-templates",
"prettier",
"prettier/@typescript-eslint"
],
$ npx eslint-config-prettier src/app/app.component.ts
The following rules are unnecessary or might conflict with Prettier:
- brace-style
The following rules are enabled with config that might conflict with Prettier. See:
https://github.com/prettier/eslint-config-prettier#special-rules
- curly
$
OBS: one of the most commented issue on using Prettier within Angular Project is the multi-line imports. It is related to printWidth config. I strongly recommend to read the Prettier opinion about multi-line import to understand how it works.
You can also use cli to run prettier on your project or glob:
$ npx prettier --check .
$ npx prettier --write src/app/home/home.module.ts
To exclude files from formatting, create a .prettierignore file in the root of your project.
package.json
package-lock.json
e2e/**
karma.conf.js
Enable Prettier only if config file exists
Enable Prettier only when a configuration file is present in the project. To enable this option open VSCode settings
- On Windows/Linux - File > Preferences > Settings
- On macOS - Code > Preferences > Settings
Search for Prettier:Require Config and make sure it is checked.
Running Prettier only on updtaed files on pre-commit
The fastest way to start using lint-staged is to run following command in your terminal:
$ npx mrm lint-staged
It will install and configure husky and lint-staged depending on code quality tools from package.json dependencies.
When install complete you should have new husky and lint-staged entries on package.json, you can them configure as below:
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.ts": "eslint --cache --fix",
"*.{html,css,md}": "prettier --write"
}
--fix: Automatically fix problems--cache: Only check changed files
--write: formats all files supported by Prettier
Furthermore
