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 -Dpackage.jsonに以下を追加
{"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.js":"eslint --fix"}}