Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What is going on with this article?
@morishitter

stylelintの設定ファイルの作り方

More than 3 years have passed since last update.

昨日は「stylelintとは何か」ということと、既存のCSSリンターと比べたときの特徴、CLIからstylelintを実行する方法について述べました。今日は、stylelintの数多くあるルールを組み合わせて設定ファイルを作る方法について述べます。

stylelintの設定ファイル

stylelintの設定のオブジェクトは cosmiconfig というパッケージを使って読み込まれます。stylelintの場合、以下のファイル名、形式で設定ファイルを作成できます。僕は、JSON形式で .stylelintrc という名前で作ることが多いです。

  • package.json 内の stylelint プロパティに記述する
  • .stylelintrc ファイル(JSON or YAML)
  • JSオブジェクトとして module.exports された stylelint.config.js ファイル

.stylelintrc 例:

{
  "rules": {
    "color-hex-length": "short",
    "color-no-invalid-hex": true,
    "custom-property-no-outside-root": true,
    "indentation": 2,
    "length-zero-no-unit": true,
    "media-feature-name-no-vendor-prefix": true,
    "number-leading-zero": "never",
    "selector-root-no-composition": true,
    "string-quotes": "single"
  }
}

次に設定オブジェクトのプロパティを見てみましょう。stylelintのルール名とそのオプションを、上記のように rules の中に指定します。

stylelintの設定ファイル集

npmで、stylelint-config のキーワードを付けて登録されているパッケージは、stylelintの設定集です。その中でも、以下のパッケージが有名です。

stylelintのルールは今約170個あり、それらを1つずつ調べて自分で1から設定ファイルを作るのは骨が折れます。
そこで、 stylelint-config-* パッケージを継承することで、公開されている設定ファイル集をベースに自分のプロジェクトでの調整を加えることができます。

{
  "extends": "stylelint-config-primer",
  "rules": {
    "indentation": 2,
    "string-quotes": "double"
  }
}

上記の例では、stylelint-config-primerextends し、インデントサイズと文字列のクォーテーションを変更しています。

stylelintのプラグイン

stylelintのルールは、全てPostCSSのプラグインとして実装されています。そこで開発者は、独自のstylelintのルールを作って、それをstylelintのプラグインとして公開することができます。

例として、SassのSCSS記法のための、stylelint-scss というプラグインがあります。

{
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "scss/dollar-variable-pattern": "^foo",
    "scss/selector-no-redundant-nesting-selector": true
  }
}

plugins プロパティで使いたいプラグインを指定することで、rules の中でその設定をすることができます。

ちなみに、facebookはstylelintの独自のルールを作って、CSSコードのクオリティを担保しているそうです。


今日はstylelintの設定ファイルの作り方について説明しました。設定ファイル集やプラグインを使うことで、さらにカスタマイズしやすくなっています。

34
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
34
Help us understand the problem. What is going on with this article?