本文へスキップ

はじめに

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

CSS のリンティング​

CSS のリンティングには、標準設定 を拡張できます。

1. npm と initツール を使用して、Stylelint と設定をインストールします。

npm init stylelint

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

npx stylelint "**/*.css"

使い始めたら、カスタマイズできます。

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. プロジェクトのルートに .stylelintrc.json 設定ファイルを作成し、次の内容を入力します。

{
  "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. プロジェクトのルートに .stylelintrc.json 設定ファイルを作成し、次の内容を入力します。

{
  "extends": "stylelint-config-standard",
  "customSyntax": "postcss-lit"
}

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

npx stylelint "**/*.js"

その他のカスタム構文は、Awesome Stylelint にあります。

複数のカスタム構文の使用​

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

たとえば、CSS ファイルと Lit 要素内の CSS をリンティングするには、設定を次のように更新します。

{
  "extends": ["stylelint-config-standard"],
  "overrides": [
    {
      "files": ["*.js"],
      "customSyntax": "postcss-lit"
    }
  ]
}

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

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