Nuxt.jsのプロジェクトにstylelintを導入する方法 #Nuxt

Nuxt.jsのプロジェクトに、stylelintを導入する方法を紹介します。

create-nuxt-appを使用する場合

プロジェクトの作成にcreate-nuxt-appを使用する場合、リントツールのオプションでStyleLintを選択するだけで導入することができます。

Nuxt.jsのスターターテンプレートや、スクラッチからプロジェクトを作っている場合は、自分でstylelintのモジュールを追加する必要があります。

stylelintと@nuxtjs/stylelint-moduleをインストールします。

$ npm i -D stylelint @nuxtjs/stylelint-module

また、stylelintは初期状態では何もルールがないので、stylelint-config-standardというルールセットもインストールします（他のルールセットでも構いません）。

$ npm i -D stylelint-config-standard

.stylelintrc.jsonファイルを作成します。

.stylelintrc.json

{
  "extends": "stylelint-config-standard"
}

自分でルールを定義することもできますが、ここではstylelint-config-standardのルールを継承しています。

nuxt.config.jsファイルのbuildModules（Nuxt.jsのバージョンが2.9.0未満の場合はmodules）に、@nuxtjs/stylelint-moduleを追加します。

例：

nuxt.config.js

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

Sass（SCSS記法）を使う場合は、追加の設定が必要になります。

stylelint-scssをインストールします。

$ npm i -D stylelint-scss

.stylelintrc.jsonファイルのpluginsに、stylelint-scssを追加します。

.stylelintrc.json

{
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-scss"
  ]
}