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

##背景

`vue-cli`でテンプレートを作成する際に`Google JavaScript Style`が選択肢にないということで、なんでやと思ったので入れてみた。
<img width="262" alt="スクリーンショット 2019-01-04 22.01.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/247338/bd2fa6a0-3f9e-58d4-7962-3cbd1c81f8fb.png">


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

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

## ESLintインストール

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

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

```shell
$ npm install -g @vue/cli
```

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

```shell
$ vue create practice
$ cd practice
```

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

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

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

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

### eslint-plugin-vue
[Description](https://github.com/vuejs/eslint-plugin-vue)の通り、Vue.jsの公式なESLintプラグインです。
こちらもESLintが入るデフォルト設定で恐らく入っていますが、コピペ用に以下略。



### つづき

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

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

### VSCodeの設定

VSCodeの拡張機能が入っていない場合は、適宜必要なものを入れます。
[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)と[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)をインストールし、有効に切り替えてリロードします。

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

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


とやっていけば、vueファイルにもエラーが表示されるようになっていると思います。
<img width="500" alt="スクリーンショット 2019-01-04 22.30.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/247338/b918d371-d0e7-0df4-b753-791fbb1fd8ff.png">


## Prettierインストール

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

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

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

### eslint-config-prettier
[Description](https://github.com/prettier/eslint-config-prettier/)の通りで、prettierと衝突する可能性のあるルールをオフにするとのこと。

### eslint-plugin-prettier
[Readme](https://github.com/prettier/eslint-plugin-prettier#readme)によると、ESlintの代わりにprettierのスタイルでフォーマットを適用するプラグインとのこと。
上でESLintのスタイル周りを無効にしてprettierのスタイルを有効にするって感じでしょうかね。ESLintと衝突する規則をこれで解消できそうです。

### 続き

VSCodeの拡張機能[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)が入っていない場合はインストールし、有効に切り替えてリロードします。



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

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

```json: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`には特に何も書いていないものとします。

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

```js:app.vue
  methods: {
    func() {
      var x = 0;
      console.log(x);
    }
  }
```

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

### `Google JS Style`

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

```js:app.vue
  methods: {
    func() {
      const x = 0;
      console.log(x);
    }
  }
```

### `JS Standard Style`

整形なし

### 備考
`Google JS Style` は[この辺](https://github.com/google/eslint-config-google/blob/master/index.js#L338)のルールによって、`var`の代わりに`let`が割り当てられます。また、[さらにこの辺](https://github.com/google/eslint-config-google/blob/master/index.js#L341)のルールによって、一度も書き換えを行なっていない変数は`const`に割り当てられます。
実はESLintを1回走らせただけでは`let`止まりでした。2回検査しないと`const`にならないのでちょっと注意です。

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

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

## おわり
もうちょいルール足して生産性が上がるようなそれにしていきたいですね。
ESLintのルールは[この辺](https://eslint.org/docs/rules/)にあるので、気になったものはこちらをみてルールを決めるといいかなと思います。さっきのスペース云々は多分[この辺](https://eslint.org/docs/rules/space-before-function-paren)かなぁっと。


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