Prettierについて
Prettierの利用方法
package.jsonの生成
npm init -y
Prettier のインストール
npm install prettier@2.1.1 -D
-Dは--save-devの略で、ローカルインストールを意味する。
パスを通す
export PATH=$PATH:./node_modules/.bin
Prettierの実行
prettier ファイル名 --write
ESLintとの併用
- Prettierはあくまでコードフォーマッター
- ESLintのような構文チェック機能はない
- Prettierでコードフォーマット、ESLintで構文チェックすることで、双方の利点を活用する
- eslint --fixだけでコードの整形と構文チェックを可能とする
併用に必要なパッケージのインストール
npm install eslint eslint-config-prettier eslint-plugin-prettier -D
- eslint（ESLint 本体）
- eslint-config-prettier → ESLint のフォーマット関連のルールを全て無効化し、Prettierに任せる）
- eslint-plugin-prettier → PrettierをESLint上で実行可能とする
.eslintrcの設定
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended", // esLintの推奨設定をチェック
"plugin:prettier/recommended" // prettierの推奨設定をチェック
],
"rules": {
// prettierの場合のエラールール設定(.prettierrcに別ファイルとして記載しても良い？)
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "es5"
}
]
}
}
eslintの実行
eslint --fix ファイル名
git commit時にeslint --fixが実行されるようにする
パッケージのインストール
npm install lint-staged husky -D
package.jsonに以下を追加
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": "eslint --fix"
}
}