How to make Nuxt .js automatically run ESLint at commit time

summary

When developing a front-end in a portfolio, Since it is troublesome to run the Lint tool every time before pushing, I tried to make it work automatically at commit time.

environment

premise

First, let's assume that ESLint, the Lint tool, is configured. For illustrative purposes, I'll just include some examples of package.json.

 "scripts": {
   "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
   "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
 },

way

Step 1 Install the Library

First, install the husky.

yarn add --dev husky

Step 2 Enabling Git hooks

Enable Git hooks with the following command.

yarn husky install

Step 3 Edit package.json

Edit the package.json script as follows:

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
  "prepare": "husky install",  // 追加
},

Step 4 Create a .husky/pre-commit

Create a .husky directory and create pre-commit files within that directory. The command to be executed at commit time is recorded in this created file.

Step 5 Add the command to pre-commit

Execute the following command to add the command to the pre-commit file.

yarn husky add .husky/pre-commit "lintfix"

This time I want to automatically execute ESLint, so I have registered the above command. If there are other commands you want to execute, you can register them as well.

Summary

ESLint is executed automatically in the above procedure. If you want to know more, please refer to the documentation.