VS Code側でPrettierを使ってWordPressのコーディング規約に沿ってJSとCSSを自動フォーマットする

Prettierがとても便利でもはや手放せないツールとなっています。以前に入門記事も書きました。

prettier入門 – 役割を理解してESLintと併用する環境を作る【Atomとの連携も】

この時はAtomを使ってたのでAtomとの連携方法を書いていますね。今はVS Codeを愛用していてとても良い感じなので、今回はVS CodeでPrettierを使用してWordPressのコーディング規約に沿ってフォーマットする環境を作りたいと思います。

必要なパッケージをインストール

まずは必要なパッケージをインストールしましょう。今回必要なパッケージは以下。

  • eslint
  • eslint-config-wordpress
  • stylelint
  • style-lint-config-wordpress

これらのパッケージを以下のコマンドを実行してインストールします。

1
npm i -D eslint eslint-config-wordpress stylelint style-lint-config-wordpress

ESLintとstylelintの設定ファイルを用意

インストールが終わったら、ESLint、stylelintの設定ファイルを用意します。.eslintsrc.stylelintsrcというファイルを用意し、プロジェクト直下に格納したら、各ファイルに下記の設定を記述します。

.eslintsrc

1
2
3
{
"extends": "wordpress"
}

.stylelintsrc

1
2
3
{
"extends": "stylelint-config-wordpress"
}

VS CodeにPrettierの拡張を追加

続いてVS Codeの拡張プラグインのPrettierをインストールします。
インストールしたらESLintとstylelintをPrettierで動作するようVS Codeの設定から下記の記述をします。

1
2
3
4
5
6
7
8
9
10
{
// prettierとぶつかり合うのでデフォルトの整形は無効にする
  "javascript.format.enable": false,

  // prettierでeslintを使用できるようにする
  "prettier.eslintIntegration": true,

// prettierでstylelintを使用できるようにする
"prettier.stylelintIntegration": true
}

VS CodeにESLintとstylelintの拡張を追加

最後にリアルタイムでlintを動かす為にESLintstylelintそれぞれのVS Codeの拡張を入れます。
ESLintについてはファイルの保存時にフォーマットしてくれるよう設定をします。

1
2
3
{
"eslint.autoFixOnSave": true
}

stylelintの自動フォーマットはないのかなあとGitHubのissueを覗いてたんですが、色々問題があるらしくペンディングになっているみたいです。

Autofix on save · Issue #138 · shinnn/vscode-stylelint

おわり

以上で設定は完了です。