This is my Lint config for an angular project step by step.
- Add Prettier and some plugins to avoid problems with tslint
npm install --save-dev tslint-plugin-prettier tslint-config-prettier prettier
- Add .prettierrs.json and .prettierignore files (you have both in this repo)
.prettierrc.json
{
"printWidth": 120,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"semi": true,
"bracketSpacing": true,
"trailingComma": "none",
"arrowParens": "avoid"
}
- In tslint.json
"extends": ["tslint:recommended", "tslint-plugin-prettier", "tslint-config-prettier"],
"rules": {
"prettier": true,
...
}
...
We are installing 2 plugins:
- tslint-plugin-prettier to use TSLint to run Prettier
- tslint-config-prettier to disable rules that conflict with Prettier
- You can read more here
- In Angular 9+ (tslint 6+) I manually delete this rule from tslint.json
// DELETE THIS RULE FROM tslint.json
"semicolon": {
"options": ["always"]
},
-
Now you can
npm run lint
your project -
Adding Husky and pretty-quick to run prettier in your staged files
npm install --save-dev husky
- Create .huckyrc to check if files
{
"hooks": {
"pre-commit": "npm run lint"
}
}