Help us understand the problem. What is going on with this article?

stylelint入門

stylelint とは

  • stylelint
  • 160種類以上のルールをカスタマイズできるリンター
  • デフォルトでは、すべてのルールが無効化されているため、少しずつルールを追加していける
  • 予め定義されたルールもあるので、それをベースにルールをカスタマイズすることもできる
  • プラグインにより新しいルールを追加することができる
  • 一部のルールは自動修正(fixオプション)に対応している
  • PostCSSプラグインとしても動作するのでタスクランナーに組み込みやすい

とりあえず使ってみる

初期化

$ npm init -y
$ npm install --save-dev stylelint stylelint-config-standard

設定ファイル作成

.stylelintrc.json
{
  "extends": [
    一般的な設定を継承する
    "stylelint-config-standard"
  ],
  "rules": {
    ルールを上書きする
    "block-no-empty": null,
  }
}

Lint

$ npx stylelint src/**/*.css
# 自動修正(一部ルールのみ対応)
$ npx stylelint src/**/*.css --fix

プロパティの並び順をいい感じにする

$ npm install --save-dev stylelint-config-recess-order
.stylelintrc.json
{
  "extends": [
    "stylelint-config-standard",
+     "stylelint-config-recess-order"
  ],
  "rules": {
    ルールを上書きする
    "block-no-empty": null,
  }
}

SCSSにLintをおこなってみる

初期化

$ npm init -y
$ npm install --save-dev stylelint stylelint-config-recommended-scss stylelint-scss

設定ファイル作成

.stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended-scss"
  ],
  "plugins": [
    SCSS用のルールを追加する
    "stylelint-scss"
  ],
  "rules": {
    ルールを上書きする
    "block-no-empty": null,
  }
}

Lint

$ npx stylelint src/**/*.scss --syntax scss
# 自動修正(一部ルールのみ対応)
$ npx stylelint src/**/*.scss --syntax scss --fix

サンプルコード

https://github.com/ohnaka0410/Stylelint-Sample

Why do not you register as a user and use Qiita more conveniently?
  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
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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