2022年5月3日りあクト！第6章 stylelint （p.74~)

stylelintとは

stylelintはCSSのlinterです。

使用するには4つのパッケージをインストールします。

stylelint ... stylelint本体です。
stylelint-config-standard ... stylelint公式による標準の共有設定です。
stylelint-order ... stylelintの並び順に関するルールセットのプラグインです。
style-config-recess-order ... RECESSに基づくCSSの並び替えのための共有設定です。

yarn add -D stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order

(typesync) ← 型定義ファイルの読み込みはpackage.jsonのpreinstallに設定してあるのでインストール前に自動で走ります。

yarn  ← yarn installの省略

stylelint導入後の設定

プロジェクトルートに.stylelintrc.jsを配置し、設定を追記します。

.stylelintrc.js

  module.exports = {
    // extendsに共有設定を書く
    extends: [
      'stylelint-config-standard',
      // リセスはTwitterが提供していたCSSのコード品質ツール
      // リセスをstylelint-orderに移植したものが以下の設定。
      'stylelint-config-recess-order'
    ],
    // pluginsにプラグインルールを書く
    plugins: [
      'stylelint-order'
    ],
    ignoreFiles: [
    // node_modulsディレクトリ配下にあるCSSを対象外する。
      '**/node_modules/**'
    ],
    // rulesはリンターが何を探し、何を訴えるかを決定します。
    // Stylelint には 170 以上のルールが組み込まれています。 
    // デフォルトではどのルールもオンになっておらず、
    // デフォルト値もありません。各ルールを有効にするには、明示的に設定する必要があります。
    // キーはルールの名前、値はルールの設定です。
    rules: {
      'string-quotes': 'single'
    }
  };

stylelint-config-standardは公式が提供している標準の共有設定です。
今回採用しませんでしたがstylelint-config-recommendedの方が広く使用されています。
style-config-standardは、stylelint-config-recommendedを拡張しつつGoogle や Airbnb が定めた CSS スタイルガイドを適用した厳格な設定です。

VSCodeのsettings.jsonに設定する

設定を追加します。

{
+ "css.validate": false,
+ "less.validate": false,
+ "scss.validate": false,
  "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
+ "source.fixAll.stylelint": true
  },
  "editor.formatOnSave": false,
  ︙

package.jsonにnpm scriptsの登録をする

ESlintやPrettierとまとめて走るようにします。

  "scripts": {
...
    "lint": "npm run -s lint:style; npm run -s lint:es",
    "lint:fix": "npm run -s lint:style:fix && npm run -s lint:es:fix",
    "lint:es": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
    "lint:es:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
    "lint:conflict": "eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'",
    "lint:style": "stylelint 'src/**/*.{css,less,sass,scss}'",
    "lint:style:fix": "stylelint --fix 'src/**/*.{css,less,sass,scss}'",
    "preinstall": "typesync || :"
  },

ESLintは"lint:es"というオプション名に変更し、stylelintは"stylelint:es"としてオプションを追加します。
元々"lint"として設定していたESLintのオプションはlint:esとstylelint:esオプションをまとめて実行出来るように変更します。

--fix

ESLint や stylelint を --fix モードで走らせると、簡単なルール違反は自動で修正してくれますが、直しきれない複雑なものは手動で修正する必要があります。

Git Hooks

特定のアクションが発生したときに任意のスクリプトを走らせるGitのしくみです。 Git Hooksを管理するsimple-Git-hooksというツールがあります。 huskyというツールの方が有名です。しかし、5系以降に複雑な設定が増えた為、現在はsimple-Git-hooksも使われています。

上記のツールを用いてGitのコミットやプッシュ前後にLintのスクリプトを実行する設定をすることが出来ます。

参考

りあクト！ TypeScriptで始めるつらくないReact開発第3.1版【Ⅱ. React基礎編】 p.74~

Configuration

６時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。