I created a new Vue3 app using the Vue CLI and selected Prettier for my linter config. I want to use commitlint, husky and lint-staged to validate commit messages and lint the code before pushing it.
What I did
Based on https://commitlint.js.org/#/guides-local-setup I setup commitlint with husky
npm install --save-dev @commitlint/{cli,config-conventional}
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js
npm install husky --save-dev
npx husky install
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
Based on https://github.com/okonet/lint-staged#installation-and-setup I setup lint-staged
npx mrm@2 lint-staged
and inside the package.json I replace
"lint-staged": {
"*.js": "eslint --cache --fix"
}
with
"lint-staged": {
"*": "npm run lint"
}
The problem
When modifying the README.md file in the project to
# my-repo
---
new commit
and try to commit that I get the following error message
> git -c user.useConfigOnly=true commit --quiet --allow-empty-message --file -
[STARTED] Preparing...
[SUCCESS] Preparing...
[STARTED] Running tasks...
[STARTED] Running tasks for *
[STARTED] npm run lint
[FAILED] npm run lint [FAILED]
[SUCCESS] Running tasks...
[STARTED] Applying modifications...
[SKIPPED] Skipped because of errors from tasks.
[STARTED] Reverting to original state because of errors...
[SUCCESS] Reverting to original state because of errors...
[STARTED] Cleaning up...
[SUCCESS] Cleaning up...
✖ npm run lint:
> my-repo@0.1.0 lint
> vue-cli-service lint "/home/.../my-repo/README.md"
error: Parsing error: Invalid character at README.md:1:1:
> 1 | # my-repo
| ^
2 |
3 | ---
4 |
1 error found.
npm ERR! code 1
npm ERR! path /home/my-repo
npm ERR! command failed
npm ERR! command sh -c lint-staged
npm ERR! A complete log of this run can be found in:
npm ERR! /home/.../.npm/_logs/2021-12-27T10_07_27_498Z-debug.log
husky - pre-commit hook exited with code 1 (error)
What it should do
Only fix the files that have been modified. The linter knows about files it is able to fix (js, ts, vue, html, ...).
When having a modified markdown file I get no errors when opening the terminal and run npm run lint. But I do get errors when using lint-staged with this setup "*": "npm run lint"
What is the correct setup for lint-staged to lint "lintable" files only?
you should make additional settings for file extensions:
"lint-staged": {
"*.{js,vue}": [
"prettier src --write",
"eslint --ext .js,.vue --ignore-path .gitignore --fix src"
],
"*.{md,scss}": [
"prettier src --write"
]
}