【Nuxt 2】Stylelintの導入

Stylelint とは

Stylelint は、CSS の静的解析ツールです。 別の記事で紹介している ESLint の CSS 版みたいなイメージです。

【Nuxt 2】ESLint の導入

ESLint と同様に、ルールの設定によりコード解析を行います。 ルールの一覧は、以下に記載されています。

List of rules | Stylelint

Stylelint の導入

インストール

NuxtJS に Stylelint を導入するために、以下のパッケージをインストールします。

$ npm install -D stylelint stylelint-config-standard stylelint-config-recommended-vue postcss-html

• stylelint(14.3.0)：Stylelint の本体
• stylelint-config-standard(24.0.0)：推奨ルールの設定
• stylelint-config-recommended-vue(1.1.0)：Vue ファイル解析用に必要
• postcss-html(1.3.0)：recommended-vueのために必要

バージョンについては、この記事を執筆する際に使用したものです。 特にこだわりはありませんが、バージョンにより動作が異なる場合があります。

実際に、create-nuxt-app(v3.7.1)で導入される Stylelint のバージョンは13.13.1となっており、 上記のstylelint-config-recommended-vueとpostcss-htmlはインストールしなくても動作します。

この理由は、Stylelint の14.0.0から Vue ファイルなど CSS ファイル以外のものを解析する場合、専用のモジュールが必要になっているからです。 これがないとCssSyntaxErrorが発生します。 そのため、今回はstylelint-config-recommended-vueとpostcss-htmlをインストールしています。

参照： https://stylelint.io/migration-guide/to-14/#syntax-option-and-automatic-inferral-of-syntax

設定ファイル

次に Stylelint の設定ファイルとして、プロジェクトのルートフォルダにstylelint.config.jsを作成します。

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
  ],
  rules: {},
}

rulesに独自のルールを設定していきますが、今回はextendsにstylelint-config-standardとすることで、Stylelint で推奨されているルールを適用するようにしています。 具体的なルールの設定は以下に記載されています。

https://github.com/stylelint/stylelint-config-standard/blob/main/index.js

このリンク先にextends: 'stylelint-config-recommended'とあるように、stylelint-config-standardはstylelint-config-recommendedを拡張したものになります。 stylelint-config-recommendedは、stylelint-config-standardよりもさらに基本的なルールが設定されています。 具体的なルールの設定は以下に記載されています。

https://github.com/stylelint/stylelint-config-recommended/blob/main/index.js

stylelint-config-standardのルールが厳しいという場合は、stylelint-config-recommendedを代わりに使用することもできます。

$ npm install -D stylelint-config-recommended

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

実行

Stylelint を実行するために、package.jsonのscriptsに以下を追加します。

"scripts": {
  //...
  "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
}

簡単に解説をすると、カレントフォルダ配下の Vue または CSS ファイルに対してコード解析を行います。 ただし、--ignore-path .gitignoreとあるように、.gitignoreに設定されたフォルダ、ファイルは解析対象外とします。

これにより以下のコマンドで Stylelint を実行できます。

$ npm run lint:style

エラーがある場合は、以下のように表示されます。

components/NuxtLogo.vue
 22:3  ✖  Unexpected unknown property "hoge"  property-no-unknown

見ての通りですが、components/NuxtLogo.vueファイルの 22 行目にあるhogeは存在しないプロパティというエラーとなっています。 具体的にproperty-no-unknownというルールによるエラーです。

ルールの設定

先述したように、stylelint-config-standardなどの設定があるため、無理に変更する必要はないはありません。 ただし、独自に設定したいなどの場合は、stylelint.config.jsのrulesに記述していきます。

ルールの設定は、ルール毎に異なります。 そのため、上述したルール一覧から各ルールのドキュメントを参考にしてください。

例えば、先程のproperty-no-unknownというルールの設定を行ってみます。

property-no-unknown | Stylelint

property-no-unknownは、trueを設定することで有効になります。 無効にする場合は、nullを設定します。

rules: {
  //有効化
  'property-no-unknown': true,
  //無効化
  'property-no-unknown': null
}

その他オプションとして、ignoreProperties、ignoreSelectors、ignoreAtRules、checkPrefixedという設定があります。 各オプションの説明は割愛しますが、以下のように設定します。

rules: {
  'property-no-unknown': [
    true,
    {
      'ignoreProperties': ['/^my-/', 'custom'],
      'ignoreSelectors': [':root'],
      'ignoreAtRules': ['supports'],
      'checkPrefixed': true
    }
  ]
}

配列の 1 つ目に基準となる値を設定し、2 つ目にオプションの情報を持つオブジェクトを設定します。 その他のルールについても同様の設定方法です。

SCSS への対応

パッケージの追加

SCSS を利用する場合は追加で以下のパッケージをインストールし、読み込む設定をします。

$ npm install -D stylelint-config-standard-scss postcss

• stylelint-config-standard-scss(3.0.0)：SCSS 用の推奨ルールの設定
• postcss(8.4.5)：CSS をパースするためのもの
• @nuxt/postcss8：NuxtJS で PostCSS@8 を使用するためのもの

module.exports = {
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
  ],
  rules: {},
}

stylelint-config-standard-scssは、依存関係としてstylelint-config-standardとstylelint-config-recommended-scssを持ちます。 そのためstylelint-config-standardを個別でインストールする必要はなくなります。

stylelint-config-recommended-scssは、通常の CSS と同じくstandardよりも基本的なルールが設定されています。 recommendedのルールだけを適用する場合は、stylelint-config-recommended-vue/scssのみを設定します。 これは、stylelint-config-recommended-vue/scssにstylelint-config-recommended-scssの設定が含まれているからです。

module.exports = {
  extends: [
    'stylelint-config-recommended-vue/scss',
  ],
  rules: {},
}

PostCSS をインストールしているのは、SCSS 用の Stylelint を動作させるためです。 NuxtJS プロジェクトには、バージョン7のpostcssが含まれていますが、SCSS の Stylelint を動作させるためにはバージョン8が必要となります。

もう少し具体的な話をすると、stylelint-config-recommended-scssの依存関係にあるpostcss-scssを動作させるためにバージョン8のpostcssが必要となります。

また、バージョン8の PostCSS を NuxtJS で使用する場合には、@nuxt/postcss8をnuxt.config.jsのbuildModulesに設定する必要があります。 これが無いと、警告がバンバンでます。

export default {
  buildModules: [
    '@nuxt/postcss8'
  ]
}

対象ファイルの変更

解析対象のファイルを変更するために、package.jsonのscriptsを変更します。

"scripts": {
  //...
  "lint:style": "stylelint \"**/*.{vue,css,scss}\" --ignore-path .gitignore",
}

以下は必須ではありませんが、ファイル種類毎にルールの設定を厳密に行いたい場合は、以下のようにstylelint.config.jsを設定します。

module.exports = {
  extends: [
    'stylelint-config-standard',
  ],
  overrides: [
    {
      files: ['*.scss', '**/*.scss'],
      extends: [
        'stylelint-config-standard-scss',
      ]
    },
    {
      files: ['*.vue', '**/*.vue'],
      extends: [
        'stylelint-config-standard-scss',
        'styleling-config-recommended-vue/scss'
      ],
    }
  ]
}

プロパティのソート

プロパティの順序を統一させるために、stylelint-config-recess-orderをインストールします。

$ npm install -D stylelint-config-recess-order

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
    'stylelint-config-recess-order'
  ],
  rules: {}
}

実行時に、--fixオプションを指定することでコードフォーマットを行います。

"scripts": {
  //...
  "lint:style": "stylelint --fix \"**/*.{vue,css,scss}\" --ignore-path .gitignore",
}

プロパティの順序は、以下のリンク先を参照してください。

https://github.com/twitter-archive/recess/blob/29bccc870b7b4ccaa0a138e504caf608a6606b59/lib/lint/strict-property-order.js

プロパティのソートについては、stylelint-config-recess-order以外にも様々なパッケージがありますので、興味がある方は調べてみてください。

Prettier との併用

コードフォーマッターとして Prettier を使用する場合は、Prettier と重複しているルールを無視するため以下をインストールします。

$ npm install -D stylelint-config-prettier

stylelint.config.jsに設定する場合は、一番最後に読み込むようにします。

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
    'stylelint-config-prettier'
  ],
  rules: {}
}

Prettier については、以下の記事を参考にしてください。

【Nuxt 2】Prettier の導入

ビルド時に実行

ホットリロードなどビルドのタイミングで Stylelint を実行するためには、@nuxtjs/stylelint-moduleをインストールしてnuxt.config.jsに設定します。

$ npm install -D @nuxtjs/stylelint-module

export default {
  buildModules: [
    '@nuxt/postcss8',
    '@nuxtjs/stylelint-module'
  ]
}

--fixオプションを適用したい場合は、以下のようにnuxt.config.jsに設定を追加します。

export default {
  stylelint: {
    fix: true
  },
}

Visual Studio Code の設定

エディターとして Visual Studio Code（VSCode）を使用している場合、以下の拡張機能をインストールすることで、エディタ上に Stylelint のエラーや警告が表示されるようになります。

Stylelint - Visual Studio Marketplace

Stylelint を適用するためには、.settings.jsonに解析対象のファイルを指定する設定が必要です。

"stylelint.validate": ["css", "scss", "vue"],

また保存時に--fixオプションを実行するためには、追加で以下の設定が必要です。

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
}