ブログ向けWordPressテーマ「SWELL」をリリースしました!

VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法

これまでコーディング規約とは無縁のぐちゃぐちゃコードを書いて過ごしてきましたが、「いい加減ちゃんとするか...」と思い、コードフォーマッターであるPrettier(プリティア)を導入しようと決意。

Prettierの導入はある程度スムーズにいったのですが、ついでによく聞くESLintとかStylelintとかも導入しようとすると地獄を見ました...。

丸一日潰してしまったので備忘録として手順をメモしておきます。

今回やること
  1. VS CodeにPrettierを導入し、ファイル保存時に自動整形されるようにする
  2. VS CodeでPrettierとESLintを連携させる
  3. VS CodeでPrettierとStylelintを連携させる
目次

Prettier・ESLint・StylelintをVS Codeに導入するのにつまづいた点

まず最初に、自分が何につまづいて、結局それがどういう解釈で落ち着いたかを述べておきます。
本当に名前を聞いたことくらいしかないレベルで導入に踏み切ったので、わけのわからないことだらけでした...。笑

  1. Prettierとかはnpmやyarnコマンドでインストールするの?それともエディターの拡張機能(プラグイン)を使えばいいの?
  2. PrettierとESLint/Stylelintの関係性がそもそもよく分かっていない。

上記2点が、とても困惑してしまった原因だったかと思います。

① npmでインストールするのか、エディターの拡張機能としてインストールするのか

まず最初の大きな疑問でした。

導入記事をいくつか見たんですが、npm installしていたりエディタ側でプラグインをインストールしていたり...。

了

これは...どっちでやればいいんだ!どっちもやらなきゃいかんのか?

という初期段階で足踏みしてしまいました。

最終的にどうだったのかというと、今回の私の方法では、

  • Prettier は VS Code の拡張機能のみインストール
  • ESLint と Stylelint は拡張機能 + npm でのインストール

となりました。
ESLint と Stylelintの拡張機能はあくまで、ローカルにインストールした各Lintをエディター上で使えるようにするだけっぽい。

② そもそもPrettier・ESLint・Stylelint とは?

Prettier とはコードフォーマッターと呼ばれるコードを自動整形してくれるツールの一種。
JSやCSSなど、複数の言語に対して使えるようです。

あくまで設定したルールに基づいてフォーマットしてくれるだけのもので、構文のチェックまでは行わない。

そして、その構文チェックを行えるのが、ESLintStylelint
設定しているルールに違反したコードを検知して警告してくれるツールです。

ESLint や Stylelintはさらに構文チェックだけでなく、そのエラーを解決するようにコードを整形してくれる機能も含まれています。

ESLintとPrettierをなぜ連携(併用)するのか

上記の説明をきくと、

了

じゃぁPrettierいらなくない?

って思ったんですが、どうやら、PrettierはESLintよりも手軽で確実なコード整形ができるそうなのです。

参考:Prettier 入門 ~ESLintとの違いを理解して併用する~

そのため、みんなESLintを補完するような形でPrettierを併用しているっぽい。

StylelintとPrettierをなぜ連携(併用)するのか

ESLintについては「不完全な整形機能をPrettierで補完する」という意図がありました。

Stylelintもそうなのかなと思っていたのですが、実際に使ってみるとその整形機能は十分なものだと感じています。
むしろPrettierは細かいルールの指定ができないので邪魔になってしまうことがあったり...。

了

Stylelintだけでよいのでは...

とは思いつつも、今回は結局 StylelintもPrettierと連携させることにしました。

なぜかというと、そうしないとファイル保存時にフォーマットさせることができなかったからです。
詳しくは後述しますが、VS Codeに存在している Stylelint用の拡張機能だけではファイル保存時にFixコマンドを実行できなかったんです...。

Prettierのフォーマット処理はファイル保存時に走らせることができるので、そこに紐づけるためだけにPrettierと連携させました。笑

※ ただし、Gulpなどを使えば Stylelint によるコード整形だけをファイル保存時に走らせることは可能です。

というわけで、この記事ではESLintとStylelintの両方をPrettierと連携させていくことにします!

PrettierをVS Codeに導入する

では実際に、VS CodeにPrettierなどを導入していく手順を説明していきます。

Prettier用のプラグイン(拡張機能)をインストールする

すでにちらっと述べた通り、PrettierにつてはVS CodeのプラグインをインストールするだけでOK。
Prettier - Code formatter」というプラグインを使います。

Prettier - Code formatterのサイト
Prettier - Code formatter

このプラグインをインストールしたら、VS Codeの「設定」を開き、「Format On Save」という項目にチェックを入れておきましょう。

Format On Saveの設定にチェックを入れた様子
Format On Saveの設定にチェックを入れた様子

これによって、ファイル保存時に自動でPrettierによってコードが整形されるようになります!

了

ちなみに、「設定」を開くショートカットキーはcommand + Shift + ,です

ファイル保存時にデフォルトのフォーマッターをPrettierにするかVS Code既存のもにするかを聞かれる場合もあるので、その時はPrettierを選択してください。

Prettierの設定ファイルを作成する

Prettierが導入できたら、プロジェクトフォルダの直下にPrettierの設定ファイルを作成します。

JSONやJSなど、いくつかの形式で作成することができるようですが、ここではJS形式で設定ファイルを作成するとして説明していきます。(JSだとコメントつけれるので...。)

.prettierrc.jsというファイルを作成し、以下のようにルールを設定しておきましょう。

module.exports = {
  tabWidth: 4, //インデントのスペース数
  singleQuote: true, //シングルクォートに統一
  trailingComma: 'es5', //末尾のカンマをどうするか: es5に準拠させる。
};

ここでの設定項目はあくまで一例ですので好きな設定を書いてみましょう。(記事の最後に、私が実際に使っている設定も記載しておきます)

どんな設定項目があるかは、Prettier公式ページのOptionsページをご覧ください。

自分の指定通りに自動整形されれば、Prettierの導入は成功です!

また、うまくPrettierが動作している時はVS Codeの右下に「Prettier : 」とかかれたステータスが「(チェックマーク)」になっています!

vscode右下のprettierステータスの確認場所
vscode右下のPrettierステータス
了

Prettierだけ導入できればいい!という人は、ここまでの作業でOKです^^

ESLintをVS Codeに導入し、Prettierと連携する

次に、ESLintを導入し、Prettierと連携させていきましょう。

VS CodeにESLintを導入する

まずは「ESLint」というVS Codeのプラグインをインストールします。

ESLintプラグイン
ESLintプラグイン

このプラグインを入れると、VS Codeの「設定」にて ESLint に関する設定がいくつか使えるようになっているので、「eslint」で検索してみてください。

VS CodeのESLintに関する設定画面
ESLintに関する設定画面

上記画像のように、ESlint: Auto Fix On Save」と「ESLint: Enable」いう項目にチェックを入れておきましょう。

VS Code側のプラグインに関する設定はここまででOKですが、ESLint本体となるパッケージをPCにインストールする必要があります。

npmコマンドもしくはyarnコマンドを使ってグローバルまたはローカルにインストールしましょう。

自分はローカル(作業フォルダごとのnode_modules)にインストールしました。

$ npm i -D eslint

パッケージがインストールできれば、ESLintの導入は完了です。

ESLintの設定ファイルを作成する

ESLintは設定ファイルがないと動かないので、とりあえず適当に作成しておきましょう。

Prettierの設定ファイルと同様、JSONやJSなど 複数の形式でサポートされています。
今回は JS形式の.eslintrc.jsを作成します。

例:クォートをダブルクォーテーションに揃えるだけの設定を書いてみる

module.exports = {
    rules: {
        quotes: ['error', 'double'],
    },
};

設定ファイルを設置したら試しにjsファイルを作成し、上記のルールに反したコードを書いてみましょう。

ESLintのエラーメッセージ
ESLintのエラーメッセージ

上記画像のように、eslint(違反しているルール名)というエラーメッセージが出てくればOKです。(保存しなくてもエラーがでてきます)

PrettierとESLintで相反する設定を書くと...

すでに気づいている方もいるかと思いますが、先ほどPrettierの設定例として「シングルクォーテーションで統一する」という記述を書いたのに、ESLintで新たに設定した「ダブルクォーテーションで統一する」というルールは矛盾してしまっていますよね。

この場合、保存する度にお互いのルールでフォーマットし直すことになってしまいます。

PrettierとESLintの矛盾ルールによってフォーマットされ続ける様子
フォーマットされ続ける様子

実際は、Prettier側で指定したルールとESLintで指定するルールが矛盾しないように注意しましょう。

ESLintとPrettierを連携させる

ESLint自体の導入ができたら、Prettierと連携させていきます。

まずはESLintとPrettierを連携させるために必要なパッケージを追加でインストールします。

$ npm i -D eslint-plugin-prettier eslint-config-prettier

各パッケージの説明を簡単にしておくと、

  • eslint-plugin-prettier→ ESLint上でPrettierを動かすためのプラグイン。
  • eslint-config-prettier→ ESLintとPrettierで競合するルールを無効にするための構成ファイル。

詳しくは、Prettier公式ドキュメントでのESLintとの統合に関する説明をご覧ください。

追加パッケージがインストールできたら、.eslintrc.jsを以下のようにします。

module.exports = {
  extends: ['plugin:prettier/recommended'],
}

これでとりあえず、Prettierとの連携は完了です。

連携に必要な記述は、extends: ['plugin:prettier/recommended'],の部分です。
他の設定もextendsする場合は、'plugin:prettier/recommended'が最後にくるように注意してください。

eslint-config-prettierに関する注意

eslint-config-prettierの説明で、「Prettierと競合するルールを無効にする」とありますが、Prettier側とESLint側で設定が矛盾しないようにしなければいけないのは変わらないようです。

クォートをどちらに統一するかの設定で矛盾が起こるとエラーが置き続ける例を先ほど見せましたが、eslint-config-prettierを使っていても同じようなことになります。

そういった意味での「矛盾する設定」を無視してくれるというわけではないみたい...。

PrettierとESLintと連携する別の方法

実は、PrettierとESLintを連携させるには2種類の方法があり、ざっくりした説明をすると、

  1. ESLintからPrettierを実行する
  2. PrettierしてからESLintに渡す

という2パターンに分けられるようです。

今回紹介したのは前者の「ESLintからPrettierを実行する」という連携方法です。

いくつかの記事を漁ってきた方は、今回インストールしたeslint-plugin-prettierとは別の、prettier-eslintというパッケージを紹介している解説記事も見かけたのではないでしょうか。

了

大手でいうとics.mediaさんの記事がこの後者のパターンでした。

この違いによって混乱してしまったのですが、以下の記事が参考になりました。

PrettierとLinterを併用する - Note: ESLintと併用する場合

こちらの記事によると、

PrettierとESLintと併用する場合、2つの方法がある。

(中略)

ESLintがPrettierを実行するか、PrettierがESLintに渡すか。
ほとんど変わらないが、後者だと--fixなしでチェックだけしたいってのができない。あと、prettier-eslint の作者はもう使ってないとのことなので、現実的にはeslint-plugin-prettier一択。

とのこと。
これを踏まえて、私もeslint-plugin-prettierを使うパターンで連携させてみました!

ESLintの実際の設定例

さて、紹介した内容だとPrettierと連携させただけなので、もう少し実践的な設定例を紹介しておきます。

ESLintの推奨設定をベースにする

extendsに'eslint:recommended'を指定してあげると、ESLintが用意してくれているおすすめの設定を一括で指定することができます。

module.exports = {
    extends: ['eslint:recommended', 'plugin:prettier/recommended'], // ESLintの推奨設定をベースにする
};

ただし、これだけだとES6から使えるようになったconstなどのキーワードに対して、「なんじゃこれ!」とエラーがでたりします。

constにエラーが出る様子
constにエラーが出る様子

これを回避するには、envという項目を使って環境設定を行います。

module.exports = {
  env: {
        browser: true, // document や console にエラーが出ないようにする
        es6: true, // es6から使える let や const にエラーがでないようにする
    },
    extends: ['eslint:recommended', 'plugin:prettier/recommended'],
};

他にも、jQueryを扱うのであればenvjquery: trueを指定してあげる必要があったりします。

GoogleのJavaScriptコーディング規約をベースにする場合

Google JavaScript Style Guide」のルールに則った設定をすることも可能です。

追加でeslint-config-googleというパッケージをインストールします。

npm i -D eslint-config-google

これによってGoogleのコーディング規約に則った設定ファイルを取得できるので、それをextendsに指定してあげます。

module.exports = {
    env: {
        es6: true,
        // browser は不要になる
    },
    extends: ['google', 'plugin:prettier/recommended'], // Google様に従う
};

このようにすると、Google様に従わないクソコードに対してエラーを吐き出してくれるようになります。

例えば以下の画像では、関数を定義しているのにJSDocコメントがないことに対してお怒りの様子です。

Missing JSDoc commentエラー
Missing JSDoc commentエラー

エラーメッセージを読むとなんで怒られているか教えてくれています。
また、どの設定項目に違反しているかも教えてくれてます (require-jsdocの部分。)

基本はGoogle様に従いたいけどJSDocはどうしても書きたくない!個人開発だから特別に許して!

という場合は、require-jsdocのルールをオフにしましょう。

module.exports = {
    env: {
        es6: true,
    },
    extends: ['google', 'plugin:prettier/recommended'], // 基本はGoogle様に従う
    rules: {
        'require-jsdoc': 'off', //Docコメントがなくても怒られないようにする
    },
};

WordPress開発現場での設定例

私が実際に設定している内容をご紹介しておくだけです。

WordPressのコーディング規約をベースにしたいのと、ブロックエディターの開発もしているので React やら Babel とかの設定も必要なので、追加でいくつかのパッケージをインストールします。

追加インストール

npm i -D eslint-config-wordpress eslint-plugin-react babel-eslint 

ESLintの設定

module.exports = {

    extends: ['wordpress', 'plugin:prettier/recommended'], // WordPressのコーディング規約をベースにする
    plugins: ['react'], // React関係のルールを指定するのに必要
    parser: 'babel-eslint', // JSXとかでエラー出るのを回避。env の es6:true もこれにより不要になる
    parserOptions: {
        sourceType: 'module', // import などを使うときに必要
        ecmaFeatures: {
            experimentalObjectRestSpread: true, // 非推奨項目も注意してくれる?(あんまよくわかってない)
            jsx: true,  //JSX を使うときに必要( reactプラグインいれてるからいらないかも...? )
        },
    },
    rules: {
        'no-var': 'error', //varを許可しない
        'no-console': 'off', // console.logがあってもエラーにしない
        'require-jsdoc': 'off', // Docコメントなくてもエラーにしない
        'valid-jsdoc': 'off', // Docコメントの書き方についてとやかくいわせない
        camelcase: ['warn', { properties: 'never' }], // オブジェクトのキーはキャメルじゃなくてよい
        'react/jsx-uses-vars': 1, // これを使うとJSXで使ってる変数がno-useとして認識されるのを防げた
    },
};

自分は今のところ、こんな感じです。(まだ導入したばかりなので後々変えていく可能性大)

rules:は基本的に各自好きなように設定していただくと良いのではないかなと思います!

StylelintをVS Codeに導入し、Prettierと連携する

さて、残りは Stylelint ですね。
VS Codeに導入してから、Prettierと連携させていきましょう。

VS CodeにStylelintを導入する

まずは「stylelint」というVS Codeのプラグインをインストールします。

Stylelintプラグイン
Stylelintプラグイン

このプラグインを入れると、VS Codeの「設定」にて Stylelint に関する設定がいくつか使えるようになっているので、「stylelint」で検索してみてください。

stylelintに関する設定項目
stylelintに関する設定項目

上記の画像のように、Stylelint: Enable」にチェックを入れておきましょう。

ESLintと同様にプラグインのインストールだけでは不十分なので、Stylelint本体のインストールも行います。

$ npm i -D stylelint

Stylelintの設定ファイルを作成する

Stylelintにも設定ファイルが必要なので、とりあえず適当に作成しておきましょう。

JSONやJSなど 複数の形式でサポートされていますが、今回は JS形式の.stylelintrc.jsを作成します。

例:クォートをダブルクォーテーションに揃えるだけの設定を書いてみる

module.exports = {
  rules: {
    'string-quotes': 'double', // ダブルクォーテーションに揃える
  }
};

設定ファイルを設置したら、試しにcssファイルを作成して上記のルールに反したコードを書いてみましょう。

stylelintのエラーメッセージ
stylelintのエラーメッセージ

このように、stylelint(違反しているルール名)というようなエラーメッセージが出てくればOKです。

この時点では、ファイルを保存しても自動Fixはされません。

ESLint にはあった「Auto Fix On Save」ような設定項目がstylelintプラグインにはないんですよね。

このため、ESLintの時とは少し違うPrettierとの連携方法をとることになります。

StylelintとPrettierを連携させる

ESLintとPrettierとの連携方法には2パターンあると説明しましたが、Stylelintにも同じように2パターンの連携方法があるっぽいんですよね。

おそらく、ざっくり言うとESLintと同様に

  1. stylelint-prettierを使ってStylelintからPrettierを呼び出す
  2. prettier-stylelintを使ってPrettierからStylelintを呼び出す

という2パターンがあります。

ESLintと同じようにしたいので前者のstylelint-prettierを使いたいなとは思ったのですが、ここで一つ問題が。

先ほども述べたとおり、ファイルを保存してもStylelintの自動Fixが動かないという問題です。

Gulpなどを使えばそれも可能なんですが、できればあまり複雑なことはしたくない...。

ということで今回は泣く泣く後者のprettier-stylelintを使うことにしました。

prettier-stylelintをインストールします。

$ npm i -D prettier-stylelint

次に、Stylelintの設定ファイルでprettier-stylelintのconfigファイルを読み込みます。

module.exports = {
    extends: ['./node_modules/prettier-stylelint/config.js'],
};

Stylelint側の設定はこれでOK。

ただ、最後にまだVS Codesの設定ファイルを少しいじる必要があります。

command + shift + pコマンドパレットを開き「setting json」と検索すると『基本設定: 設定(JSON)を開く』というのが出てきますので、こちらを選択します。

JSONでの設定を開く
JSONでの設定を開く

JSON形式の設定ファイルが開けたら、その中に以下を追記します。

"prettier.stylelintIntegration": true,

追記できたら、ファイル保存しておきましょう。

これにて、ファイル保存時のPrettierのフォーマット処理と連動してStylelintのFixコマンドが走るようになります!

もし動かない場合は再起動してみてください。

注意点!

実はこれまた問題がありまして、prettier.stylelintIntegrationという設定項目は現在 非推奨とされています。

追加した設定の警告メッセージ
追加した設定の警告メッセージ

今はまだこの方法でPrettierと連動させることができるんですが、そのうち利用できなくなる可能性があります。(そうなるとGulpとかでなんとかするしかなさそう...。)

Strylelintの実際の設定例

ESLintと同じく、ベースとなる設定ファイルを extends してから詳細な設定を追加していきます。

最もスタンダードな設定を使う

特にこだわりがなければ、「stylelint-config-standard」を使えば良さそうです。(Googleのコーディング規約も含まれているっぽい。)

パッケージのインストール

$ npm i -D stylelint-config-standard

Stylelintの設定は以下のように。

module.exports = {
  extends: [
    'stylelint-config-standard',
    './node_modules/prettier-stylelint/config.js',
  ],
  rules: {
    //追加ルールあれば
  }
};

SCSSに対応させる

通常のStylelintだけではSCSSに対応していないので、@includeなどにエラーが出てしまいます。
SCSSを使う現場では追加で設定してあげましょう。

SCSS用の設定を追加できるstylelint-scssというパッケージをインストール

$ npm i -D stylelint-scss

stylelintの設定

module.exports = {
  plugins: ['stylelint-scss'], // stylelint-scss を使う
  extends: [
    'stylelint-config-standard',
    './node_modules/prettier-stylelint/config.js',
  ],
  rules: {
    'at-rule-no-unknown': null, //scssで使える @include などにエラーがでないようにする
    'scss/at-rule-no-unknown': true, //scssでもサポートしていない @ルール にはエラーを出す
  }
};

プロパティの並び順を自動で整える

プロパティの並び順(宣言順)を自動で整えてもらうようにしておくと、超便利です。

プロパティの並び順を整えるにはstylelint-orderというパッケージが必要になります。

$ npm i -D stylelint-order

Google推奨の「プロパティをABC順に並べる」ルールでよければ、設定も簡単です。

例:ABC順に並べる場合

module.exports = {
  plugins: ['stylelint-scss', 'stylelint-order'], //stylelint-orderを使う
  extends: [
    'stylelint-config-standard',
    './node_modules/prettier-stylelint/config.js',
  ],
  rules: {
    'order/properties-alphabetical-order': true, //ABC順に並べる
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
  }
};

order/properties-alphabetical-ordertrueにするだけでABC順に並びます。

ただ、プロティごとに並べたいなぁ〜という場合は別のアプローチが必要です。

すでにインストールしたstylelint-orderだけでもプロパティの並び順を指定できますが、一から全部自分で指定するのは厳しいので別モジュールをインストールするのがおすすめです。

今回は、「stylelint-config-rational-order」というモジュールをextendsして使うことにしました。
(他にも色々ある)

参考:stylelintのorderモジュール選定

stylelint-config-rational-orderを追加インストール

$ npm i -D stylelint-config-rational-order

あとは、extendsに指定するだけでOK。

module.exports = {
  plugins: ['stylelint-scss'],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-rational-order', // ← 追加
    './node_modules/prettier-stylelint/config.js',
  ],
  rules: {
    'at-rule-no-unknown': null,
    'scss/at-rule-no-unknown': true,
  }
}

こういったモジュールを使う場合はrules:order/~を指定しなくてもOK。

個人的な設定例

最後に、私が実際に使用している設定を紹介して終わりにしようと思います。

module.exports = {
    plugins: ['stylelint-scss'],
    extends: [
        'stylelint-config-wordpress',
        'stylelint-config-rational-order',
        './node_modules/prettier-stylelint/config.js',
    ],
    rules: {
        'max-line-length': null, //max文字数を無視
        'function-url-quotes': 'never', //不必要なクォーテーションを禁止( これだけ自動Fixできない )
        'no-descending-specificity': null, //セレクタの詳細度に関する警告を出さない
        'number-leading-zero': 'never', //0.5emなどは.5emに
        'font-weight-notation': null, //font-weightの指定は自由
        'font-family-no-missing-generic-family-keyword': null, //sans-serif / serifを必須にするか。object-fitでエラーださないようにする。
        'at-rule-no-unknown': null, //scssで使える @include などにエラーがでないように
        'scss/at-rule-no-unknown': true, //scssでもサポートしていない @ルールにはエラーを出す
    },
};

私はWordPressばかり触っているので、stylelint-config-standard ではなく stylelint-config-wordpress を使っています。(これも別途インストールしています。)

おわりに:Prettier & ESLint & Stylelintを実際に使ってみて...

初めて導入してから、一週間ほど経過します。

たしかに便利だなぁ〜とは感じるんですが、そこまで時間をかけてまでPrettierとLint系を連携させるべきかどうかは微妙なところだなと...。

Prettierだけにして簡易的なフォーマットだけにするか、Lint系だけで妥協してもいいんじゃないかなと個人的には思っています。

個人的には Stylelint の order 設定が一番便利に感じています。マジ神。

次はPHPの自動フォーマットをなんとか導入していきたいなと思ってます。

あと、たまに設定をいじり直したりしてもルールが適用されない時がありまして、
そんなときはVS Codeを再起動するといいかもです。

この記事が気に入ったら
フォローしてね!

目次
目次