Angular Prettier ESLint husky

Install Prettier:

1
npm install --save-dev --save-exact prettier

Install Prettier plugin for Intellij:

  • Intellij => Preferences => Plugins:
  • Search 'Prettier' and hit Install button

Configure Prettier for Intellij:

  • Intellij => Preferences => Languages & Frameworks => JavaScript => Prettier:
  • On 'Reformat Code' action (check)
  • On save (check)

Add file to the root: .prettierrc.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
 
  "printWidth": 140,
 
  "tabWidth": 2,
 
  "endOfLine": "auto",
 
  "singleQuote": true,
 
  "quoteProps": "as-needed",
 
  "trailingComma": "none",
 
  "arrowParens": "always",
 
  "bracketSameLine": true,
 
  "singleAttributePerLine": true,
 
  "overrides": [
 
    {
 
      "files": ["*.md", "*.json", "*.conf.js"],
 
      "options": {
 
        "tabWidth": 2
 
      }
 
    }
 
  ]
 
}

Add file to the root: .prettierignore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Ignore artifacts:
 
.angular/**
 
.idea/**
 
e2e/**
 
node_modules
 
package.json
 
package-lock.json
 
karma.conf.js

Format all files with Prettier manually once:

1
npx prettier --write .

Add eslint-config-prettier

Prettier husky pre-commit hook

Migrate TSLint to ESLint

1
2
3
ng add @angular-eslint/schematics
 
ng g @angular-eslint/schematics:convert-tslint-to-eslint

Once complete, you should see a new “.eslintrc.json” file at the root of your project and your angular.json “lint” sections should now reference @angular-eslint.

To test, run the following command from your project.

1
ng lint

Configure ESLint for Intellij:

  • Intellij => Preferences => Languages & Frameworks => JavaScript => Code Quality Tools => ESLint:
  • Automatic ESLint configuration (check)

husky

husky pre-commit hook:

1
2
3
4
5
6
7
npm install --save-dev husky lint-staged
 
npx husky install
 
npm set-script prepare "husky install"
 
npx husky add .husky/pre-commit "npx lint-staged"

File: .husky / pre-commit

1
2
3
4
5
6
7
8
9
#!/usr/bin/env sh
 
. "$(dirname -- "$0")/_/husky.sh"
 
 
 
npm run lint
 
npx lint-staged

Final version of the package.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
{
 
  "name": "angular-frontend",
 
  "version": "0.0.0",
 
  "scripts": {
 
    "ng": "ng",
 
    "start": "ng serve",
 
    "build": "ng build",
 
    "watch": "ng build --watch --configuration development",
 
    "test": "ng test",
 
    "lint": "npx eslint \"src/**/*.{js,jsx,ts,tsx,html}\" --quiet --fix",
 
    "prettier": "npx prettier --write .",
 
    "prepare": "husky install"
 
  },
 
  "private": true,
 
  "dependencies": {
 
    "@angular/animations": "^14.2.0",
 
    "@angular/common": "^14.2.0",
 
    "@angular/compiler": "^14.2.0",
 
    "@angular/core": "^14.2.0",
 
    "@angular/forms": "^14.2.0",
 
    "@angular/platform-browser": "^14.2.0",
 
    "@angular/platform-browser-dynamic": "^14.2.0",
 
    "@angular/router": "^14.2.0",
 
    "rxjs": "~7.5.0",
 
    "tslib": "^2.3.0",
 
    "zone.js": "~0.11.4"
 
  },
 
  "devDependencies": {
 
    "@angular-devkit/build-angular": "^14.2.7",
 
    "@angular-eslint/builder": "14.1.2",
 
    "@angular-eslint/eslint-plugin": "14.1.2",
 
    "@angular-eslint/eslint-plugin-template": "14.1.2",
 
    "@angular-eslint/schematics": "14.1.2",
 
    "@angular-eslint/template-parser": "14.1.2",
 
    "@angular/cli": "~14.2.7",
 
    "@angular/compiler-cli": "^14.2.0",
 
    "@types/jasmine": "~4.0.0",
 
    "@typescript-eslint/eslint-plugin": "5.37.0",
 
    "@typescript-eslint/parser": "5.37.0",
 
    "eslint": "^8.23.1",
 
    "eslint-config-prettier": "^8.5.0",
 
    "husky": "^8.0.1",
 
    "jasmine-core": "~4.3.0",
 
    "karma": "~6.4.0",
 
    "karma-chrome-launcher": "~3.1.0",
 
    "karma-coverage": "~2.2.0",
 
    "karma-jasmine": "~5.1.0",
 
    "karma-jasmine-html-reporter": "~2.0.0",
 
    "lint-staged": "^13.0.3",
 
    "prettier": "2.7.1",
 
    "typescript": "~4.7.2"
 
  },
 
  "lint-staged": {
 
    "**/*": "prettier --write --ignore-unknown"
 
  }
 
}

Leave a Comment