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のスクリプトを実行する設定をすることが出来ます。