Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

ゴール

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

前提

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

また、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

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

"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

設定

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

スクリーンショット 2018-03-21 19.24.26.png

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

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

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

スクリーンショット 2019-01-04 21.15.24.png
動作確認

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

※Atomの再起動が必要かも

atom-beautify

設定

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

スクリーンショット 2018-03-21 19.24.06.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-vueeslint-plugin-html は不要になった? --> YES

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

はい。

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

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

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

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

vue-fromat

  • Atomにvue-fromatというパッケージもあるが、ESLintとの連携方法が不明だったのでパスした

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

taiju59
Flutterスキスキ
https://note.com/taiju____
ferix
R&Dを中心に主に受託開発でソフトウェアを開発するエンジニア集団
https://www.ferix.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした