Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8936

Prettierについて

$
0
0

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"}}

参考


Viewing all articles
Browse latest Browse all 8936

Trending Articles