目次
- Stylelintとは
- Stylelintのインストール方法
- VS Codeの拡張機能 Stylelint
- ルールの変更方法
- ルールの無効化はnullを指定
- Color
- Font family
- Named grid areas
- Function
- String
- Unit
- Property
- Keyframe declaration
- Declaration block
- Block
- block-no-empty
- Selector
- Media feature
- At-rule
- Comment
- General / Sheet
- Alpha-value
- hue-degree-notation
- Color
- color-no-hex
- Length
- Font weight
- Function
- Keyframes
- Number
- Time
- Unit
- Shorthand property
- Value
- Custom property
- Property
- Declaration
- Declaration block
Stylelintとは
CSSのコードをチェックするツール。
例えばCSSを書く際は企業によってインデントの仕方がタブだったり半角スペースだったりするが、目視確認だと見落としやすい。
Stylelintがインストールされていればターミナルでのコマンド実行時やVS Codeでのコーディング中にエラーを検出できるので、確認漏れが発生しにくくなる。
Stylelintのインストール方法
npmを使用するので、例としてターミナルで以下のコマンドを実行してファイルを必要な作成する。
mkdir css-sample; cd css-sample; touch index.css .stylelintrc.json; npm init -y;
関連ファイルを作成したらStylelintとルール(stylelint-config-standard)をインストールする。
npm i -D stylelint stylelint-config-standard
インストールしたら.stylelintrc.jsonファイルに以下の設定を書いて保存する。
.stylelintrc.jsonはルールが書かれている設定ファイルで1個ずつ記入すると時間がかかるので、とりあえずstylelint-config-standardという色々なルールがセットになったものを設定する。
{
"extends": "stylelint-config-standard"
}
次にindex.cssに以下のようなルール違反になるコードを書いてみよう。
a {
background: #eee;
color: #333
}
この状態で npx stylelint "**/*.css" を実行するとExpected a trailing semicolon (セミコロンが末尾にない)というエラーが表示される。
※ SCSSの場合は npx stylelint "**/*.scss" になる。
~/css-sample i npx stylelint "**/*.css" index.css 3:13 ✖ Expected a trailing semicolon declaration-block-trailing-semicolon
ちなみにstylelint-config-standardにはStylistic issuesがのルールが設定されている。
セミコロンが末尾にないとエラーのはStylistic issues内のdeclaration-block-trailing-semicolonに引っかかるからです。
VS Codeの拡張機能 Stylelint
いちいちチェックするたびに「npx stylelint "*/.css"」のようなコマンドを実行するのは面倒なので、コーディング中はVS Codeの拡張機能 StylelintをインストールしてVS Code上でチェックしたほうが作業効率が良いです。
stylelintをVisual Studio MarketplaceからインストールしてVS Codeで例として作成したcss-sampleフォルダをワークスペースに追加して開くだけです。
これだけでCSSファイルを開くと問題があればVS Codeの「問題」のタブに表示されます。
ルールの変更方法
stylelint-config-standardに含まれているindentationのデフォルトの設定は「半角スペース 2個」です。
これを「半角スペース 4個」に変更したい場合は.stylelintrc.jsonのファイルにルールを以下のように上書きして保存します。
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 4
}
}
インデントをタブに変更したい場合はこのようになります。
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": "tab"
}
}
ルールの無効化はnullを指定
stylelint-config-standardに設定されているルールで無効にしたいものばあればnullを指定する。
例えばcolor-hex-lengthはshortが設定されているが、CSSの16進数の色指定はPhotoshopなどでは6桁なのでshortだといちいち直さなくてはならなくなってしまう。
そんなときは"color-hex-length": nullを指定して無効にする。
{
"extends": "stylelint-config-standard",
"rules": {
"color-hex-length": null
}
}
以降はStylelintのList of rulesについて解説します。
だたし、deprecated (非推奨) は除いてあります。
Possible errors
Color
color-no-invalid-hex
無効な16進数の色指定を禁止する。
/* bad */
body {
color: #33;
}
/* good */
body {
color: #333;
}
Font family
font-family-no-duplicate-names
font-familyの重複を禁止する。
/* bad */
body {
font-family: serif, serif;
}
/* good */
body {
font-family: serif;
}
日本語と英語の指定による重複は検出されない。
body {
font-family: "メイリオ", Meiryo, serif;
}
font-family-no-missing-generic-family-keyword
総称フォント名が指定されていないとエラー。
/* bad */
body {
font-family: Meiryo;
}
/* good */
body {
font-family: Meiryo, sans-serif;
}
Named grid areas
named-grid-areas-no-invalid
grid-template-areasが正しく指定されていないとエラー。
/* bad */
a {
grid-template-areas:
"a a a"
"b b ";
}
/* good */
a {
grid-template-areas:
"a a a"
"b b b";
}
Function
function-calc-no-invalid
calcが無効な式だとエラー。
/* bad */
h1 {
width: calc(100px * 5px);
}
/* good */
h1 {
width: calc(100px * 5);
}
function-calc-no-unspaced-operator
calcの演算子の前後に半角スペースがないとエラー。
/* bad */
h1 {
width: calc(100px *5);
}
/* good */
h1 {
width: calc(100px * 5);
}
function-linear-gradient-no-nonstandard-direction
linear-gradientでdirectionの値にtoやdegなどで指定していないとエラー。
topはtoが付いていないと下から上ではなく上から下と逆になる。
/* bad */
h1 {
background: linear-gradient(top, #fff, #000);
}
h2 {
background: linear-gradient(45, #fff, #000);
}
/* good */
h1 {
background: linear-gradient(to top, #fff, #000);
}
h2 {
background: linear-gradient(45deg, #fff, #000);
}
String
string-no-newline
contentなどの文字列を途中で改行するとエラー。
/* bad */
h1::before {
content: "foo
bar";
}
/* good */
h1::before {
content: "foo bar";
}
Unit
unit-no-unknown
使用不可の単位を検出。
/* bad */
h1 {
font-size: 2en;
}
/* good */
h1 {
font-size: 2em;
}
Property
property-no-unknown
使用不可のプロパティを検出。
/* bad */
h1 {
fontsize: 2em;
}
/* good */
h1 {
font-size: 2em;
}
Keyframe declaration
keyframe-declaration-no-important
@keyframesで!importantを使用するとエラー。
/* bad */
@keyframes foo {
from {
opacity: 0;
}
to {
opacity: 1 !important;
}
}
/* good */
@keyframes foo {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Declaration block
declaration-block-no-duplicate-custom-properties
カスタムプロパティが重複していたらエラー。
/* bad */
:root {
--first-color: blue;
--first-color: green;
}
h1 {
color: var(--first-color);
}
/* good */
:root {
--first-color: blue;
--second-color: green;
}
h1 {
color: var(--first-color);
}
declaration-block-no-duplicate-properties
プロパティが重複していたらエラー。
プロパティが重複すると予期せぬ結果になる可能性があるため、設定したほうが良い。
(stylelint-config-standardには含まれていない)
/* bad */
h1 {
color: blue;
color: green;
}
/* good */
h1 {
color: blue;
}
declaration-block-no-shorthand-property-overrides
ショートハンドプロパティで上書きするとエラー。
/* bad */
h1 {
background-color: blue;
background: green;
}
/* good */
h1 {
background: green;
}
Block
block-no-empty
ブロックが空だとエラー。
/* bad */
h1 {
}
/* good */
h1 {
color: blue;
}
Selector
selector-pseudo-class-no-unknown
不明な擬似クラスだとエラー。
/* bad */
a:hober {
color: blue;
}
/* good */
a:hover {
color: blue;
}
selector-pseudo-element-no-unknown
不明な疑似要素セレクターだとエラー。
/* bad */
h1::befor {
content: "foo";
}
/* good */
h1::before {
content: "foo";
}
selector-type-no-unknown
不明なセレクターだとエラー。
/* bad */
hx {
color: green;
}
/* good */
h1 {
color: green;
}
Media feature
selector-type-no-unknown
不明なmedia featureだとエラー。
/* bad */
@media (mix-width: 700px) {
h1 {
color: blue;
}
}
/* good */
@media (min-width: 700px) {
h1 {
color: blue;
}
}
At-rule
at-rule-no-unknown
不明なat-ruleだとエラー。
/* bad */
@medea (min-width: 700px) {
h1 {
color: blue;
}
}
/* good */
@media (min-width: 700px) {
h1 {
color: blue;
}
}
Comment
comment-no-empty
/* bad */
h1 {
/* */
color: blue;
}
/* good */
h1 {
/* テキスト色を青にする */
color: blue;
}
General / Sheet
no-descending-specificity
詳細度の低い指定が詳細度の高い指定よりあとにあるとエラー。
/* bad */
body h1 {
color: green;
}
h1 {
color: blue;
}
/* good */
h1 {
color: blue;
}
body h1 {
color: green;
}
no-duplicate-at-import-rules
@importで読み込むファイルが重複しているとエラー。
/* bad */
@import 'a.css';
@import 'a.css';
/* good */
@import 'a.css';
@import 'b.css';
no-duplicate-selectors
セレクタが重複しているとエラー。
/* bad */
h1 {
color: blue;
}
h2 {
color: green;
}
h1 {
color: orange;
}
/* good */
h1 {
color: blue;
}
h2 {
color: green;
}
no-empty-source
CSSのコードが空だとエラー。
セレクタがなくてもコメントがあるとエラーにならない。
/* good */
no-extra-semicolons
セミコロン ( ; ) が2つ以上あるとエラー。
/* bad */
h1 {
color: blue;;
}
/* good */
h1 {
color: blue;
}
no-invalid-double-slash-comments
cssファイルに // のコメントがあるとエラー。
scssファイルならエラーにならない。
/* bad */
// テキスト色を青にする
h1 {
color: blue;
}
/* good */
/* テキスト色を青にする */
h1 {
color: blue;
}
no-invalid-position-at-import-rule
@importがセレクタなどよりも先に書かれてなければエラー。
/* bad */
h1 {
color: blue;
}
@import 'index.css';
/* good */
@import 'index.css';
h1 {
color: blue;
}
Limit language features
Alpha-value
alpha-value-notation
アルファ値が設定と異なるとエラー。
"number" または "percentage" が設定できるが、一般的にはnumberが使用されるのでnumberを設定すると良いだろう。
/* bad */
h1 {
opacity: 50%;
}
/* good */
h1 {
opacity: 0.5;
}
hue-degree-notation
色相の角度の指定が設定通りでなければエラー。
"angle" か "number" のどちらかを設定する。」
numberを指定すれば記入ミスを減らせる。
/* bad */
h1 {
color: hsl(200deg 20% 50%);
}
/* good */
h1 {
color: hsl(200 20% 50%);
}
Color
color-function-notation
rgba()とhsla()の書き方が "modern" or "legacy" になっているか。
現在はmodernだとIE11やAndroid 4.4以下だと反映されず、VS Codeで色が表示されないのでlegacyを設定しておいたほうが良いだろう。
{
"extends": "stylelint-config-standard",
"rules": {
"color-function-notation": "legacy"
}
}
color-named
blueなどのカラーネームを許可するか。
"never" だと許可せず、逆に "always-where-possible" を設定すると#00fがblueでないとエラーになる。
表記揺れを防ぐためにも "never" を設定したほうが良いだろう。
/* never */
h1 {
color: blue;
}
/* always-where-possible */
h2 {
color: #00f;
}
color-no-hex
#00fなどの16進数による色指定があるとエラー。
16進数なしのCSSの色指定は現実的ではないので、実際に使うことはない。
Length
length-zero-no-unitlength-zero-no-unit
0に単位をつけるとエラー。
/* bad */
h1 {
margin: 0px;
}
/* good */
h1 {
margin: 0;
}
Font weight
font-weight-notation
"numeric" or "named-where-possible" を指定することで600などの数値かboldなどの名前で付けるかをルールに追加できる。
Function
function-allowed-list
設定で許可した以外のfunctionが使用された場合はエラー。
例えば以下のように設定するとrgbaとlinear-gradient以外のfunctionはエラー。
{
"extends": "stylelint-config-standard",
"rules": {
"function-allowed-list": ["rgba", "linear-gradient"]
}
}
h1 {
transform: scale(2);
}
h2 {
color: rgba(255, 0, 0, 0.5);
}
h3 {
background: linear-gradient(to top, #000, #333);
}
function-disallowed-list
function-allowed-listとは逆に設定したfunctionがエラー。
{
"extends": "stylelint-config-standard",
"rules": {
"function-disallowed-list": ["scale"]
}
}
h1 {
transform: scale(2);
}
function-url-no-scheme-relative
//で始まり、その後にホストが続くURLはエラー。
/* bad */
h1 {
background: url(//example.com/foo.png);
}
/* good */
h1 {
background: url(https://example.com/foo.png);
}
function-url-scheme-allowed-list
設定したURLスキームだけを許可する。
以下のように設定するとhttpsでなければエラー。
{
"extends": "stylelint-config-standard",
"rules": {
"function-url-scheme-allowed-list": ["/^https/"]
}
}
/* bad */
h1 {
background: url(http://example.com/foo.png);
}
/* good */
h1 {
background: url(https://example.com/foo.png);
}
function-url-scheme-disallowed-list
function-url-scheme-allowed-listとは逆で一致するものはエラー。
{
"extends": "stylelint-config-standard",
"rules": {
"function-url-scheme-disallowed-list": ["/^http/"]
}
}
h1 {
background: url(http://example.com/foo.png);
}
Keyframes
keyframes-name-pattern
正規表現で指定したパターンの@keyframesの名前でなければエラー。
{
"extends": "stylelint-config-standard",
"rules": {
"keyframes-name-pattern": "anime-.+"
}
}
/* bad */
h1 {
animation: sample;
}
@keyframes sample {}
/* good */
h1 {
animation: anime-sample;
}
@keyframes anime-sample {}
Number
number-max-precision
小数点以下の桁数を制限する。
{
"extends": "stylelint-config-standard",
"rules": {
"number-max-precision": 2
}
}
/* bad */
.foo {
width: 33.3333%;
}
/* good */
.bar {
width: 33.33%;
}
Time
time-min-milliseconds
最小ミリ秒数を指定する。
{
"extends": "stylelint-config-standard",
"rules": {
"time-min-milliseconds": 100
}
}
/* bad */
.foo {
animation: 80ms;
}
.bar {
animation-delay: 0.01s;
}
/* good */
.foo2 {
animation: 800ms;
}
.bar2 {
animation-delay: 0.1s;
}
Unit
unit-allowed-list
許可する単位を指定する。
{
"extends": "stylelint-config-standard",
"rules": {
"unit-allowed-list": ["px", "rem"]
}
}
/* bad */
.foo {
font-size: 1em;
}
.bar {
padding: 10%;
}
/* good */
.foo2 {
font-size: 1rem;
}
.bar2 {
padding: 10px;
}
unit-disallowed-list
許可しない単位を指定する。
{
"extends": "stylelint-config-standard",
"rules": {
"unit-disallowed-list": ["vh", "em"]
}
}
/* bad */
.foo {
font-size: 1em;
}
.bar {
height: 100vh;
}
/* good */
.foo2 {
font-size: 1rem;
}
.bar2 {
padding: 100%;
}
Shorthand property
shorthand-property-no-redundant-values
省略可能なプロパティで冗長な値を許可しない。
{
"extends": "stylelint-config-standard",
"rules": {
"shorthand-property-no-redundant-values": true
}
}
/* bad */
.foo {
padding: 10px 10px 10px 10px;
}
/* good */
.bar {
padding: 10px;
}
Value
value-no-vendor-prefix
{
"extends": "stylelint-config-standard",
"rules": {
"value-no-vendor-prefix": true
}
}
/* bad */
.foo {
display: -webkit-flex;
}
/* good */
.bar {
display: flex;
}
Custom property
custom-property-pattern
カスタムプロパティのパターンを指定します。
{
"extends": "stylelint-config-standard",
"rules": {
"custom-property-pattern": "foo-.+"
}
}
/* bad */
:root {
--boo-bar: 0;
}
/* good */
:root {
--foo-bar: 0;
}
Property
property-allowed-list
許可するプロパティのリストを指定します。
{
"extends": "stylelint-config-standard",
"rules": {
"property-allowed-list": ["display", "/^background/"]
}
}
/* bad */
.foo {
visibility: hidden;
color: #000;
}
/* good */
.bar {
display: none;
background-color: #000;
}
property-disallowed-list
許可しないプロパティのリストを指定します。
{
"extends": "stylelint-config-standard",
"rules": {
"property-disallowed-list": ["display", "/^background/"]
}
}
/* bad */
.bar {
display: none;
background-color: #000;
}
/* good */
.foo {
visibility: hidden;
color: #000;
}
property-no-vendor-prefix
プロパティのベンダープレフィックスを禁止します。
value-no-vendor-prefixと同様に-webkit-touch-calloutのような「ベンダープレフィックスあり」しか存在しないプロパティの場合はエラーにならない。
{
"extends": "stylelint-config-standard",
"rules": {
"property-no-vendor-prefix": true
}
}
/* bad */
.foo {
-webkit-transform: scale(1);
}
/* good */
.bar {
transform: scale(1);
-webkit-touch-callout: none;
}
Declaration
declaration-block-no-redundant-longhand-properties
ショートハンドで記述できるものはロングハンドの記述を禁止します。
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-block-no-redundant-longhand-properties": true
}
}
/* bad */
.foo {
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
}
/* good */
.bar {
padding: 1px 2px 3px 4px;
}
declaration-no-important
!importantを禁止する。
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-no-important": true
}
}
/* bad */
.foo {
padding: 10px !important;
}
/* good */
.bar {
padding: 10px;
}
declaration-property-unit-allowed-list
宣言内で許可されるプロパティとユニットのペアのリストを指定します。
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-property-unit-allowed-list": {
"font-size": ["rem", "px"],
"/^animation/": ["s"]
}
}
}
/* bad */
.foo {
font-size: 1em;
animation-duration: 500ms;
}
/* good */
.bar {
font-size: 1rem;
animation-duration: 0.5s;
}
declaration-property-unit-disallowed-list
宣言内で許可しないプロパティとユニットのペアのリストを指定します。
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-property-unit-disallowed-list": {
"font-size": ["em", "%"],
"/^animation/": ["ms"]
}
}
}
/* bad */
.foo {
font-size: 1em;
animation-duration: 500ms;
}
/* good */
.bar {
font-size: 1rem;
animation-duration: 0.5s;
}
declaration-property-value-allowed-list
許可するプロパティと値のペアのリストを指定します。
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-property-value-allowed-list": {
"/color/": ["/^light/"]
}
}
}
/* bad */
.foo {
color: blue;
}
/* good */
.bar {
color: lightblue;
}
declaration-property-value-disallowed-list
許可しないプロパティと値のペアのリストを指定します。
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-property-value-disallowed-list": {
"/color/": ["/^blue/"]
}
}
}
/* bad */
.foo {
color: blue;
}
/* good */
.bar {
color: lightblue;
}
Declaration block
declaration-block-single-line-max-declarations
1行の宣言ブロック内の宣言の数を制限します。
{
"extends": "stylelint-config-standard",
"rules": {
"declaration-block-single-line-max-declarations": 1
}
}
/* bad */
.foo { color: blue; background: "pink"; }
/* good */
.bar {
color: blue;
background: "pink";
}
List of rulesが多すぎるので以下略
続きは公式サイトで
https://stylelint.io/user-guide/rules/list/