バージョン14系。
前提
情報源
手順
プロジェクトを作成する
PJ_NAME=hello-style-lint mkdir $PJ_NAME cd $PJ_NAME
インストールする
npm install --save-dev stylelint stylelint-config-standard
ファイルを確認する。
$ ls
node_modules package-lock.json package.json
$ cat package.json { "devDependencies": { "stylelint": "^14.6.1", "stylelint-config-standard": "^25.0.0" } }
設定ファイルを作成する
touch .stylelintrc.json
テキストエディタで開く。
vim .stylelintrc.json
以下のような内容にする。
.stylelintrc.json
{ "extends": "stylelint-config-standard" }
テスト用CSSファイルを作成する
style.css
body { color: #1234567; /* 6桁の16進数であるべきなのに7桁ある */ font-size: 16px /* 末尾のセミコロンがない */ disply: block; /* タイポ。正しくはdisplay */ }
実行する
npx stylelint "**/*.css"
$ npx stylelint "**/*.css" style.css 3:22 ✖ Missed semicolon CssSyntaxError
あれ、セミコロンしか表示されない。
セミコロンを修正して再度実行すると、以下のようなエラーが出た。
style.css 2:5 ✖ Expected indentation of 2 spaces indentation 2:12 ✖ Unexpected invalid hex color "#1234567" color-no-invalid-hex 3:5 ✖ Expected indentation of 2 spaces indentation 4:5 ✖ Unexpected unknown property "disply" property-no-unknown 4:5 ✖ Expected indentation of 2 spaces indentation 7:1 ✖ Expected no more than 1 empty line max-empty-lines
- インデント幅が
2でない indentation - 無効な16進数カラー color-no-invalid-hex
- 未知のプロパティ
disply検出 property-no-unknown - 空行はひとつまでです（ファイル末尾にムダな空行がある） max-empty-lines
とりあえずファイル末尾の空行を削除したらmax-empty-linesエラーは消えた。
インデントはスペース4字にしたいんだけど。どうしたら設定できるの？ 以下のようにやったらできた。
.stylelintrc.json
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 4
}
}
$ npx stylelint "**/*.css" style.css 2:12 ✖ Unexpected invalid hex color "#1234567" color-no-invalid-hex 4:5 ✖ Unexpected unknown property "disply" property-no-unknown
インデントエラーが消えた。OK。残っているエラーを参考にしてCSSファイルを以下のように修正した。
body { color: #123456; /* 6桁の16進数であるべきなのに7桁ある */ font-size: 16px; /* 末尾のセミコロンがない */ display: block; /* タイポ。正しくはdisplay */ }
再実行するとエラーがなにも表示されず終了した。
$ npx stylelint "**/*.css"
OK！ これで問題なくCSSコードを書けた。
自動修正する--fix
--fixオプションを付与すると、可能なかぎり自動修正してくれるらしい。
というわけで、以下のような問題あるコードを渡して、自動修正してくれるかどうか確認してみた。
style.css
body { color: #1234567; /* 6桁の16進数であるべきなのに7桁ある */ font-size: 16px /* 末尾のセミコロンがない */ disply: block; /* タイポ。正しくはdisplay */ }
あれ、変わってないじゃん。修正してくれてないやん。
$ npx stylelint --fix "**/*.css" style.css 2:12 ✖ Unexpected invalid hex color "#1234567" color-no-invalid-hex 4:5 ✖ Unexpected unknown property "disply" property-no-unknown
$ cat style.css body { color: #1234567; /* 6桁の16進数であるべきなのに7桁ある */ font-size: 16px /* 末尾のセミコロンがない */; disply: block; /* タイポ。正しくはdisplay */ }
をよく読むとpostcss-safe-parserが必要とある。えー、PostCSSと連携しなくちゃいけないの？
PostCSSをインストールする
npm install -D postcss-cli
postcss-safe-parserをインストールする
npm install -D postcss-import
npm install -D postcss-safe-parser
postcss.config.js
module.exports = { plugins: [ require('postcss-safe-parser')(), ] }
再実行するも、変化なし。えー。
$ npx stylelint --fix "**/*.css" style.css 2:12 ✖ Unexpected invalid hex color "#1234567" color-no-invalid-hex 4:5 ✖ Unexpected unknown property "disply" property-no-unknown $ cat style.css body { color: #1234567; /* 6桁の16進数であるべきなのに7桁ある */ font-size: 16px /* 末尾のセミコロンがない */; disply: block; /* タイポ。正しくはdisplay */ }
ならば直接postcssコマンドを叩いてみる。
pcss=./node_modules/.bin/postcss input=./style.css output=./style-format.css $pcss $input -o $output
なんか怒られた。はあ？ 未定義だぁ？
Error: PostCSS received undefined instead of CSS string
at new Input (/tmp/work/hello-style-lint/node_modules/postcss/lib/input.js:24:13)
at safeParse (/tmp/work/hello-style-lint/node_modules/postcss-safe-parser/lib/safe-parse.js:6:15)
at Object.<anonymous> (/tmp/work/hello-style-lint/postcss.config.js:3:35)
at Module._compile (node:internal/modules/cjs/loader:1103:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.search (/tmp/work/hello-style-lint/node_modules/lilconfig/dist/index.js:126:43)
ググったけど前提知識が足りなすぎてさっぱりわからん。sass-loaderがどうとか言ってんだが、webpackがどうとかいってPostCSSの話じゃない。どうすりゃいいのよ。
残念ながら自動修正はできなかった。クソが。
所感
こういう依存関係や設定ファイルが難しいから嫌なんだよ。コマンド一発で実行できるようにしてくれや。
そんなことを調べている間に手でコード修正したほうが早いっつーの！ この役立たずめが！
どうせ今どうにか成功したって、バージョンがすぐに変わって設定ファイルとかインストールパッケージ名とかが変わってエラーが出るようになるんだろ？ なんのためのパッケージマネージャや設定ファイルなんだよハゲ！ バカ！ アホ！ もっと簡単で確実に動作するようにしてくれ。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
- Node.js 16.14.2
- npm 8.5.0
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
