More than 5 years have passed since last update.

stylelint: モダンCSSリンター

Posted at




ルール名 説明
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のように、カスタマイズ性に富んでいることがわかります。


stylelint CSS Lint scss-lint CSSComb
172 38 62 26




$ 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'"




  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.


  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.


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


  A filename to assign stdin input.

--ignore-disables, --id

  Ignore styleline-disable comments.

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

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


  Path to a JS file exporting a custom formatting function.

--quiet, -q

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


  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.



Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up