![管理人](http://itosae.com/wp-content/uploads/2021/08/43D8A608-67A3-48E2-9600-EFFAEB7E218E_1_201_a-150x150.jpeg)
こんにちは、さえと申します👩💻
フロントエンドエンジニアになるために 日々勉強をしています
このブログは その勉強の記録と アウトプットのために運営をしています✨
前回に引き続きformatterについての学習記録です
今回はコミットした際にformatterが走る様な設定を加えていく編
現状のpackage.json
{
"name": "formatter-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"stylelint": "npx stylelint '*.scss'",
"stylelint:fix": "npx stylelint '*.scss' --fix",
"eslint": "npx eslint 'index.js'",
"eslint:fix": "npx eslint 'index.js' --fix",
"prettier": "npx prettier --check .",
"prettier:fix": "npx prettier --write .",
"format": "npm run prettier && npm run eslint && npm run stylelint"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^8.15.0",
"prettier": "2.6.2",
"stylelint": "^14.8.2",
"stylelint-config-recommended": "^7.0.0",
"stylelint-config-recommended-scss": "^6.0.0",
"stylelint-scss": "^4.2.0"
},
"dependencies": {
"eslint-config-prettier": "^8.5.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard-scss": "^3.0.0"
}
}
導入
Prettierのドキュメントにあったhuskyとlint-staged を使用した方法をやってみる
![](https://itosae.com/wp-content/uploads/cocoon-resources/blog-card-cache/85e47e61dbbe85e3eb9ed0bdf60c44b8.png)
① セットアップ
npx mrm@2 lint-staged
これは husky と lint-staged をインストールし、プロジェクトの package.json に設定を追加して、対応するファイルを pre-commit フックで自動的にフォーマットするようにするものです。
https://prettier.io/docs/en/precommit.html#option-1-lint-stagedhttpsgithubcomokonetlint-staged
以下の部分がpackage.json
へ追加された
{
....
"scripts": {
...
"prepare": "husky install"
},
"devDependencies": {
"husky": "^8.0.1",
"lint-staged": "^12.4.1",
....
},
"lint-staged": {
"*.js": "eslint --cache --fix",
"*.css": "stylelint --fix",
"*.stylelint": "prettier --write"
}
}
.husky
がプロジェクトディレクトリに追加された
![](https://itosae.com/wp-content/uploads/2022/05/スクリーンショット-2022-05-21-22.24.19.png)
“prepare”: “husky install”ってなに
package.jsonへ追加された”prepare”: “husky install”は何なのか
"scripts": {
"prepare": "husky install"
}
npm iした後に自動的にGitフックディレクトリとして.husky/
を使用する様するコマンド
② lint-staged内を変更
対象のファイルとnpmスクリプトを指定
"lint-staged": {
"*.js": "npm run eslint:fix",
"*.scss": "npm run stylelint:fix",
"*.{js,scss,html}": "npm run prettier:fix"
}
③ コミットしてみる
eslintでエラーが発生!エラー箇所は.eslintrc.js
ファイルの一行目
![](https://itosae.com/wp-content/uploads/2022/05/スクリーンショット-2022-05-21-22.41.41-1-1024x479.png)
原因
lint-stageで.jsの拡張子がつくファイルに対して右辺が実行されている
本来linterから除外したかった.eslintrc.js
も対象ファイルとみなされlinterが走ってしまった
"lint-staged": {
"*.js": "npm run eslint:fix",
"*.scss": "npm run stylelint:fix",
"*.{js,scss,html}": "npm run prettier:fix"
}
解決方法
ignoreする、またはlint-stagedで実行するファイルをの指定方法を変える
{
ignorePatterns:[".eslintrc.js"],
}
エラー記録
コミットした際にformatterが走らない。The '.husky/pre-commit' hook was ignored because it's not set as executable.
とでた
% git commit -m "fix"
...
hint: The '.husky/pre-commit' hook was ignored because it's not set as executable.
hint: You can disable this warning with `git config advice.ignoredHook false`.
以下のコマンドを実行し、実行権限を許可してあげることで解決
chmod +x .husky/pre-commit
参考記事
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9R2l0JTIwJUUzJTgzJTk1JUUzJTgzJTgzJUUzJTgyJUFGJUUzJTgxJUFFJUU1JTlGJUJBJUU2JTlDJUFDJUU3JTlBJTg0JUUzJTgxJUFBJUU0JUJEJUJGJUUzJTgxJTg0JUU2JTk2JUI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kY2Q3NTcxMjEwNjNhNDQ1NTgyNTczNGI1YjZhMmQ4NA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBub3Jhd29ybGQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWQwM2YyNDQ0ZGUxMzUwMGQxMDQ1Yzg1MjIwMWM2MzA3&blend-x=142&blend-y=486&blend-mode=normal&s=fd86a1c82897e969be5017a36d7ca641)
コメント