How To Setup ESLint and Prettier in Angular 16
Did you ever spend time discussing how your code should be displayed during code review? Where to enter a new line, what is the ideal indentation? Do you ever want to preserve these settings between different code editors? Do you ever wanted your code to be statically verified almost instantly (on file save :-))?
If yes, then you want to use:
- ESLint — a tool to report patterns within JavaScript (ECMAScript standard in general) in order to identify potential problems and make code more consistent across entire applications. Almost every code editor has it already plugged in or offers a plugin extension.
- Prettier — opinionated code formatter (removes your initially written code styling and applies consistent style, across all your project files), which supports many programming languages (not only JS/TS). Almost every code editor has it already plugged in or offers plugin extension.
Both tools are entirely configurable, which means you can alter / adjust rules to your project / team! You can also use some predefined settings and update them as you go!
Once you set these up, you’ll never have to discuss it again!
There are a couple of ways to add eslint and prettier to our project. Let’s just focus on the automated one. We will start with eslint first.
Just execute schematics command below within terminal window using Angular CLI and your initial setup will be done:
ng add @angular-eslint/schematicsLet’s now take a deeper look into what was actually changed within our application files. Within angular.json file at the very end, schematic collection has been added:
{
// ...some other properties
"cli": {
"schematicCollections": [
"@angular-eslint/schematics"
]
}
}There are now new dev-dependencies and script to execute eslint validation within our package.json file like so:
{
"scripts": {
// ...some other scripts
"lint": "ng lint", // added automatically
"lint:fix": "ng lint --fix" // make sure to add manually this one to fix files on the fly
}
"devDependencies": {
...
"@angular-eslint/builder": "16.0.3",
"@angular-eslint/eslint-plugin": "16.0.3",
"@angular-eslint/eslint-plugin-template": "16.0.3",
"@angular-eslint/schematics": "16.0.3",
"@angular-eslint/template-parser": "16.0.3",
"@typescript-eslint/eslint-plugin": "5.59.7",
"@typescript-eslint/parser": "5.59.7",
"eslint": "^8.40.0",
...
}
}There’s also a new file added to our repository .eslintrc.json, which contains the initial configuration as presented below:
{
"root": true,
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
}
},
{
"files": [
"*.html"
],
"extends": [
"plugin:@angular-eslint/template/recommended",
"plugin:@angular-eslint/template/accessibility"
],
"rules": {}
}
]
}All of these files were generated with one single command only. If you prefer to do it manually, just copy and paste the files above and install your dependencies. You’ll get the same experience.
Now let’s move on and configure our prettier settings. Unfortunately, prettier does not leverage Angular CLI schematics yet. Therefore, we need to install it manually, by executing the command below within your terminal:
npm install prettier --save-devNow, we need to create a couple of files within our project main folder:
.prettierrc.json - // will contain formatter's configuration
.prettierignore - // list of files / folders excluded from code formattingExample (and most popular) prettier configuration to use:
{
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"semi": true,
"bracketSpacing": true,
"arrowParens": "avoid",
"trailingComma": "es5",
"bracketSameLine": true,
"printWidth": 80,
"endOfLine": "auto"
}In case of .prettierignore file, it should contain the below( similar to your .gitignore):
# See http://help.github.com/ignore-files/ for more about ignoring files.
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.dbWe’re almost done! There’s just one more thing left to configure. As we have two different tools running on a same codebase, we need to make sure that there’s no overlapping rules, which will break the entire idea of nice working ecosystem.
npm install prettier-eslint eslint-config-prettier eslint-plugin-prettier --save-devOne more thing and we’re ready to go! Let’s alter our .eslintrc.json configuration in order to enable the prettier — eslint plugins:
{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
{
"files": ["*.ts"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:prettier/recommended"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
]
}
},
{
"files": ["*.html"],
"excludedFiles": ["*inline-template-*.component.html"],
"extends": [
"plugin:@angular-eslint/template/recommended",
"plugin:@angular-eslint/template/accessibility",
"plugin:prettier/recommended"
],
"rules": {
"prettier/prettier": [
"error",
{
"parser": "angular"
}
]
}
}
]
}I suggest to add additional script into you package.json file so you can trigger prettier formatting via command line either locally or within the pre-commit hooks with husky!
{
// ...
"scripts": {
// ...
"prettier": "npx prettier --write ."
}
}And just not to forget! If you want to set up your WebStorm settings, to enable your eslint/prettier configuration to support you on every file save, just go to the:
settings > languages & frameworks > javascript > code quality tools > eslintand make sure your IDE configuration looks like the one from the screenshot below:
Then let us find prettier IDE settings:
settings > languages & frameworks > javascript > prettierIn WebStorm prettier is being included by default. so if you’re using other IDE from JetBrains (IntelliJ IDEA, PyCharm etc.) you might need to install the plugin first!
And replicate the screenshot below:
Voila! We made it! Now we can start coding!
As I’ve mentioned at the beginning of the article, eslint/prettier plugins are also available for various code editors like: Atom, Emacs, Sublime, Vim, VS Code and Visual Studio.
Build Angular Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
