Setting up Prettier with ESLint, and also checking commit with husky.
You will need to install Eslint, Prettier and Pre-Commit.
The 3 packages does different things, their usefulness are highlighted below:
- ESLint - For Linting, and Enforcing Style Guide.
- Prettier - For Code Formatting.
- Pre-Commit - For Making sure code that's being committed is followed guidelines and is formatted properly.
Installation
The packages can be installed locally in your project or globally:
Setting up ESLint
npm install --save-dev eslint
After installing eslint, you then need to set it up, that is, configure it.
npx eslint --init
Sample of the text that will be inside the eslintrc.json file
{
"extends": ["airbnb", "prettier" "eslint:recommended"],
"plugins": ["prettier"],
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
"prettier/prettier": ["error"] // if you choose to use prettier rules.
},
}
Setting up Prettier
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
Then create .prettierrc file in your project’s root directory.
You can type echo {} .prettierrc in your terminal to create the file
touch {} .prettierrc
This will be where you configure your prettier formatting settings.
Sample of the settings you can configure inside the prettierrc.json file
{
"useTabs": true,
"tabSize": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"parser":"typescript"
}
Setting up Pre-commit and Pre-push
This is a pretty important step. This will ensure that before any developer in your team commits any code, the changes made by him are validated with
EsLint, and the code is properly formatted.
The fastest way to start using lint-staged is to run following command in your terminal:
npx mrm lint-staged
It will install and configure husky and lint-staged depending on code quality tools from package.json dependencies, so please make sure you install (npm install --save-dev) and configure all code quality tools like Prettier, ESlint prior that.
Another alternative to implement this; we will need to configure some packages
- The First package we need is husky which will make adding these hooks very easy.
- We also need a package called lint-staged that will let us check only the pages which are changed. So, only the staged files are checked and the rest of the code remains untouched.
- pretty quick will check for any unformatted files and format them using Prettier.
Installation of the packages
npm install --save-dev husky lint-staged pretty-quick
After installing these packages we need to add configuration for these in our package.json file
"lint-staged": {
"*.js": "eslint --cache --fix"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && pretty-quick --staged"
}
}
As the name suggests, when you're trying to commit the changes, this will run both commands "lint-staged and pretty-quick".
- The lint-staged will run eslint command on javascript files that are staged,
- The pretty-quick will format the JavaScript files if they aren't using Prettier.
If any of the staged files are not properly linted or formatted this will give you a warning and will stop you from committing the
changes in the code.
Top comments (0)