Google JS StyleとPrettierを併用してvueコードを整形する設定 #Vue.js

背景

vue-cliでテンプレートを作成する際にGoogle JavaScript Styleが選択肢にないということで、なんでやと思ったので入れてみた。

また、ちょっと調べたらPrettierっていうコードをフォーマットしてくれるソリューションがいい感じと聞いたので、こいつも併用してみる。
あとVSCodeもうちょい設定ごにょごにょしたい...
的なことを格闘したメモとなります。

目的

Google JS Styleで文法チェックを行い、スタイルの整形をPrettierで行えるようにする
- js、vueファイルどちらも
Visual Studio CodeでCommand+Sで保存する際にコードを整形するようにする

ESLintインストール

とりあえず何もない状態から説明はスタートってことで、必要に応じて飛ばしちゃっていいと思います。

vue-cliが入ってない場合はグローバルにインストールします。

$ npm install -g @vue/cli

vueのプロジェクトを作成します。
ここの設定次第で以下に続く工程の一部箇所を飛ばせますが、賢そうな方は入れちゃって下さい。
なお、デフォルトな設定でもいいです。

$ vue create practice
$ cd practice

ESLintとGoogle JS Styleとvueファイル用のプラグインをインストールします。
デフォルト設定ですらESLintは入りますが、コピペ用に一応残しておきます。

$ npm install --dev eslint eslint-config-google eslint-plugin-vue

謎のパッケージについても軽く説明してみます。

eslint-config-google

Descriptionの通り、ESLint共有設定の一つです。他にはJS Standard Styleやairbnb JS Styleなどが名が知られているそうです。
プロジェクトを作る際に何故かGoogleは選べないので自力で入れる必要がありそうってことで入れます。今回はgoogleのそれを入れますが、気に入ったものがあればそちらを採用してみてもいいかもしれません。

eslint-plugin-vue

Descriptionの通り、Vue.jsの公式なESLintプラグインです。
こちらもESLintが入るデフォルト設定で恐らく入っていますが、コピペ用に以下略。

つづき

.eslintrc.jsの設定をよしなにします。
コンフィグファイルを分けた場合は、.eslintrc.jsというものがあるのでこちらに書きます。デフォルト設定では存在しないのでtouchして下さい。
extendsプロパティを書けば最低限問題ないかなと思います。

.eslintrc.js

module.exports = {
    extends: ["google", "plugin:vue/essential"],
};

VSCodeの設定

VSCodeの拡張機能が入っていない場合は、適宜必要なものを入れます。
ESLintとVeturをインストールし、有効に切り替えてリロードします。

vueファイルにもESLintが適用されるように、settings.jsonに以下を追記します。

settings.json

{
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
}

とやっていけば、vueファイルにもエラーが表示されるようになっていると思います。

Prettierインストール

Prettierとその周りのプラグインをインストール

$ npm install --dev prettier eslint-config-prettier eslint-plugin-prettier

謎パッケージを一応簡単に説明します。

eslint-config-prettier

Descriptionの通りで、prettierと衝突する可能性のあるルールをオフにするとのこと。

eslint-plugin-prettier

Readmeによると、ESlintの代わりにprettierのスタイルでフォーマットを適用するプラグインとのこと。
上でESLintのスタイル周りを無効にしてprettierのスタイルを有効にするって感じでしょうかね。ESLintと衝突する規則をこれで解消できそうです。

続き

VSCodeの拡張機能Prettierが入っていない場合はインストールし、有効に切り替えてリロードします。

.eslintrc.jsとsettings.jsonをよしなに修正します。

.eslintrc.js

module.exports = {
    extends: ["google", "plugin:vue/essential", "plugin:prettier/recommended"],
};

settings.json

{
  "eslint.validate": [
    "javascript",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "prettier.eslintIntegration": true,
}

セミコロンやスペース等のスタイル周りの規則はrulesプロパティで適宜いい感じに設定してみて下さい。ここでは省略します。
ルールなしだと、なんとなく半角スペース周りがちょっと違和感あるような気がします。

とやっていけば、Command+Sで保存する際にコードを整形するようになっていると思います。
デフォルトファイルのHelloWorld.vueのtemplate周りなんかは一目で綺麗に整理されたような気がします。
これで目的は果たせました。おわり。

`Google Style`と`Standard Style`を比較してみる

Standard Styleしか使ったことないので、GoogleのLintを試しただけーって的なお話です。

JS Standard Styleも上記の手順で導入し、Googleとの文法規則の差分を確認してみます。rulesには特に何も書いていないものとします。

以下のなんの変哲もないコードです。

app.vue

  methods: {
    func() {
      var x = 0;
      console.log(x);
    }
  }

ESLintを走らせるとこうなります

`Google JS Style`

2回検査した時のコードです（詳細は備考で）

app.vue

  methods: {
    func() {
      const x = 0;
      console.log(x);
    }
  }

`JS Standard Style`

整形なし

備考

Google JS Style はこの辺のルールによって、varの代わりにletが割り当てられます。また、さらにこの辺のルールによって、一度も書き換えを行なっていない変数はconstに割り当てられます。
実はESLintを1回走らせただけではlet止まりでした。2回検査しないとconstにならないのでちょっと注意です。

JS Standard Styleにはこれらのルールはありません（ソースも確認しました）。

特に変更無ければconstの方が良いので、これだけで見たら、googleのそれの方がいい感じな気がしました。レビューで指摘する手間も省けそう。

おわり

もうちょいルール足して生産性が上がるようなそれにしていきたいですね。
ESLintのルールはこの辺にあるので、気になったものはこちらをみてルールを決めるといいかなと思います。さっきのスペース云々は多分この辺かなぁっと。

チーム開発でLintを採用して一貫性カオス問題が解決するといいなと思っています。

Google JS StyleとPrettierを併用してvueコードを整形する設定

背景

目的