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

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

stylelint: モダンCSSリンター

More than 3 years have passed since last update.




ルール名 説明
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.



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


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