Zenn
🤖

stylelintユーザガイドーはじめに

に公開
CSS
Sass
Scss
tech

内容の目的

本内容は、Stylelintユーザガイドーはじめに を翻訳し、個人活用のために整理しています。

はじめに

共有設定を拡張することで、すぐに始めることができます。

CSS のリント

CSS をリントするには、標準設定を拡張できます。

1. npm と 初期化ツール を使って、Stylelint と設定をインストールします:

npm init stylelint

2. プロジェクト内のすべての CSS ファイルに対して Stylelint を実行します:

npx stylelint "**/*.css"

セットアップが完了したら、Stylelint をカスタマイズできます。

CSS ライクな言語やコンテナ内の CSS のリント

コミュニティ設定を拡張することで、以下をリントできます:

  • CSS ライクな言語（例: SCSS, Sass, Less）
  • コンテナ内の CSS（例: HTML, CSS-in-JS, Vue SFC など）

たとえば、SCSS をリントする場合は SCSS コミュニティ設定を拡張できます。この設定には以下が含まれます:

1. npm を使って Stylelint と設定をインストールします:

npm install --save-dev stylelint stylelint-config-standard-scss

2. プロジェクトのルートに、以下の内容で stylelint.config.js 設定ファイルを作成します:

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard-scss"]
};

3. プロジェクト内のすべての SCSS ファイルに対して Stylelint を実行します:

npx stylelint "**/*.scss"

さらに多くのコミュニティ設定は Awesome Stylelint で見つけることができます。

カスタム構文を直接使用する

希望する言語やコンテナ用の共有設定がない場合は、適切なカスタム構文をインストールし、自分で customSyntax オプション を使用できます。

例えば、Lit エレメント 内の CSS をリントする場合。

1. npm を使って、Stylelint、標準設定、Lit 用カスタム構文 をインストールします:

npm install --save-dev stylelint stylelint-config-standard postcss-lit

2. プロジェクトのルートに、以下の内容で stylelint.config.js 設定ファイルを作成します:

/** @type {import('stylelint').Config} */
export default {
  extends: "stylelint-config-standard",
  customSyntax: "postcss-lit"
};

3. プロジェクト内のすべての JavaScript ファイルに対して Stylelint を実行します:

npx stylelint "**/*.js"

さらに多くのカスタム構文は Awesome Stylelint で見つけることができます。

複数のカスタム構文を使う場合

複数の言語やコンテナをリントしたい場合は、overrides プロパティを使用できます。

例えば、CSS ファイルと Lit Elements 内の CSS の両方をリントしたい場合は、設定を次のように更新します:

/** @type {import('stylelint').Config} */
export default {
  extends: ["stylelint-config-standard"],
  overrides: [
    {
      files: ["*.js"],
      customSyntax: "postcss-lit"
    }
  ]
};

そして、CSS と JavaScript ファイルの両方に対して Stylelint を実行します:

npx stylelint "**/*.{css,js}"

目次に戻る

Discussion