8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-10-22

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ファイルを作成します。

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

参考リンク

8
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?