概要
ウェブ開発をする時、ウェブのスタイルを管理するためCSS(Cascading Style Sheets)を使います。このブログポストではStylelintを使ってCSS、SCSSとCSS-in-JSのコードスタイルを検査する方法に説明します。
CSSのためのStylelint
Stylelintを使ってCSSファイル中のスタイル内容を検査することができます。CSSファイル中のスタイルを検査するため次のコマンドを実行してStylelintをインストールします。
npm install --save-dev stylelint stylelint-config-standard
このようにインストールしたStylelintを使うため.stylelintrc.jsonファイルを生成して次のように修正する必要があります。
{
"extends": "stylelint-config-standard"
}
Stylelintのインストールと設定が終わったら、次のコマンドを実行してCSSファイルの内容を検査することができます。
npx stylelint "**/*.css"
また、次のようにpackage.jsonファイルを修正してStylelintを実行するコマンドを作ることができます。
{
...
"scripts": {
...
"lint:css": "stylelint --ignore-path .gitignore '**/*.css'"
},
...
}
このように作ったlint:cssコマンドは次のように実行することができます。
npm run lint:css
SCSSのためのStylelint
Stylelintを使ってSCSSファイル中のスタイル内容を検査することができます。SCSSファイル中のスタイルを検査するため次のコマンドを実行してStylelintをインストールします。
npm install --save-dev stylelint stylelint-config-standard-scss
このようにインストールしたStylelintを使うため.stylelintrc.jsonファイルを生成して次のように修正する必要があります。
{
"extends": "stylelint-config-standard-scss"
}
Stylelintのインストールと設定が終わったら、次のコマンドを実行してSCSSファイルの内容を検査することができます。
npx stylelint "**/*.scss"
また、次のようにpackage.jsonファイルを修正してStylelintを実行するコマンドを作ることができます。 또는 다음과 같이 package.json 파일을 수정하여 Stylelint를 실행할 수 있습니다.
{
...
"scripts": {
...
"lint:css": "stylelint --ignore-path .gitignore '**/*.scss'"
},
...
}
このように作ったlint:cssコマンドは次のように実行することができます。
npm run lint:css
CSS-in-JSのためのStylelint
Stylelintを使ってJS(JavaScript)ファイル中のスタイル内容を検査することができます。JSファイル中のスタイルを検査するため次のコマンドを実行してStylelintをインストールします。
npm install --save-dev stylelint stylelint-config-standard postcss-styled-syntax
このようにインストールしたStylelintを使うため.stylelintrc.jsonファイルを生成して次のように修正する必要があります。
{
"extends": "stylelint-config-standard",
"customSyntax": "postcss-styled-syntax",
}
Stylelintのインストールと設定が終わったら、次のコマンドを実行してJSファイル中の内容を検査することができます。
npx stylelint "**/*.(css|tsx)"
また、次のようにpackage.jsonファイルを修正してStylelintを実行するコマンドを作ることができます。
{
...
"scripts": {
...
"lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'"
},
...
}
このように作ったlint:cssコマンドは次のように実行することができます。
npm run lint:css
stylelint-order
CSSを作成する時、スタイルのプロパティ(Property)の順番は作成するたびに異なる場合が多いです。この時、stylelint-orderを使うとCSSのプロパティをアルファベット順に並べ替えることができます。
- stylelint-order: https://github.com/hudochenkov/stylelint-order
stylelint-orderを使うため次のコマンドを使ってstylelint-orderをインストールします。
npm install stylelint-order --save-dev
その後、.stylelintrc.jsonファイルを開いて次のように修正します。
{
"extends": ["stylelint-config-standard"],
"customSyntax": "postcss-styled-syntax",
"plugins": ["stylelint-order"],
"rules": {
"order/properties-alphabetical-order": true
}
}
今後、次のコマンドを実行するとStylelintがスタイルのプロパティがアルファベット順ではない場合エラーを表示することが確認できます。
npm run lint:css
完了
これでStylelintを使ってCSS、SCSSファイルのスタイル内容を検査する方法について見てみました。また、styled-components、EmotionのようなCSS-in-JS形式のスタイルも検査する方法について見ていました。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
