Step 1: Add the dependencies
To do the migration, run the schematic package to add the @angular-eslint into your project.
ng add @angular-eslint/schematics
“After running this command, it will install the packages and add the packages in the package.json file.
{
"name": "eslint-demo",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~11.0.1",
"@angular/common": "~11.0.1",
"@angular/compiler": "~11.0.1",
"@angular/core": "~11.0.1",
"@angular/forms": "~11.0.1",
"@angular/platform-browser": "~11.0.1",
"@angular/platform-browser-dynamic": "~11.0.1",
"@angular/router": "~11.0.1",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0.1",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"@angular-eslint/builder": "0.8.0-beta.3",
"@angular-eslint/eslint-plugin": "0.8.0-beta.3",
"@angular-eslint/eslint-plugin-template": "0.8.0-beta.3",
"@angular-eslint/schematics": "^0.8.0-beta.3",
"@angular-eslint/template-parser": "0.8.0-beta.3",
"@typescript-eslint/eslint-plugin": "4.3.0",
"@typescript-eslint/parser": "4.3.0"
}
}
Step 2: Run the eslint schematic on a project
After that, you can choose the project that you want to migrate. The following command can run the eslint schematic.
ng g @angular-eslint/schematic:convert-tslint-to-eslint {{ Your project name }}
After running this command, eslintrc.json will be created. Let’s take a look at the configuration that was generated from the above command.
{
"root": true,
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"tsconfig.json",
"e2e/tsconfig.json"
],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/ng-cli-compat",
"plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
]
}
},
{
"files": [
"*.html"
],
"extends": [
"plugin:@angular-eslint/template/recommended"
],
"rules": {}
}
]
}
Notice that the configuration is inside in the overrides field because the Angular project has the HTML files and typescript files. We can avoid the conflicts using the ESLint overrides field that allows us to separate rules for different file types.
In the above configuration, we can see the configuration of the @angular-eslint plugin:@angular-eslint/ng-cli-compat and @angular-eslint/ng-cli-compat--formatting-add-on. These two configurations are used for the automatic matching of TSLint rules and ESLint rules.
env: What to include in a linting and what version to be used in your project.
extends: What packages will be extended.
parser: What parser to be used.
parserOptions: The Project setting for typescript.
