Nuxt.jsのプロジェクトに、stylelintを導入する方法を紹介します。
create-nuxt-appを使用する場合
プロジェクトの作成にcreate-nuxt-appを使用する場合、リントツールのオプションでStyleLintを選択するだけで導入することができます。
create-nuxt-appを使用しない場合
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
ファイルを作成します。
{
"extends": "stylelint-config-standard"
}
自分でルールを定義することもできますが、ここではstylelint-config-standardのルールを継承しています。
プロジェクトにモジュールを追加
nuxt.config.js
ファイルのbuildModules
(Nuxt.jsのバージョンが2.9.0
未満の場合はmodules
)に、@nuxtjs/stylelint-module
を追加します。
例:
export default {
buildModules: [
'@nuxtjs/stylelint-module'
]
}
Sass(SCSS記法)を使う場合
Sass(SCSS記法)を使う場合は、追加の設定が必要になります。
パッケージをインストール
stylelint-scssをインストールします。
$ npm i -D stylelint-scss
設定ファイルを更新
.stylelintrc.json
ファイルのplugins
に、stylelint-scss
を追加します。
{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-scss"
]
}