stylelintを基本からまとめてみた【入門】

styelintとは？

チーム全体で使うCSSのエラーを回避し、コードの一貫性を高めるために役立つ モダンなlinterで、スタイルのエラーを自動的に修正してくれ、使用したいルールだけを有効にし、好みに合わせて設定することができる。

環境構築

stylelintをインストール

// CSS の場合
npm i --save-dev stylelint-config-standard
// SCSS の場合
npm i --save-dev stylelint-config-standard-scss

プロジェクトのルートに設定ファイル.stylelintrc.js を作成

touch .stylelintrc.json

設定ファイルにルールを追加

.stylelintrc.js

module.exports = {
     // CSS の場合
    "extends": "stylelint-config-standard",
     // SCSS の場合
    "extends": "stylelint-config-standard-scss",
}

Prettier と stylelintを併用して使う場合

prettier はコードのフォーマットを管理するために使用される。
prettier があるフォーマットを設定すると、stylelint はエラーとして検知して prettier と衝突することがある。
『stylelint-config-prettier』を設定に含めることで、衝突するフォーマットを無効にすることができる。
※ この設定は、ルールが上書きされないように、extends の最後に参照される設定にすること

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier",
  ]
};

参考サイト

CSSをメンテナブルにするstylelint入門
【CSS】CSS や SCSS を整えるリントツールである stylelint の紹介
CSSをメンテナブルにするstylelint入門