Prettier をコマンドラインと VSCode で使う設定方法

Prettierについて、上記記事がとてもわかりやすいので、なぜPrettierを使うのか、ESLintと比べてどう違うのか、など知りたい方は読んでいただきたい。

この記事では、以下のことをやってみる。

Prettierをコマンドラインで使えるようにする

# 適当なディレクトリをつくる
mkdir prettier_test
cd prettier_test

# npm初期化
npm init

# ローカルディレクトリにprettierをインストール
npm i -D prettier

test.jsファイルをつくる。

touch test.js

下記を追記

let   hoge  = func (
  parameter1,   parameter2, parameter3,    parameter4,
 parameter6,  parameter7,
       parameter8,
            );

これを整形してもらう。

package.json にスクリプトを追加。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    + "format": "prettier --write '*.js'"
  },

そして以下を実行。

npm run format

test.jsを見ると

let hoge = func(
  parameter1,
  parameter2,
  parameter3,
  parameter4,
  parameter6,
  parameter7,
  parameter8
);

整形してくれている。

連携するには、prettier-eslintとprettier-eslint-cliが必要になる。そのため以下コマンドを叩く。

npm i -D prettier-eslint prettier-eslint-cli eslint-config-google

ここではGoogle JavaScript Style Guideに準拠したチェックをおこなうようにしている。

.eslintrc.json を用意。

touch .eslintrc.json

# 以下を追記
{
  "extends": ["google"],
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

package.json のスクリプトを変更。

- "format": "prettier --write '*.js'"
+ "format": "prettier-eslint --write '*.js'"

そして以下を実行。

npm run format

ESLintのチェックも入った。

const hoge = func(
    parameter1,
    parameter2,
    parameter3,
    parameter4,
    parameter6,
    parameter7,
    parameter8
);

PrettierプラグインをVSCodeにインストールする。

Editor: Format On Saveにチェックをいれる。

f:id:K_Koh:20200407141906j:plain

.eslintrc.jsonのextendsにprettierを追記。

{
  "extends": ["google", "prettier"],
  "parserOptions": {
    "ecmaVersion": 2018
  }
}

これでファイルを保存しただけでコードを整形してくれる。便利ですね〜

参考