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
/ | Version |
---|---|
nuxt | 2.15.8 |
yarn | 1.22.15 |
husky | 7.0.4 |
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.