nuxt.js(v2)でstyleLintの設定をする。ついでにVScodeで自動整形させる。

■動作確認済みバージョン

- nuxt(2.11.0)
- create-nuxt-app(v2.12.0)

■更新履歴

- 2020/2/5 初稿

---

## 目標

- create-nuxt-appでstyleLintのエラーが出ても驚かない
- styleLintをSCSSで利用できるようにする
- styleLintで`--fix`できるようにする
- commit時にStyleLintErrorが出るようにする
- VScodeで保存時に自動整形する

## nuxt.jsインストール時の設定

公式ドキュメントの[`create-nuxt-app`を利用する](https://ja.nuxtjs.org/guide/installation/)を参考に、各種設定をしつつ選んでNuxt.jsをインストールします。ポイントのみ記載します。

↓

```Console:terminal
% cd <インストール先のディレクトリ>
% npx create-nuxt-app
```

### リンティングツールをチェック時に…

```terminal
? Choose linting tools 
 ◉ ESLint
 ◯ Prettier
 ◉ Lint staged files
❯◉ StyleLint
```

ESLint、Lint staged files、StyleLintをチェックします。Prettierは改行強制で好みが分かれるため、プロジェクトメンバーで検討の上で別途追加します。

### インストール完了後…stylelintの設定

インストール完了後に、`npm run dev`をするとStyleLintErrorが出ます。

↓

```Console:terminal
ERROR  StylelintError

No rules found within configuration. Have you provided a "rules" property?
```

焦らずに…自動生成されている`stylelint.config.js`に空のルールを追加します。

↓

```javascript:stylelint.config.js
module.exports = {
  // add your custom config here
  // https://stylelint.io/user-guide/configuration
  'rules': {} // ←追加
}
```

修正し保存して、エラーが出なければ動作確認完了です。

## SCSSを利用する

インデント記法のstylusやsassも好きですが、学習コストを抑えるため特に理由がなければscssを選択します。コーダーの希望があれば、postcss（ディフォルト）の利用を検討しますが、今回のお題はSCSSです。

まずは、scssのモジュールを追加して、Nuxt.jsで使えるようにします。

↓

```Console:terminal
% npm i node-sass sass-loader
```

### styleLintにSCSS用の設定をする

はじめにスタイルガイドをインストールします。SCSS用パッケージ`stylelint-scss`と`stylelint-config-standard-scss`を利用します。緩めを希望の場合は`stylelint-config-recommended-scss`を利用してください。

↓

```Console:terminal
% npm i -D stylelint-scss stylelint-config-standard-scss
```

次に、stylelint.config.jsに`extend`プロパティーに読み込ませます。

↓

```javascript:stylelint.config.js
module.exports = {
  'extends': 'stylelint-config-standard-scss',
  'rules': {
    // 独自ルールはお好みで
  }
}	
```

確認のために、`% npm run dev`後に適当にSCSSを打ってください。エラーが出たら成功です。

↓

```Console:terminal
// エラー例

ERROR  StylelintError

pages/test.vue
48:24  ✖  Expected a trailing semicolon   declaration-block-trailing-semicolon
```

## styleLintで`--fix`できるようにする

esLintと同様の動作を目指します。package.jsonに一行追加してください。

↓

```json:package.json
{
  "scripts": {
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "stylelint": "stylelint '**/*.{vue,scss,css}' --ignore-path .gitignore", // ←追加
    ...
  },
  ...
}
```

動作確認をします。`% npm run stylelint`を入力して先ほどと同様のエラーが出れば成功です。

↓

```Console:terminal
% npm run stylelint

↓
// エラー結果抜粋
pages/test.vue
48:24  ✖  Expected a trailing semicolon   declaration-block-trailing-semicolon
```

さらに、`--fix`の動作確認をします。`% npm run stylelint -- --fix`を入力してエラー箇所が修正されれば成功です。

↓

```Console:terminal
% npm run stylelint -- --fix

↓
//エラーが出なければ成功
```

## commit時にStyleLintErrorが出るようにする

esLintと同様の動作を目指します。package.jsonに一行追加してください。

↓

```json:package.json
{
  ...
  "scripts": {
    ...
  },
  "lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,scss,vue}": "stylelint" // ←追加
  },
  ...
}
```

動作確認をします。適当なSCSSを打ってcommitします。同様のエラーが出たら成功です。

↓

```Console:terminal
% git add ./pages/test.vue
% git commit -m 'commit test'

↓
// エラー結果抜粋
✖ stylelint found some errors. Please fix them and try committing again.
pages/test.vue
48:24  ✖  Expected a trailing semicolon   declaration-block-trailing-semicolon
```

修正（`--fix`）して、再度動作確認をします。エラーが出力されずにcommitできたら成功です。

↓

```Console:terminal
% npm run stylelint -- --fix
% git add ./pages/test.vue
% git commit -m 'commit test'

↓
//エラーが出なければ成功
```

## VScodeで保存時に自動整形する

VScodeの機能拡張「[stylelint-plus](https://marketplace.visualstudio.com/items?itemName=hex-ci.stylelint-plus)」をインストールします。似た名前の機能拡張に[stylelint(plusなし)](https://marketplace.visualstudio.com/items?itemName=thibaudcolas.stylelint)がありますが、こちらには自動保存機能（stylelint.autoFixOnSave）がありませんので注意してください。インストール後、自動整形機能を有効してください。

↓

#### 自動整形機能の有効化

0. VScodeのprefarence（機能拡張）からSettingsを開きます
1. 検索窓で「stylelint」を検索します
2. stylelint:**Auto Fix On Save**にチェックを入れます
3. VScodeを立ち上げ直してください

動作確認をします。先ほどと同じように適当にSCSSを打ってください。保存時に自動で整形されれば成功です。

以上で目標達成です。

## おまけ

気がついたら、create-nuxt-appでlint-stagedやStyleLintの初期設定ができるようになったていました。自作と比べるとかなり短い時間で設定できます。cool!

style周りについて、シンプルに生きられるようになりました。