In this setup guide you will learn how to use Prettier to take care of your code formatting and ESLint to take care of your code style in an Angular application.
Create an angular application using the angular-cli:
ng new ng-pretty
cd ng-pretty
Install the required dependencies:
# Install ESLint
npm install --save-dev eslint
# Install additional plugins
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier
# Install Prettier and Prettier-ESLint dependencies
npm install --save-dev prettier prettier-eslint eslint-config-prettier
- eslint: The core ESLint linting library
- @typescript-eslint/eslint-plugin: A plugin that contains a bunch of ESLint rules that are TypeScript specific
- prettier: The core prettier library
- eslint-config-prettier: Disables ESLint rules that might conflict with prettier
- eslint-plugin-prettier: Runs prettier as an ESLint rule
Add a configuration file for ESLint, named .eslintrc.json
containing:
{
"parser": "@typescript-eslint/parser", // Specifies the ESLint parser
"extends": [
"plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
"prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
"plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
"parserOptions": {
"ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
"sourceType": "module" // Allows for the use of imports
},
"rules": {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
}
}
- You can add your specific linting rules in the
rules
property.
It's a good idea not to format the dependencies folder, since every time you add a new dependency npm usually does that, for this you should add an .eslintignore
file containing:
package.json
package-lock.json
dist
Modify the lint
script in your package.json
:
"scripts": {
"lint": "tsc --noEmit && eslint . --ext js,ts,json --quiet --fix",
}
This will typecheck your app, and run the linter through all Javascript, JSON and Typescript files. Any ESLint errors that can be automatically fixed will be fixed with this command, but any other errors will be printed out in the command line.
At this point, ESLint will work correctly with TypeScript. You can lint your projectβs JavaScript and TypeScript files by running npm run lint
.
Add a configuration file for Prettier, named .prettierrc.json
containing:
{
"singleQuote": true,
"trailingComma": "none",
"endOfLine": "auto"
}
you can configure prettier any way you like π
Install the following Visual Studio Code extensions:
dbaeumer.vscode-eslint
esbenp.prettier-vscode
Add the following to your .vscode/settings.json
file:
{
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false
},
"[json]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false
}
}
And thatβs it! You should now have complete Visual Studio Code integration. When you violate a linting rule, youβll be visually alerted, and when you save a file, ESLint will attempt to fix any issues using Prettier. This should work for both JavaScript and TypeScript.
You can find the code for this tutorial here: ng-pretty
Top comments (15)
Hi dude, thanks you for pro tips !
But with ng new command it will create
karma.conf.js
andprotractor.conf.js
that are not compatible with somes eslint rules likeno-empty-function
orno-var-require
. I must add them to eslintignore.Except this, everything is fine. :)
I've been looking for a guide like this. Thank you for putting this together.
Only things I changed from your article was
1: the addition of a .prettierignore file to format package.json, package-lock.json or the dist folder.
2: I added "trailingComma": "none" to the .prettierrc.json file.
3: I really don't like how prettier formats HTML files, so I changed up settings.json with this:
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.html-language-features"
},
I'm glad you found it useful :D
How to configure specific rules? If I add "no-empty-function": "off" to .eslintrc.json it won't be recognized. I still get the warning in my code. Where to set it then or why does it not work? Nice tutorial anyway but that's a problem for me. The warning in the code is: Unexpected empty method 'ngOnInit'.eslint@typescript-eslint/no-empty-function
I had the same problem! To resolve, I actually had to add "@typescript-eslint/no-empty-function": "off" to the .eslintrc.json file. The "@typescript-eslint/" was the important missing bit. You probably figured this out ages ago but wanted to add it here in case anyone else has this same problem.
Thank you Jared! Thank you so so much. Love you man.
Hi, there seems to be a problem with your instructions.
It would be nice to get links for all the features assignable in Prettier and in EsLint. Especially the former, as the latter can be googled easier.
Also, I'm not sure how they relate to each other. What if I set the first to allow quotation marks and the other to only accept apostrophes? Kind of confusing at the moment.
It does not work or I have not been able to make it work with the html files.
In my example I added a component called test and it made errors executing the lint.
As I read in the Prettier documentation, the --fix parameter should automatically correct html as well.
drive.google.com/file/d/1GHIMYOMu6...
When I setup these details and tried to run
npm run lint
, I receive below error -No files matching the pattern "*/.{ts}" were found.
I will update the article, just to have time for it, things have changed, new version of eslint and prettier got out :D
Edit: Updated the article π
Hi Andrei, Thanks for your article. But I get the following error:
ESLint couldn't find the config "prettier/@typescript-eslint" to extend from. Please check that the name of the config is correct.
Thanks man!
What is the prettier-eslint package used for? I see you added it to the dev dependencies, but I don't see it being used anywhere.