# Migrate TSLint to ESLint ---- ## WHY With Angular 11 release it was announced that the TSlint (deprecated in 2019) linter was to be replaced by ESLint. ---- ## WHAT ### Our project * TSLint * Codelyzer * Airbnb style guide rules ---- ## HOW ### Angular ESLint **Step 1 - Add relevant dependencies** ``` ng add @angular-eslint/schematics ``` ---- **Step 2 - Run the "convert-tslint-to-eslint" schematic** ``` ng g @angular-eslint/schematics:convert-tslint-to-eslint {{YOUR_PROJECT_NAME_GOES_HERE}} ``` ```+ .eslintrc.json``` ---- **Step 3 - Remove root TSLint configuration and use only ESLint** ```- .tslint.json``` ---- **Step 4 - Customizing ESLint** - Prettier - Airbnb - customized ---- ```.eslintrc.json``` ```json { "overrides": [ { "files": ["*.ts"], "extends": [], "rules": {} }, { "files": ["*.html"], "extends": [], "rules": {} } } ``` ---- ```json "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" ], ``` ---- ### Prettier ``` npm install -D prettier eslint-config-prettier eslint-plugin-prettier ``` ```json "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", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], ``` ---- ### airbnb ``` eslint-config-airbnb-typescript ``` ``` npm install eslint-plugin-import@^2.22.0 @typescript-eslint/eslint-plugin@^4.4.1 ``` ```json "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", "airbnb-typescript/base", "prettier/@typescript-eslint", "plugin:prettier/recommended" ], ```