Install Prettier:
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
{
"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
# Ignore artifacts: .angular/** .idea/** e2e/** node_modules package.json package-lock.json karma.conf.js
Format all files with Prettier manually once:
npx prettier --write .
Add eslint-config-prettier
Prettier husky pre-commit hook
Migrate TSLint to ESLint
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.
ng lint
Configure ESLint for Intellij:
- Intellij => Preferences => Languages & Frameworks => JavaScript => Code Quality Tools => ESLint:
- Automatic ESLint configuration (check)
husky
husky pre-commit hook:
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
#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npm run lint npx lint-staged
Final version of the package.json:
{
"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"
}
}