Atom & Vue.js & ESLint で自動整形環境構築

## はじめに

整理された情報を見つけられず細かい部分でちょくちょく詰まったのでまとめておきます。
本稿の間違いにお気付きの方は指摘いただけますと幸いです :pray:

### ゴール

Atomで.vueファイルを.eslintrc\*に記述したルールの通り自動整形されるようにする :muscle: :muscle: :muscle: 
※違反箇所の表示もされないと不便なので合わせて対応します

### 前提

- Node.jsインストール済
- Vue.jsプロジェクト作成済
- プロジェクト配下に環境構築する想定
    - グローバル環境の場合についても補足してるのでたぶんできます、たぶん
- ESLintの設定(.eslintrc\*)の書き方はなんとなく知ってる
- たぶん関係ないけど、Mac OSで動作確認

## 導入手順

### Vue.js & ESLint 連携 (ここはAtom無関係🙅‍♀️)

[`eslint-plugin-vue`](https://github.com/vuejs/eslint-plugin-vue)を導入するだけ。
基本的には以下の記事の通りに実施。
https://qiita.com/mysticatea/items/860ce3bf0ff387f166ac

#### `eslint`, `eslint-plugin-vue` のインストール

```
$ npm install --save-dev eslint eslint-plugin-vue
```

※グローバル環境に入れる場合は `-g` を付けてください☝️
※`vue-cli`などで作成した場合既に入ってたりするので適宜飛ばしてください

#### .eslintrc\*編集

@mysticatea 氏から[コメント](https://qiita.com/taiju59/items/326bb25814f60ecf9c3c#comment-cb290903c35d740ac155)で補足いただきました :ok_woman:

>また、plugin:vue/recommended はテンプレート部分の静的検証に関する設定なので、スクリプト部分の設定はお好みのものをご利用ください。

まず、スクリプト部分は通常のESLintとしてのルールが適応されるっぽい。

```javascript
"rules": {
    "semi": "error", // <-- 通常のESLintのルールに基づいて
    "quotes": ["error", "single"] // <-- こういうのを指定する
}
```

テンプレート部分は、2種類の指定方法がある。

まず、個別にルールを指定する方法
詳しくはコチラ👇
https://github.com/vuejs/eslint-plugin-vue#bulb-rules

```javascript
"rules": {
    "semi": "error",
    "quotes": ["error", "single"],
    'vue/this-in-template': [2, 'always'] // <-- 通常のeslintルールに混じって追加
}
```

そして、以下4種類のざっくりした厳しさでも指定できる。

>plugin:vue/base - Settings and rules to enable correct ESLint parsing
>plugin:vue/essential - Above, plus rules to prevent errors or unintended behavior
>plugin:vue/strongly-recommended - Above, plus rules to considerably improve code readability and/or dev experience
>plugin:vue/recommended - Above, plus rules to enforce subjective community defaults to ensure consistency

https://github.com/vuejs/eslint-plugin-vue#gear-configs

```javascript
"extends": [
    "eslint:recommended",
    "plugin:vue/recommended" // <-- 追加
],
```

#### CLIでの動作確認

拡張子 `.vue` を指定して `eslint` を使うだけ。

チェック

```
$ ./node_modules/.bin/eslint "src/**/*.{js,vue}"
```

自動整形

```
$ ./node_modules/.bin/eslint --fix "src/**/*.{js,vue}"
```

### Atomへの導入 :rocket: 

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

vueのシンタックスハイライト

```
$ apm install language-vue
```

警告表示

```
$ apm install linter linter-eslint
```

自動整形

```
$ apm install atom-beautify
```

#### [linter-eslint](https://github.com/AtomLinter/linter-eslint)

**設定**

- Preference(⌘,) -> Packages -> linter-eslint
- List of scopes to run ESLint on, ... に「`text.html.vue`」を追記

<img width="766" alt="スクリーンショット 2018-03-21 19.24.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/93608/c6696ccb-02a9-e800-9206-f1cbb472e71c.png">

※`eslint`や `eslint-plugin-vue` をグローバルインストールした場合「Use global ESLint installation」にチェック

@k10i 氏から[コメント](https://qiita.com/taiju59/items/326bb25814f60ecf9c3c#comment-0b5822d564d2337cfb5e)いただきました。
以下の設定も必要なようです。

- 「Fix errors on save」にチェックを入れる

<img width="770" alt="スクリーンショット 2019-01-04 21.15.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/93608/9bf2856e-6b56-e7c8-02ba-081f78c88e49.png">
**動作確認**

- `.vue`ファイルを開き、何か悪そうな記述して、警告が出ればOK

※Atomの再起動が必要かも

#### [atom-beautify](https://atom.io/packages/atom-beautify)

**設定**

- Preference(⌘,) -> Packages -> atom-beautify
- 「Vue」の箇所を開く
- 「Default Beautifier」を「ESLint Fixer」に設定
-  必要に応じて Beauty On Save にチェック
    - ファイル保存時に自動整形される

<img width="785" alt="スクリーンショット 2018-03-21 19.24.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/93608/7cd0aa94-2e00-648e-02c0-0139ad03202c.png">

**動作確認**

- .vueファイルを開き、何か悪そうな記述をすると警告が出るはず
- Atom Beautify実行で自動整形されればゴール :tada: :tada: :tada:
    - ^⌥B
    - または、ツールバー -> Atom Beautify -> Beautify

※Atomの再起動が必要かも

----

## 直面したエラーと対処

> `Cannot find module 'babel-eslint'`

Atom 再起動したら出なくなった

> `Use the latest vue-eslint-parser`

.eslintrc* における `"parser": "babel-eslint"` の記載位置を変えればOK
https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error

## ディスカッション :thinking: 

### `eslint-config-vue` と `eslint-plugin-html` は不要になった？ --> YES 

- 一部情報では `eslint-plugin-vue` と一緒にインストールするよう書かれている
    - http://omachizura.com/note/Atomのlinter-eslintでvuejsのプラグインを導入する.html
    - https://ginpen.com/2016/12/08/vue-lint/
- しかし、`eslint-config-vue` は `eslint-plugin-vue` に取り込まれたらしい [^1]
- さらに、`eslint-plugin-html` は `eslint-plugin-vue` のREADMEにおいて、設定してないことを確認してね、と書かれている [^2]

@mysticatea 氏から[コメント](https://qiita.com/taiju59/items/326bb25814f60ecf9c3c#comment-cb290903c35d740ac155)で回答いただきました :ok_woman: 

>はい。
>
>- もともと `eslint-config-vue` はユーザー向けではなくて、Vue.js チームの中で使うために作っていたそうです。  
>また、`plugin:vue/recommended` はテンプレート部分の静的検証に関する設定なので、スクリプト部分の設定はお好みのものをご利用ください。
>- 昔は `eslint-plugin-html` を利用していましたが、テンプレート部分の静的検証をするために `vue-eslint-parser` に置き換えられました。

### CSSは整形されない？ --> YES

@mysticatea 氏から[コメント](https://qiita.com/taiju59/items/326bb25814f60ecf9c3c#comment-cb290903c35d740ac155)で回答いただきました :ok_woman: 

>はい、`vue-eslint-parser` は現在のところ CSS の検証をサポートしていません。

### vue-fromat

- Atomに[vue-fromat](https://github.com/LeslieYQ/vue-format)というパッケージもあるが、ESLintとの連携方法が不明だったのでパスした

----

それでは、よき Atom & Vue & ESLint ライフを :wave:

[^1]: https://github.com/vuejs/eslint-config-vue
[^2]: https://github.com/vuejs/eslint-plugin-vue#why-doesnt-it-work-on-vue-file