[webpack][Vue.js] vue ファイル内で定義されているスタイルに stylelint を使用する

したいこと

webpack + Vue.js で構成される開発環境において *.vue ファイル内に記述されているスタイル（CSSとかそのメタ言語とか）に stylelint を適用し、コーディングルールに反している場合は警告を表示したい。

とりあえず stylelint インストール

npm install stylelint stylelint-config-standard

ちなみに2017年5月にリリースされた npm v5 から --save 無しでも自動で dependencies に追加されるようになっている。古い npm では必要に応じて --save あるいは --save-dev を付与する。

次に stylelint のルールを定義。ルールの定義方法は色々あるが、package.json に書くよりは独立したファイルで管理したほうが良いと思う。今回は .stylelintrc.json に以下の通り定義しておくことにする。拡張子は省略可能だが、エディタのシンタックスハイライト対応のため、つけておいたほうが扱いやすい。

.stylelintrc.json

{
  "extends": "stylelint-config-standard",
  "rules": {
    "string-quotes": "single"
  }
}

上で stylelint と合わせてこっそりインストールしていた stylelint-config-standard というルール定義をベースに、追加・変更したい定義を rules 内に書いていく（ルール定義のテンプレートは他にも色々ある）。今回はサンプルとしてシングルクオートを強制するルールを追加定義している。

stylelint 動作確認

※ここは試さず次の見出しまで進んでも良い

いったん、これでちゃんと動くかどうか試してみたい。package.jsonの"scripts"内に以下を追加する（カンマなど必要に応じて加えること。以下同様）。

package.json

"stylelint": "stylelint **/*.css"

また、適当な css ファイルを用意して、あえてシングルクオートではなくダブルクオートを使ってみる。

src/assets/styles/test.css

div::before {
  content: "test";
}

で、npm run stylelint としてみる。もし No configuration provided for ... とか言われたら、たぶん stylelint の設定ファイルの名前か配置場所が間違っている。うまくいけば以下のようになるはず。

src/assets/styles/test.css
 2:12  ✖  Expected single quotes   string-quotes

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! xxxx@1.0.0 stylelint: `stylelint **/*.css`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the xxxx@1.0.0 stylelint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /.../*.log

ちゃんとダブルクオート部分がエラーになってくれた。

ただ、上の *.css を *.vue にしてもうまくいかない。*.vueファイルにはtemplateやscriptが含まれるので、そのまま stylelint に渡すことはできないのである（たぶん）。

webpack-dev-server 実行時に vue ファイル内のスタイル定義に stylelint を適用する

このあたりうまくやってくれるプラグインがある模様。stylelint-webpack-plugin をインストール。

npm install stylelint-webpack-plugin

build/webpack.dev.conf.js の頭の require が並んでいるあたりに

build/webpack.dev.conf.js

const StylelintPlugin = require('stylelint-webpack-plugin')

を書き足し、同ファイル内で plugins を読み込んでいる部分の最後に以下追加する。

build/webpack.dev.conf.js

new StylelintPlugin({
  files: ['**/*.vue']
})

以下のような vue ファイルを作って試してみる。

src/components/Test.vue

<template>
  <div></div>
</template>

<script>
</script>

<style scoped>
div::before {
  content: "test";
}
</style>

webpack-dev-server （vue init webpack *** でプロジェクトを初期化している場合は npm run dev で実行できる）を実行してみる。

 ERROR  Failed to compile with 1 errors                                                           14:22:23

 error  


src/components/Test.vue
 10:12  ✖  Expected single quotes   string-quotes

ちゃんとエラー出ました。

備考

• PostCSS のプラグインで色々やっている場合でも、この方法でいけるはず（十分な検証はしていない）。
• この方法は、エラーを出すだけで自動整形してくれるわけではない。
• 余談だが Visual Studio Code で *.vue ファイル内にネストされた PostCSS を書くとシンタックスハイライトによってエラー扱いされてしまう。ここをうまく認識させる方法がないので、とりあえず Settings で "vetur.validation.style": false を定義しておくとエラー表示はなくなる。