Edited at

Nuxt.jsのプロジェクトに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記法)を使う場合

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


パッケージをインストール

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

$ npm i -D stylelint-scss


設定ファイルを更新

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


.stylelintrc.json

{

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


参考リンク