グローバルのStylelintでVS CodeのCSSリンターを拡張する

最近CSS変数の間違いやタイプミスが怖くて、VS Code内蔵のCSSリンターに限界を感じていた。
何かいいものはないかと探していたところ、Stylelintを使えばさまざまなプラグインを使って色々なミスを検知できるらしい。

しかし我々のチームではCSSを書く人間は限られており、CSSを複数人で書くこともあまりない状況。
package.jsonを汚すのも嫌だったので、まずはお試しでグローバルにインストールして使ってみた。

Stylelintのインストール

今回はCSS変数のミスを検知するstylelint-value-no-unknown-custom-propertiesプラグインが使えるようにすることを目指す。

まずは必要なパッケージをグローバルにインストールする。

npm install -g stylelint stylelint-value-no-unknown-custom-properties postcss

VS Code拡張機能の設定

公式のStylelint VS Code拡張機能をインストールする。
この拡張機能を有効にすると、まず現在のワークスペースにインストールされたStylelintを探し、見つからなければグローバルにインストールされたStylelintを自動的に読み込んでくれる。

本来であればnpm init stylelintで作成されたStylelint設定ファイルを使用するが、今回は個人で使うだけなのでVS Code側でstylelint.config設定に直接記述する。
stylelint.configを使用するとワークスペース上のStylelint設定ファイルは読み込まれないので注意。

{
    "stylelint.config": {
        "plugins": [
            "stylelint-value-no-unknown-custom-properties"
        ],
        "rules": {
            "csstools/value-no-unknown-custom-properties": true
        }
    }
}

参考

関連記事

コメント

この記事へのコメントはありません。

TOP