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

`.vue`ファイルの<template><script><style>全てLintかける

この記事は フューチャー Advent Calendar 2018 14日目の記事です。

Vue.jsの.vueファイル(単一ファイルコンポーネント、SFC)eslint-plugin-vueを使えば、テンプレート部分(<template>)もJavaScript部分(<script>)もLintできることはよく知られていると思います。

しかし残念ながらeslint-plugin-vueだけでは、CSS(<style>)はLintできません。
ESLintですから当然と言えば当然ですね。個人的にはテンプレートがLintできるだけでもびっくり。)

そこで「stylelint」です。
stylelint.vueファイルを標準サポートしているようで、もちろん<style lang="scss">と書いてあれば1、自動でSCSSとしてパース2します。
(しかしドキュメントは見つけれらませんでした。どこだ?)

ということで、eslint-plugin-vuestylelintを使えば、.vueファイルを隅までLintできるようになるので、この導入方法や実行方法を書こうと思います。

この記事のゴール

eslint-plugin-vuestylelintを導入して、.vueファイルの<template>,<script>,<style>全てにLintかけられる環境を作ります。
(エディタ周りは流行りのVSCodeだけ紹介します。)

eslint-plugin-vue

最近はVueCLIとかでVueの開発環境構築すれば自動的にeslint-plugin-vueまで付いて来ることが多いので、すでに導入済みかもしれません。
そういう方は読み飛ばしてstylelintの手順を見ましょう。

コマンドラインでLintするまで

インストール

まずは必要なnpmパッケージを次のコマンドでインストールします。

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

設定(config)

設定ファイルを書いていきます。とりあえず動かしたいので推奨っぽい設定で紹介します。細かく設定したい場合はESLintのドキュメントeslint-plugin-vueのドキュメントを参照してください。

ルートディレクトリに.eslintrc.jsを作成し、次のように記述します。

.eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ]
}

すでに.eslintrc.js等の設定ファイルが存在する場合は以下のように追記してください。

.eslintrc
{
  extends: [
    'eslint:recommended',
+    'plugin:vue/recommended'
  ]
}

すでに設定ファイルが存在する場合で、babel-eslint使ってるとか、eslint-plugin-html入れてたとかいう方はさらに手順があるので次のリンクを見てください。
https://vuejs.github.io/eslint-plugin-vue/user-guide/#faq

Lintの対象から除外したいファイルがある場合は、ルートディレクトリに.eslintignoreを作成して除外する条件を.gitignoreと同じような記述方法で書いていきます。
以下は例です。

.eslintignore
dist/**/*.js
coverage/**

詳細はこちらです。
https://eslint.org/docs/user-guide/configuring#eslintignore

npm script作成

package.jsoneslintを実行するスクリプトを追加します。

package.json
{
  "scripts": {
+    "lint-js": "eslint --ext .js,.vue ."
  },

(すでにeslintの実行スクリプトが存在する場合は、.vueの拡張子が受け入れられるように変更しましょう。)

Lint実行

以下のコマンドを実行して結果が出たら成功です。
(検証対象のファイルにエラーがないと何も出ないので、テンプレート部分(<template>)のインデント崩しまくったりしてから実行してみてください。)

実行
npm run lint-js
結果
/xxx/src/Foo.vue
  3:1   error  Expected indentation of 2 spaces but found 4 spaces  vue/html-indent

自動修正

eslint-plugin-vue自動修正に対応しています。次はこれを試します。

package.jsonに自動修正用のスクリプトを追加します。

package.json
{
  "scripts": {
    "lint-js": "eslint --ext .js,.vue ."
+    "fix-js": "eslint --ext .js,.vue . --fix"
  },

これを実行してみましょう。

実行
npm run fix-js

先ほどインデントエラーの出たファイルが、自動で修正されたら成功です。

VSCode上にLint結果を表示するまで

CLIで動いたらVSCode上でエラーを確認できるようにします。

まず次の拡張機能をVSCodeでインストールしましょう。

ESLintに.vueファイルを認識させるにはVSCodeの設定で次の設定を追加する必要があります。

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

さらに、Vetur拡張機能を入れている場合は下記の設定をしておくと良いです。

.vscode/settings.json
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true }
  ],
+  "vetur.validation.template": false
}

(詳細はこちら。)

画面上でエラーが確認できたら成功です。
image.png

他のエディタのプラグインや設定方法もあるのでVSCode使ってない方は次のリンクを参照してください。
https://vuejs.github.io/eslint-plugin-vue/user-guide/#editor-integrations

stylelint

コマンドラインでLintするまで

インストール

まずは必要なnpmパッケージを次のコマンドでインストールします。

  • stylelint

    npm install --save-dev stylelint
    
  • stylelint-config-standard

    stylelintは設定のpresetを内部で持っていないので、今回はstylelint公式の設定preset、stylelint-config-standardを入れておきます。(自力で細かく設定するならこのインストールは必要ありません。)

    npm install --save-dev stylelint-config-standard
    

設定(config)

設定ファイルを書いていきます。とりあえず動かしたいので推奨っぽい設定で紹介します。細かく設定したい場合はドキュメントを参照してください。

ルートディレクトリにstylelint.config.jsを作成し、次のように記述します。

stylelint.config.js
module.exports = {
  extends: 'stylelint-config-standard'
}

Lintの対象から除外したいファイルがある場合は、ルートディレクトリに.stylelintignoreを作成して除外する条件を.gitignoreと同じような記述方法で書いていきます。
以下は例です。

.stylelintignore
dist/**/*.css
coverage/**

詳細はこちらです。
https://stylelint.io/user-guide/configuration/#stylelintignore

npm script作成

package.jsonstylelintを実行するスクリプトを追加します。

package.json
{
  "scripts": {
+    "lint-css": "stylelint \"**/*.vue\""
  },

.vueファイル以外もLintかけるならこんな感じ。

package.json
{
  "scripts": {
+    "lint-css": "stylelint \"**/*.vue\" \"**/*.css\" \"**/*.scss\""
  },

Lint実行

以下のコマンドを実行して結果が出たら成功です。
(検証対象のファイルにエラーがないと何も出ないので、CSSのインデント崩しまくったりしてから実行してみてください。)

実行
npm run lint-css
結果
src/Foo.vue
 50:9  ✖  Expected indentation of 2 spaces   indentation

ちなみに.vueファイルの<style>部分以外の<template>内に書いたstyle属性の中も検証されます。(これすごいですよね?)

自動修正

stylelint一応、自動修正に対応しています。次はこれを試します。

package.jsonに自動修正用のスクリプトを追加します。

package.json
{
  "scripts": {
    "lint-css": "stylelint \"**/*.vue\"",
+    "fix-css": "stylelint \"**/*.vue\" --fix"
  },

これを実行してみましょう。

実行
npm run fix-css

先ほどインデントエラーの出たファイルが、自動で修正されたら成功です。

VSCode上にLint結果を表示するまで

CLIで動いたらVSCode上でエラーを確認できるようにします。
次の拡張機能をVSCodeでインストールしましょう。

画面上でエラーが確認できたら成功です。
image.png

(ただ残念ながらこのプラグインから自動修正はまだ対応していません。
 stylelintの自動修正がまだ実験的な機能扱いなので当分プラグインには実装されない気がします。
 ぶっちゃけstylelintの自動修正は問題が山積みな様子。。。)

他のエディタのプラグインの一覧もあるのでVSCode使ってない方は次のリンクを参照してください。
https://stylelint.io/user-guide/complementary-tools/#editor-plugins


先週、Vue.jsのAdvent Calendarで「Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング」という記事も書いたので興味があればこちらもよろしくお願いします。

ちなみに私、stylelintもちょっと関わってまして、今年、頑張ってautofix対応したのでぜひ使ってみてください。
そしてバグっていたり、足りないautofixがあれば、issue(またはPR)ください。


  1. SCSSやLESSなどstylelintがサポートしている構文であれば。 

  2. AST解析までは正しく行われます。各静的解析ルールは正しくうごかない物もあるので、その場合はプラグイン入れましょう。https://stylelint.io/user-guide/plugins/ 

Why do not you register as a user and use Qiita more conveniently?
  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
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