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



> 2021年10月 Stylelint v14リリースに伴って設定方法が変わったので編集しました。
> 逆にStylelint v13未満を使用している場合この記事のStylelint設定手順ではうまくいかないことがあります。


この記事は [フューチャー Advent Calendar 2018](https://qiita.com/advent-calendar/2018/future) １４日目の記事です。

Vue.jsの[`.vue`ファイル（単一ファイルコンポーネント、SFC）](https://jp.vuejs.org/v2/guide/single-file-components.html)は[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)を使えば、テンプレート部分(`<template>`)もJavaScript部分(`<script>`)もLintできることはよく知られていると思います。

しかし残念ながら[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)だけでは、CSS（`<style>`）はLintできません。
（**ES**Lintですから当然と言えば当然ですね。個人的にはテンプレートがLintできるだけでもびっくり。）

そこで「[Stylelint](https://github.com/stylelint/stylelint)」です。
[Stylelint](https://github.com/stylelint/stylelint)は拡張することで`.vue`ファイルをサポートできます。また設定次第で`<style lang="scss">`と書いてあればSCSSとしてパースすることもできます。

ということで、[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)と[Stylelint](https://github.com/stylelint/stylelint)を使えば、`.vue`ファイルを隅までLintできるようになるので、この導入方法や実行方法を書こうと思います。

# この記事のゴール

[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)と[Stylelint](https://github.com/stylelint/stylelint)を導入して、`.vue`ファイルの`<template>`,`<script>`,`<style>`全てにLintかけられる環境を作ります。
（エディタ周りは流行りのVSCodeだけ紹介します。）

# eslint-plugin-vue

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

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

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

### 設定(config)

設定ファイルを書いていきます。とりあえず動かしたいので推奨っぽい設定で紹介します。細かく設定したい場合は[ESLintのドキュメント](https://eslint.org/docs/user-guide/configuring)や[eslint-plugin-vueのドキュメント](https://vuejs.github.io/eslint-plugin-vue/user-guide/#usage)を参照してください。

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

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

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

```diff:.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`と同じような記述方法で書いていきます。
以下は例です。

```txt:.eslintignore
dist/**/*.js
coverage/**
```

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


### npm script作成

`package.json`に`eslint`を実行するスクリプトを追加します。

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

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


### Lint実行

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

```bash:実行
npm run lint-js
```

```bash:結果
/xxx/src/Foo.vue
  3:1   error  Expected indentation of 2 spaces but found 4 spaces  vue/html-indent
```

### 自動修正

`eslint-plugin-vue`は[自動修正](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems)に対応しています。次はこれを試します。

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

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

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

```bash:実行
npm run fix-js
```

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

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

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

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

- [vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

~~ESLintに`.vue`ファイルを認識させるにはVSCodeの設定で次の設定を追加する必要があります。~~
※この設定は不要になりました。

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

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

```diff:.vscode/settings.json
{
  // ...
+  "vetur.validation.template": false
}
```

（詳細は[こちら](https://vuejs.github.io/eslint-plugin-vue/user-guide/#visual-studio-code)。）

画面上でエラーが確認できたら成功です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/84259/daa5bd08-ce49-8149-54f9-970d8699a3d2.png)

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

<!--  -->


# Stylelint

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

- `stylelint`

    ```bash
    npm install --save-dev stylelint
    ```

- `stylelint-config-recommended-vue`

    StylelintでVueをリントするために必要なパッケージをインストールします。

    ```bash
    npm install --save-dev postcss-html stylelint-config-recommended-vue
    ```

- `stylelint-config-standard`

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

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

もしも、`<style lang="scss">`など使用している場合は追加でインストールが必要です。
例えばSCSSの場合は[stylelint-config-recommended-scss](https://github.com/stylelint-scss/stylelint-config-recommended-scss)が必要になります（別の方法もあります）。


```bash
npm install --save-dev stylelint-config-recommended-scss
```



### 設定(config)

設定ファイルを書いていきます。まずはVueで動作させるための設定のみを書いておきます。

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

```js:stylelint.config.js
module.exports = {
  extends: ['stylelint-config-recommended-vue']
}
```

さらに`stylelint-config-standard`を使用してコードスタイルを整える設定も追加してみます。細かく設定したい場合は[ドキュメント](https://stylelint.io/user-guide/configuration/)を参照してください。


```js:stylelint.config.js
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
  ],
  // SCSSを使用する場合は次も必要です。
  overrides: [
    {
      files: ['*.scss', '**/*.scss'],
      extends: ['stylelint-config-recommended-scss']
    },
    {
      files: ['*.vue', '**/*.vue'],
      extends: ['stylelint-config-recommended-scss', 'stylelint-config-recommended-vue']
    }
  ]
}
```


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

```txt:.stylelintignore
dist/**/*.css
coverage/**
```

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

### npm script作成

`package.json`に`stylelint`を実行するスクリプトを追加します。

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

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

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

### Lint実行

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

```bash:実行
npm run lint-css
```

```bash:結果
src/Foo.vue
 50:9  ✖  Expected indentation of 2 spaces   indentation
```

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

### 自動修正

`stylelint`は[一応、自動修正に対応](https://stylelint.io/user-guide/cli/#autofixing-errors)しています。次はこれを試します。

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

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

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

```bash:実行
npm run fix-css
```

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

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

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

- [vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

VueやSCSSを検証するためにはVSCodeで次の設定をする必要があります。

```jsonc:.vscode/settings.json
{
  // ...
  "stylelint.validate": [
      // ...,
      // ↓ "vue"を追加
      "vue",
      // ↓ "scss"も必要な場合は"scss"を追加
      "scss",
  ]
  // ...
}
```

画面上でエラーが確認できたら成功です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/84259/9d10cc6a-cb44-da2d-47f8-e4ad7893f71c.png)

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

---

先週、[Vue.jsのAdvent Calendar](https://qiita.com/advent-calendar/2018/vuejs)で「[Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング](https://qiita.com/ota-meshi/items/85bf17494c8ea0be05d7)」という記事も書いたので興味があればこちらもよろしくお願いします。

ちなみに私、[stylelint](https://github.com/stylelint/stylelint)もちょっと関わってまして、今年、[頑張ってautofix対応](https://github.com/stylelint/stylelint/pulls?q=is%3Apr+is%3Aclosed+Autofix+author%3Aota-meshi)したのでぜひ使ってみてください。
そしてバグっていたり、足りないautofixがあれば、issue（またはPR）ください。