DEV Community

Ariel Mejia
Ariel Mejia

Posted on • Edited on

Run ESLint with Husky

This little guide works to set the last version of husky and use ESLint.

Initialize an NPM project

mkdir app
cd app
Enter fullscreen mode Exit fullscreen mode

Inside the project execute this command:

npm init
Enter fullscreen mode Exit fullscreen mode

Then, just fill the questions or press enter several times to get the node_modules generated.

Initialize Git

In order to use Husky Hooks it requires to set previously Git:

git init
Enter fullscreen mode Exit fullscreen mode

Ignore node_modules directory from git

Generate .gitignore file:

touch .gitignore
Enter fullscreen mode Exit fullscreen mode

Edit the .gitignore file and fill it with this line, to set a reference to exclude node_modules directory:

node_modules
Enter fullscreen mode Exit fullscreen mode

Save and exit

Install Husky

npm i -D husky
Enter fullscreen mode Exit fullscreen mode

Install Lint Staged

npm i -D lint-staged
Enter fullscreen mode Exit fullscreen mode

Set a husky install command

In package.json file add a script to generate husky files (add the "prepare" script line):

add this line into scripts object:

"prepare": "husky install",
Enter fullscreen mode Exit fullscreen mode

The package.json file should look like this:

{
  ...
  "main": "index.js",
  "scripts": {
    "prepare": "husky install",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  ...
}
Enter fullscreen mode Exit fullscreen mode

Then just run the command on terminal:

npm run prepare
Enter fullscreen mode Exit fullscreen mode

Install ESLint

Install ESLint:

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

It would run a prompt with some questions: fill it as makes sense for your project, here an example:

✔ How would you like to use ESLint? · yes
✔ What type of modules does your project use? · commonjs
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · no
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint@latest
✔ Would you like to install them now? · yes
✔ Which package manager do you want to use? · npm
Enter fullscreen mode Exit fullscreen mode

To select multiple options press space-bar.

Create a configuration file to run ESLint with lint-staged:

touch .lintstagedrc
Enter fullscreen mode Exit fullscreen mode

Edit .lintstagedrc to check .js and .ts extension files with this JSON content:

{
  "*.(js|ts)" : ["eslint"]
}
Enter fullscreen mode Exit fullscreen mode

Then save the file and exit.

Set a pre-commit hook running lint-staged

npx husky add .husky/pre-commit "npx lint-staged"
Enter fullscreen mode Exit fullscreen mode

It would generate a new file in ".husky/pre-commit" and fill the file with the npx lint-staged command to be executed on that hook.

Test the installation

Create an index.js file:

touch index.js
Enter fullscreen mode Exit fullscreen mode

Fill the index.js file with this code:

function sum(a, b) {
    return a + b;
}

console.log(sum(1, 2));
Enter fullscreen mode Exit fullscreen mode

Now save and exit.

Create a commit

git add .
git commit -m "add a file"
Enter fullscreen mode Exit fullscreen mode

Then it should run ESLint, check syntax and stop the commit until it fixes the code.

The output should look like this:

Command line showing all files checked

Advance options

  • You can set a common syntax for ESLint by running again:
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

And select the syntax rules desired.

  • To automatically fix spaces, indentation, extra commas, etc you can set the flag --fix in .lintstagedrc file:
{
  "*.(js|ts)": [
    "eslint --fix"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Thanks for reading.

Top comments (0)