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

stylelintの導入とVS Codeの設定の方法

追記

2019/10/09
新しいSassのモジュールシステムのための設定を追記

概要

stylelintはCSSのためのLintです。Lintツールは「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。」(ESLint 最初の一歩 - Qiita)

CSSにもlintツールがあり、stylelintが一番人気があります。美しくメンテナブルなCSSを書くための 「Stylelint」の使い方とは - WPJによれば、

  • ルールのカスタマイズに柔軟性があり、自由に組み合わせられる
  • SCSSやLessにも対応している
  • 優れたドキュメントの整備

をstylelintがベストと言える理由としてあげています。他にもWordPressやGithubなどでも使われています(stylelint公式ドキュメントより)。さらに、Reactのstyled componentsといったCSS in JSにも対応しています。

本記事ではPrettierと連携させ、stylelintではエラー検出、Prettierで書式のフォーマットを行えるようにし、最後にVS Codeの設定を行うことで、保存時に自動補正するように設定する方法を説明します。各ルールについては解説しません。以下の記事が詳しいです。なお、筆者の環境ではSass記法では動作しませんでした。

stylelintのルール簡単説明(v5.4.0)

stylelintの導入方法と各ルール解説 - Qiita

対象者

  • npm scriptsの使い方がわかる
  • CSSやSCSSの基本的知識がある
  • ステップバイステップで説明しているので、Lintツールについては初心者の方向け

動作環境

  • Node 10.16.0
  • macOS Mojave

バージョン

  • stylelint 11.0.0
  • Prettier 1.18.2

最小限の設定

最初にVS Code使用している方向けにですが、保存時の自動補正を一旦オフにしておいてください。stylelintの設定と競合することがあるかもしれません。最後にstylelintの自動補正と両立する設定をします。

設定画面を開いて、設定の検索でformat on saveと入力し、Editor:Format On Saveのチェックを一旦外します。

stylelintの最小設定 for CSS

npm init -y

# 最低限のルール
npm i -D stylelint stylelint-config-recommended

SCSSの場合は次の項目へ。

stylelintはデフォルトではルールが適応されていません。自分で一から作ってもいいですが、ルールが多く、大変なので、stylelint-config-recommendedというスタイルガイドを導入します。これは最小限の設定だけオンになっています。もう少し欲しい場合はstylelint-config-standardを入れます。

インストールしたら、設定をします。ここでは、VS Codeでは補完機能が使えるので、設定ファイルは.jsonで作成します(.stylelintrc.json)が、お好みでどうぞ。ファイル名の頭に.をつけ忘れないでください。採用したスタイルガイドに応じて以下の通りに書きます。

.stylelintrc.json
{
    "extends":["stylelint-config-recommended"]
}

構成はこんな感じになっています。

├── node_modules
├── package.json
├── package-lock.json
├── .stylelintrc.json

stylelintの最小限設定 for SCSS

npm i -D stylelint stylelint-scss stylelint-config-recommended-scss

.scssが使えるようにするために、stylelint-scssを入れています。スタイルガイドにstylelint-config-recommended-scssを一旦、採用します。stylelint-config-recommended.scss向けのルールを追加したものです。以下のように書くと、stylelint-scssとスタイルガイドが適応されます。

stylelintrc.json

.stylelintrc.json
{
  "extends": "stylelint-config-recommended-scss"
}
├──node_modules
├──package.json
├──package-lock.json
├──.stylelintrc.json

動くか確認します

テストファイルの作成

style.css またはstyle.scssを作成します。

style.scss
.test {
  padding: 10px;
  margin: 0 auto;
  color: #f00;
  background-color: #fff;
}

.test{
}
├──node_modules
├──package.json
├──package-lock.json
├──.stylelintrc.json
├──style.scss //追加

npm scriptsで実行

npm scriptsでstylelintを実行して、エラーを検出してみます。

package.jsonに以下のように書きます。

package.json
 "scripts": {
    "lint:css": "stylelint  ./style.scss"
  }

ディレクトリ内のファイルを対象にしたい場合(src/scss/style.scss)

package.json
 "scripts": {
    "lint:css": "stylelint  ./src/scss/**/*.scss"
  }

The stylelint CLI · stylelintに説明されているので、カスタマイズしたい場合は参照してください。キャッシュ機能もあります。

それでは実行してみましょう。

npm run lint:css

すると、
stylelint-error.png

  • 重複しているクラス
  • 空のブロック

がエラーとして検出されました。npm scriptsに--fixというオプションをつけると、修正してくれますが、今検出されたエラーは手動で直す必要があります。今つけても自動修正はされません。ちなみに以前は--fixオプションではなく、stylefmtを使っていたようです。

Prettierとstylelintの併用

stylelintだけ書式のルールをカスタマイズすることができますが、Prettierはstylelintではできない書式の整形が可能です。また、書式のルールをPrettierに丸投げすることで、設定やルールの策定に疲弊しないようにすることができます。詳しくはPrettierの導入方法 - フロントエンド開発で必須のコード整形ツール - ICS MEDIAあたりを参照するといいと思います。

ここでは書式をPrettier, 構文やエラー検出をstylelintと分業させます。流れは以下の通りです。stylelintだけで書式のルールと構文やエラー関連を完結させる場合はこのステップは飛ばします。

  • stylelint-config-prettierでstylelintの書式の規則をオフにし、Prettierと競合しないようにする

  • stylelint-prettier Prettierをstylelintのルールとして動かすプラグイン

npm i -D prettier stylelint-config-prettier stylelint-prettier 

設定ファイルに以下のように書きます。注意点としてはstylelint-prettier/recommendedは必ず最後に書いてください。stylelint-config-で適応したルールと競合するルールを後ろからオフにするためです。

.stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended-scss",//CSSだけならstylelint-config-standard
    "stylelint-prettier/recommended"//追記
  ]
}

"stylelint-prettier/recommended"は以下の推奨の設定を自動でやってくれます。

.stylelintrc.json
{
  "plugins": ["stylelint-prettier"],
  "rules": {
    "prettier/prettier": true
  }, 
  "extends": ["stylelint-config-prettier"]
}

やっていることは

  • pluginsでプラグインを使えるようにして、rulesのところでstylelintがprettierのルールをエラーとして検出するようにしています。
  • extendsでルールのconfigを適応させ、競合するルールを無効化

Integrating with Linters · Prettierに書いている通りなので、適宜参照してください。

動作テスト

例えば以下のようなファイルを作って、npm scriptを実行します。

1. 確認用のファイルを作成

style.scss
.test {
  padding: 10px;margin: 0 auto;
  color: #f00;
background-color: #fff;
}

2. npm scriptの実行

package.json

package.json
 "scripts": {
    "lint:css": "stylelint  ./style.scss"
  }
npm run lint:css

3. エラーの確認

prettier-stylelint-error.png

prettier/prettierとちゃんとPrettierの規則も反映されています。今回は書式の問題なので、自動修正してもらいます。オプション--fixを付け足します。

package.json
 "scripts": {
    "lint:css": "stylelint --fix  ./style.scss"
  }

npmscriptsで書式の修正をcssにしている場面.gif

プロパティの順番入れ替え

順番についても指示をすることができます。ここではstylelint-config-recess-orderというBootstrapのやり方に準拠している順番の規則を取り入れます。

ちなみに、順番の入れ替えにはstylelint-orderというプラグインが必要です。stylelint-order自体はアルファベット順に並び替える機能があります。

1. インストール

npm i -D stylelint-order stylelint-config-recess-order

2. 設定ファイルの編集

.stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-config-recess-order",//ここに追記。
    "stylelint-prettier/recommended"
  ]
}

このルールは主にポジション, ボックスモデル関連、その他の順番でプロパティを整列させます。動作確認をしてみましょう。

以下の例ではエラーになります。このルール上での正しい順番は

  1. padding
  2. margin
  3. color
  4. background-color

です。

動作テスト

以下の確認用ファイルを作り、npm scriptを実行します。

style.scss
.test {
  padding: 10px;
  background-color: #fff;
  margin: 0 auto;
  color: #f00;
}
npm run lint:css

すると、以下のように順番が修正されます。

npmscriptsで順番の入れ替え.gif

他のconfig

今回は最低限の規則だけの導入でしたが、他にもいろいろあります。注意点としてはstylelint-orderを組み込んでいるかどうかです。組み込んでいるものとorder-config系を一緒に入れると競合します。

stylelint-orderが組み込まれていないconfig

stylelint/stylelint-config-recommended: The recommended shareable config for stylelint(CSS)

最低限のルールが適応されたconfig.

stylelint/stylelint-config-standard: The standard shareable config for stylelint(CSS)

一番人気のあるconfig.これ単体だけではSCSSに対応していないので、次のstylelint-config-recommended-scssと組み合わせる例を見かけます。

.stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-config-standard",
    "stylelint-prettier/recommended"
  ]
}

kristerkari/stylelint-config-recommended-scss: The recommended shareable SCSS config for stylelint(SCSS)

stylelint-config-recommended + scss用に少しの設定追加したもの

WordPress-Coding-Standards/stylelint-config-wordpress: WordPress CSS & SCSS Coding Standards shareable config for stylelint(CSS/SCSS)

WordPressのコーディング規則。

stylelint-config-recommended, stylelint-config-recommended-scssをカスタマイズ。

stylelint-orderが組み込まれているconfig

bjankord/stylelint-config-sass-guidelines: ⚙ A stylelint config based on https://sass-guidelin.es/(SCSS)

sass-guidelin.esに基づいたルールを適応。orderの規則(アルファベット順)が含まれている。

twbs/stylelint-config-twbs-bootstrap: Stylelint config for Bootstrap(CSS/SCSS)

Bootrapのスタイルガイド。stylelint-config-standardをカスタマイズしている。順番は機能ごとに。

order config

hudochenkov/stylelint-order: A plugin pack of order related linting rules for stylelint.

順番を入れ替えるのに必要。デフォルトでアルファベット順。

ream88/stylelint-config-idiomatic-order: stylelint + idiomatic-css = ❤️

ポジション=>ボックスモデル関連=>その他.の順番。 necolas/idiomatic-css: Principles of writing consistent, idiomatic CSS.のやり方を踏襲。

stormwarning/stylelint-config-recess-order: 🗂️ Recess-based property sort order for Stylelint.

Bootstrapのやり方に準拠。

事例

欧州委員会ではsass-gudelines + stylelint-config-standardの組み合わせ。

SCSS coding conventions | EC System

VS Codeと組み合わせる

prettier.stylelintIntegrationは非推奨に

今まではnpm scriptsでエラーの検出と自動修正をやりましたが、保存するたびにstylelintの修正が動く(stylelint --fix)ようにします。従来のやり方ではPrettierの拡張機能を使っていましたが、バグの問題でprettier.stylelintIntegrationという設定が非推奨になりました。Prettierの拡張機能の開発チームはstylelintで自動修正を行うよう求めています。

しかし、今まで使われていたstylelintの拡張機能(shinnn.stylelint)には保存時の自動修正機能がありませんでした。そこでstylelint-plus(hex-ci.stylelint-plus)という自動修正機能がついた拡張機能が出ましたので、それを使います。Prettierの拡張は使用しませんので、stylelintのためだけに入れる必要はありません。

stylelint-plus - Visual Studio Marketplace

またはコマンドでもインストールできます。

code --install-extension hex-ci.stylelint-plus

VS Codeの設定

やることは以下の通りです。

  • 競合するVS Codeの補正機能と検証機能を止めます
  • stylelintの拡張機能の設定で自動補正機能をオンにします

settings.jsonファイルを開きます。開き方は
- コマンド + ,で設定画面を開く
- 右上のアイコンをクリック

1b8c0ebc-9770-6c4d-f660-b295d4a81d00.gif

とりあえず、以下の設定を貼り付けます。

settings.json
{
  "css.validate": false,
  "scss.validate": false,
  "stylelint.autoFixOnSave": true,
  "[css]": {
    "editor.formatOnSave": false
  },
  "[scss]": {
    "editor.formatOnSave": false
  }
}

設定について説明すると、

validateで標準の検証機能をオフにします。

標準の自動補正機能を 止めるために、"editor.formatOnSave": falseにしまうと、CSS以外の自動修正もストップさせてしまいます。他では標準の補正を使いたいという場合、使えなくなってしまいます。そこで以下のように書くことで、.css, .scssの場合のみ、VS Codeの保存時の自動修正を止めています。

settings.json
  "[css]": {
    "editor.formatOnSave": false
  },
  "[scss]": {
    "editor.formatOnSave": false
  }

"stylelint.autoFixOnSave": trueで先に導入した拡張機能による自動補正が使えます。これで保存するたびに綺麗にフォーマットされます。

記事の冒頭で自動修正をオフにした方はここでオンに戻してください。

動作確認

style.scss
.test {
  padding: 10px;
  background-color: #fff;
 margin: 0 auto;
  color: #f00;
}

コマンド(Windowsはctrl) + S で保存してみます。二回押す必要がありますが、修正されました。
また、使用しているconfigによってはエラーが出る場合があります。その場合は拡張機能を使わないか、他のconfigを使うといいと思います。stylelint-config-standardstylelint-config-sass-guidelinesでは筆者の環境ではエラーは出ていません。

追記: Sassの新しいモジュールシステムに対応させる

stylelint-scssのissuesで新しい記法である@use@forwardでエラーが出ないようにする設定が紹介されています。
Support new Sass module syntax at-rules · Issue #366 · kristerkari/stylelint-scss

stylelintrc.json
{
 "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["use", "forward"]
      }
    ]
 }
}
y-w
https://twitter.com/YuhtaW
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
ユーザーは見つかりませんでした