JavaScript
stylelint
nuxt.js

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

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


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

stylelintを使うためのパッケージをインストールします。

$ npm i -D stylelint stylelint-webpack-plugin

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

$ npm i -D stylelint-config-standard


設定ファイルを作成

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


.stylelintrc.json

{

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

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


Nuxt.jsの設定を追加

nuxt.config.jsファイルに、ソースコードの更新時に自動でリントを実行するための設定を追加します。

例:


nuxt.config.js

const Stylelint = require('stylelint-webpack-plugin')

module.exports = {
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.plugins.push(new Stylelint({
files: '**/*.{css,vue}'
}))
}
}
}
}


ここでは、拡張子がcssvueのファイルをリント対象にしています。


Sass(SCSS記法)を使う場合

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


Nuxt.jsの設定を更新

リント対象にscssを追加します。

例:


nuxt.config.js

const Stylelint = require('stylelint-webpack-plugin')

module.exports = {
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.plugins.push(new Stylelint({
files: '**/*.{css,scss,vue}'
}))
}
}
}
}



参考リンク