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

stylelint: モダンCSSリンター

More than 3 years have passed since last update.

CSSにおいても、JavaScriptのような一般的なプログラミング言語と同様に、コードをリントすることで、チーム開発において記述を統一することができたり、実行時のエラーを事前に防ぐことができます。今日は、PostCSS製のモダンなCSSリンターである、stylelintについて説明します。

stylelintのルール

stylelintで設定できるルールの一覧を見てみましょう。

http://stylelint.io/user-guide/rules/

ルール名 説明
at-rule-name-case @ルール名が大文字か小文字か
color-hex-length HEX指定のカラーコードを短縮するかどうか
color-no-invalid-hex invalidなHEXカラーコードを許可するかどうか
indentation インデントサイズ
selector-max-specificity セレクタの最大詳細度

など、これらのルールを細かく指定することで、より自分好みのコーディング規約に違反しているかどうかを機械的に検知することができます。コードレビューの負担を減らすためにも、リンターの導入は検討されるべきです。

現在の最新バージョンである v7.6.0 には、172個のルールがあります。CSS、またはSassなどのプリプロセッサーのためのリンターはいくつかありますが、その中でもstylelintのルールセット数が圧倒的に多く、JavaScriptのコードリンターであるESLintのように、カスタマイズ性に富んでいることがわかります。

CSSリンターのルール数:

stylelint CSS Lint scss-lint CSSComb
172 38 62 26

また、stylelintはPostCSS製(パーサーとしてPostCSSを使っている)ため、CSSだけでなく、SassやLESS等のPostCSSがパース可能なシンタックス全てに対してリントすることが可能なのも特徴です。

stylelintの使い方

まずは、npmからstylelintをインストールします。

$ npm install -D stylelint

stylelintもPostCSSのプラグインとして実装されていますが、Autoprefixerと同様に単体でも実行することができます。僕はstylelintは実行するPostCSSのプラグインの一部としてではなく、それ単体で(コマンドラインツールとして)使うことが多いです。コードリントという行為は、PostCSSによるビルドフローの中に入るものではなく、ファイル保存や git commit などをフックにそれだけで自動で実行してほしいからです。

package.json に以下のような script を追加して実行しています。

{
  "scripts": {
    "stylelint": "stylelint --config .stylelintrc --ignore-path .stylelintignore 'src/styles/**/*.css'"
  }
}

stylelintのオプション:

Options:

--config

  Path to a specific configuration file (JSON, YAML, or CommonJS), or the
  name of a module in node_modules that points to one. If no --config
  argument is provided, stylelint will search for configuration files in
  the following places, in this order:
    - a stylelint property in package.json
    - a .stylelintrc file (with or without filename extension:
      .json, .yaml, and .js are available)
    - a stylelint.config.js file exporting a JS object
  The search will begin in the working directory and move up the directory
  tree until a configuration file is found.

--config-basedir

  An absolute path to the directory that relative paths defining "extends"
  and "plugins" are *relative to*. Only necessary if these values are
  relative paths.

--ignore-path, -i

  Path to a file containing patterns that describe files to ignore. The
  path can be absolute or relative to process.cwd(). By default, stylelint
  looks for .stylelintignore in process.cwd().

--syntax, -s

  Specify a non-standard syntax. Options: "scss", "less", "sugarss".
  If you do not specify a syntax, non-standard syntaxes will be
  automatically inferred by the file extensions .scss, .less, and .sss.

--custom-syntax

  Module name or path to a JS file exporting a PostCSS-compatible syntax.

--stdin-filename

  A filename to assign stdin input.

--ignore-disables, --id

  Ignore styleline-disable comments.

--formatter, -f               [default: "string"]

  The output formatter: "json", "string" or "verbose".

--custom-formatter

  Path to a JS file exporting a custom formatting function.

--quiet, -q

  Only register warnings for rules with an "error"-level severity (ignore
  "warning"-level).

--color
--no-color

  Force enabling/disabling of color.

--report-needless-disables, --rd

  Report stylelint-disable comments that are not blocking a lint warning.
  If you provide the argument "error", the process will exit with code 2
  if needless disables are found.

--version, -v

  Show the currently installed version of stylelint.

今日はstylelintとは何かということと、その実行方法について述べました。

明日はstylelintの設定ファイルの書き方を説明します。

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.
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
ユーザーは見つかりませんでした