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" } } |