Usage of code formatter increases the readability of code and helps to keep the same style in the whole project. In this article, we will go through one of the most popular linter ESLint, which is intended for Javascript and Typescript. Next, we will set code formatter for HTML and other files called Prettier. When we add to them Husky hooks after that, we will be able to ensure the same code style for each member of the team, or contributor to our project.
NB: You can skip 1. section if you have already installed Prettier and ESLint extensions in VS Code.
1. Add extensions to VSCode (Optional)
In first step add extension to your VSCode (Ctrl + Shift + X)
2. Install Prettier and pretty-quick
Install packages using npm:
npm install --save-dev prettier pretty-quick
2.1 configuration of Prettier - Code formatter
Create 2 files in a directory where you have package.json
.prettierignore.json
package.json
package-lock.json
yarn.lock
dist
node_modules
.prettierrc
{
"bracketSpacing": true,
"semi": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 80,
"tabWidth": 2
}
The Directory should look as follow:
If you were asking why is needed pretty-quick, now it's time to use it. With pretty-quick you can run formatter on all files (or only staged etc.) using one command.
npx pretty-quick
We will integrate this tool later together with husky hooks.
NB: If you are using Windows Powershell and have problem run npx command, you have to change execution policy
set-executionpolicy remotesigned
3. Install ESLint
For local install of package use:
npm install eslint
For global install
npm install -g eslint
For generating configuration file for ESLint .eslintrc.json you can choose from two options:
3.1. Use VSCode command pallete
Open command pallete in VSCode (Ctrl + Shift + P).
and run ESLint: Create ESLInt configuration. It will directly open a terminal and start a process of configuration.
3.2. Use npm
If you have installed ESLint package globally to generate file use
npm eslint --init
If you have installed your ESLint package locally then you should use slightly different command for (Windows):
.\node_modules\.bin\eslint --init
and for Linux and Mac:
./node_modules/.bin/eslint --init
Both approaches come to the same configuration process where you have to answer some questions about linter settings.
After answering all questions, the configuration file is generated and all required packages are installed.
Example of .eslintrc.json if you have the same answers as on previous picture should look similar as follow:
{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
{
"files": ["*.ts"],
"parserOptions": {
"project": ["tsconfig.json"],
"createDefaultProgram": true
},
"extends": [
"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"],
"rules": {}
}
]
}
5. Husky
Git has a way how to trigger custom scripts when some action occurs i.e commit or push. You can use it to lint your commit messages, run tests, lint code, etc. when you commit or push. Husky supports all Git hooks.
npm install --save-dev husky
5.1 Add husky hooks to package.json
"husky": {
"hooks": {
"pre-commit": "npx pretty-quick --staged ng lint ng test",
"pre-push": "ng build --aot true"
}
5.2 Add prepare script to package.json
"prepare": "cd .. && husky install client/.husky"
NB: You have to install husky from root directory where git repository is initialized, that's why I have to change directory before.
5.3 run prepare script
npm run prepare
5.4 create hook for pre-commit
npx husky add ./client/.husky/pre-commit "npx pretty-quick --staged ng lint ng test"
It will be launched each time after we fire git commit.
5.5 Result
If you like this article, feel free to comment, or share it.
If you want to support me with coffee you can do it here:
I would be grateful ;)
Follow me on Twitter
Visit website smetankajakub.com
Resources
https://typicode.github.io/husky/#/
https://docs.microsoft.com/sk-sk/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.1
https://prettier.io/
https://eslint.org/
Top comments (11)
Good guide with husky and everything. Alternatively, I also authored the Poetic NPM package that automatically configures eslint, prettier and the airbnb guide for TS, JS and React by running a single command: “npx poetic”.
Too bad it's tied to a specific JS framework.
It’s not. It’s fully customizable and extensible. Anyhow, new PRs are welcome for additional setups 😀
sounds good, for me would be interesting setup for Angular
Cheers mate!
Definitely taking a look. thanks
Hi @smetankajakub 👋
Just a little error on
.prettierignore.json
=> it's just.prettierignore
(not precise the extension)Otherwise all sound good 👍 🙌
Thanks Jimmy, you are right!
Short version
mrm prettier eslint lint-staged
Husky is such a useful extension great guide btw.
Thanks, Andrew
Alternative title: How to make your commits take 30 seconds instead of 100ms ;-)