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

はじめに

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

ゴール

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

前提

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

導入手順

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

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 氏からコメントで補足いただきました

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

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

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

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

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

"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

"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への導入

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

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

$ apm install language-vue

警告表示

$ apm install linter linter-eslint

自動整形

$ apm install atom-beautify

linter-eslint

設定

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

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

@k10i 氏からコメントいただきました。
以下の設定も必要なようです。

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

動作確認

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

※Atomの再起動が必要かも

atom-beautify

設定

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

動作確認

.vueファイルを開き、何か悪そうな記述をすると警告が出るはず
Atom Beautify実行で自動整形されればゴール
- ^⌥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

ディスカッション

`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 に取り込まれたらしい ¹
さらに、eslint-plugin-html は eslint-plugin-vue のREADMEにおいて、設定してないことを確認してね、と書かれている ²

@mysticatea 氏からコメントで回答いただきました

はい。

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

昔は eslint-plugin-html を利用していましたが、テンプレート部分の静的検証をするために vue-eslint-parser に置き換えられました。

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