Nuxt3開発環境にStylelintを導入する

これはなに

Nuxt3 で構築したWebアプリの環境にStylelint をインストールし設定する方法のメモ。 VS Codeで自動実行までさせる。

環境

Nuxt 3.4.3
Stylelint 15.6.1

インストール

Stylelintパッケージをインストールする。

npm i -D stylelint

.vueファイル内の<style>タグ内もリントできるように、以下のパッケージも入れる。

npm i -D postcss-html

Stylelintの設定presetも入れる。

npm i -D stylelint-config-standard stylelint-config-recommended-vue

Stylelintの設定

Stylelintの設定ファイル.stylelintrc.jsonを作成し、以下の内容を記入する。

.stylelintrc.json

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recommended-vue"
  ],
  "overrides": [
    {
      "files": ["**/*.vue"],
      "customSyntax": "postcss-html"
    }
  ]
}

Stylelintを実行するコマンドを、package.jsonに追加する。

package.json

{
  "scripts": {
    "lint": "stylelint --ignore-path .gitignore **/*.{css,vue}",
    "fix": "stylelint --fix --ignore-path .gitignore **/*.{css,vue}"
  },
}

これで、npm run lintおよびnpm run fixでStylelintを実行できる。

VS Codeの設定

開発にVS Codeを利用している場合は、VS Codeで保存時に修正とフォーマットを自動実行できる。

Stylelintの拡張機能をVS Codeにインストールし、以下の設定をVS Codeの設定ファイルに追記する。今回のプロジェクトのみに適用したい場合は、プロジェクトのルートディレクトリに.vscode/setting.jsonを作成し、そこに下記の内容を記入すればよい。

settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.validate": ["vue", "css", "less", "postcss"],
}

プロジェクトのルートディレクトリよりも深い階層にStylelintをインストールした場合は、stylelint.configBasedirにStylelintをインストールしたディレクトリを指定する。

settings.json

{
  "stylelint.configBasedir": "./app",
}

参考文献・URL

GitHub - nuxt-modules/stylelint: Stylelint module for Nuxt.js

Stylelint module for Nuxt.js. Contribute to nuxt-modules/stylelint development by creating an account on GitHub.

github.com

Vuetify 3+TypeScript+ESLintのWebアプリにPrettierとStyleLintを導入する

notes.nakurei.com

[Stylelint] tsxファイルの解析でCssSyntaxErrorが発生する場合の対処方法

状況stylelint ./components/**/*.tsx stylelintを tsx ファイルに対して実行すると下記のようなエラーが発生した。/components/TheHeader.tsx: When linting something other than CS

b.0218.jp