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"
]
}