[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 のルールを定義。ルールの定義方法は[色々ある](https://stylelint.io/user-guide/configuration/)が、`package.json` に書くよりは独立したファイルで管理したほうが良いと思う。今回は `.stylelintrc.json` に以下の通り定義しておくことにする。拡張子は省略可能だが、エディタのシンタックスハイライト対応のため、つけておいたほうが扱いやすい。

```..stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "string-quotes": "single"
  }
}
```

上で stylelint と合わせてこっそりインストールしていた [stylelint-config-standard](https://github.com/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](https://github.com/JaKXz/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` を定義しておくとエラー表示はなくなる。