[Linter] Stylelint

2022-03-12 hit count image

Stylelintを使ってCSS, SCSSファイルのコーディングスタイルとCSS-in-JSのコードスタイルを検査してみましょう。

概要

ウェブ開発をする時、ウェブのスタイルを管理するためCSS(Cascading Style Sheets)を使えます。今回のブログポストではStylelintを使ってCSS, SCSS, CSS-in-JSのコードスタイルを検査する方法について説明します。

ここで紹介するソースコードは下記のリンクで確認できます。

Nodeのインストール

Stylelintを使うためにはNodeをインストールする必要があります。各OSに合わせてNodeをインストールします。s

macOS

Homebrewはマックにパッケージをインストールしたり、管理するマック専用のパッケージ管理者です。Homebrewを使ってマックに必要なパッケージを簡単にインストールすることができます。次のコマンドを実行してHomebrewをインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールしたら、次のコマンドを実行してうまくインストールされたか確認します。

brew --version

もし、バージョンが見えない場合、ターミナルを終了して、再び起動して実行してみます。すでにHomebrewがインストールされた方は下記のコマンドを実行してNodeをインストールします。

brew install node

Windows

ウィンドウズではChocolateyと言うパッケージマネージャーを使います。管理者権限でCMDまたはPowershellを開いて、下記のコマンドを実行してChocolateyをインストールします。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

インストールが完了されたら、次のコマンドを実行してインストールができたか確認します。

choco –version

Chocolateyのバージョンが表示されない場合は、CMDまたはPowershellを終了して再び実行します。Chocolateyがインストールされたら下記のコマンドを実行してNodeをインストールします。

choco install -y nodejs.install

CSSのためのStylelint

CSSファイルを検査するため、Stylelintをインストールして使う方法について説明します。

CSSのためStylelintのpackage.json生成

StylelintはNodeの開発環境の上で動けます。したがって、Nodeのパッケージを管理するためのpackage.jsonファイルを生成する必要があります。次のコマンドを実行してpackage.jsonファイルを生成します。

npm init

コマンドを実行すると、次のように色んな質問が出ます。特に変更したいものがない場合は、全ての質問にEnterを入力します。

package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

その後、次のようにpackage.jsonファイルが生成されることが確認できます。

{
  "name": "stylelint-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

CSSのためのStylelintのインストール

Stylelintを使ってCSSを検査したい場合は、下記のコマンドを使ってStylelintと追加で必要なライブラリをインストールします。

npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier

CSSのためのStylelintの設定

このようにインストールしたStylelintを使うために.stylelintrc.jsonファイルを生成して次のように修正する必要があります。

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"]
}

CSSのためのStylelintの実行スクリプト

Stylelintを使って全てのCSSファイルを検査するためにはpackage.jsonファイルを次のように修正します。

{
  ...
  "scripts": {
    "lint:css": "stylelint --ignore-path .gitignore '**/*.css'",
  },
  ...
}

--ignore-path.gitignoreファイルを設定して要らないファイルは検査しないように設定しました。

CSSのためのStylelintの実行

次はStylelintが上手く実行されるか確認するためtest.cssファイルを生成して次のように修正します。

h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

その後、次のコマンドを実行してStylelintが上手く実行されるか確認します。

npm run lint:css

Stylelintが上手くインストールされて設定されたら、次のようにワニングが表示されることが確認できます。

test.css
 2:3  ✖  Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem'  shorthand-property-no-redundant-values

test.cssファイルを次のように修正して、Stylelintを実行すると、問題が解決されることが確認できます。

h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
}

SCSSのためのStylelint

SCSSファイルを検査するためStylelintをインストールして使う方法について説明します。

SCSSのためのStylelintのpackage.jsonの生成

StylelintはNodeの開発環境で動作します。したがって、Nodeのパッケージを管理するためのpackage.jsonファイルを生成する必要があります。次のコマンドを実行してpackage.jsonファイルを生成します。

npm init

コマンドを実行すると、次のように色んな質問が表示されます。特に変更したいことがなければ、全ての質問にEnterを入力します。

package name: (stylelint-example)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

そしたら、次のようにpackage.jsonファイルが生成されることが確認できます。

{
  "name": "stylelint-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

SCSSのためのStylelintのインストール

Stylelintを使ってSCSSを検査したい場合、次のコマンドを実行してStylelintと追加で必要なライブラリをインストールします。

npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-prettier-scss

SCSSのためのStylelintの設定

このようにインストールしたStylelintを使うため.stylelintrc.jsonファイルを生成して次のように修正します。

{
  "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"]
}

SCSSのためのStylelintの実行スクリプト

Stylelintを使って全てのSCSSファイルを検査するためにpackage.jsonファイルを次のように修正します。

{
  ...
  "scripts": {
    "lint:css": "stylelint --ignore-path .gitignore '**/*.scss'",
  },
  ...
}

--ignore-path.gitignoreファイルを設定して要らないファイルは検査しないように設定しました。

SCSSのためのStylelintの実行

次はStylelintが上手く実行されるか確認するためtest.scssファイルを生成して次のように修正します。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

その後、次のコマンドを実行して、Stylelintが上手く実行されるか確認します。

npm run lint:css

Stylelintが上手くインストールされ、設定されたらか次のようにメッセージが表示されることが確認できます。

test.scss
 1:14  ✖  Expected "Helvetica" to be "helvetica"  value-keyword-case

test.scssファイルを次のように修正して、Stylelintを実行すると、問題が解決されることが確認できます。

$font-stack: helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

CSS-in-JSのためのStylelint

私は主にReactを使って開発をしてて、MUICSS-in-JSライブラリであるEmotionを使ってスタイリングを行っています。

Stylelintを使ってCSS-in-JSのスタイルを検査する方法について説明します。

プロジェクト準備

Stylelintを使ってCSS-in-JSのスタイルを検査するためにはCRA(create-react-app)を使ってサンプルプロジェクトを生成してみます。CRAをインストールしたりCRAを使ってReactプロジェクトを生成する方法について詳しい内容は以前のブログポストを参考してください。

次のコマンドを使ってReactプロジェクトを生成します。

npx create-react-app stylelint-example --template typescript

次のコマンドを使ってEmotionMUIをインストールします。

npm install --save @mui/material @emotion/react @emotion/styled

そしてCSS-in-JSを使ってスタイリングをするため、./src/App.tsxファイルを開いて次のように修正します。

import styled from '@emotion/styled';

const Title = styled.h2`
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
`;

function App() {
  return (
    <div>
      <Title>Learn React</Title>
    </div>
  );
}

export default App;

CSS-in-JSのためのStylelintのインストール

Stylelintを使ってCSS-in-JSを検査したい場合は次のコマンドを実行してStylelintと追加で必要なライブラリをインストールする必要があります。

npm install --save-dev stylelint stylelint-config-standard stylelint-config-prettier postcss-syntax @stylelint/postcss-css-in-js

CSS-in-JSのためのStylelintの設定

このようにインストールしたStylelintを使うため.stylelintrc.jsonファイルを生成して次のように修正します。

{
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  "overrides": [
    {
      "files": ["**/*.tsx"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ]
}

CSS-in-JSのためのStylelintの実行スクリプト

Stylelintを使って全てのCSS-in-JSファイルを検査するためにpackage.jsonファイルを次のように修正します。

{
  ...
  "scripts": {
    "lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'"
  },
  ...
}

--ignore-path.gitignoreファイルを設定して要らないファイルは検査しないように設定しました。

CSS-in-JSのためのStylelintの実行

次のコマンドを実行して、Stylelintが上手く実行されるか確認します。

npm run lint:css

Stylelintが上手くインストールされて、設定されたら下記のようにエラーメッセージが表示されることが確認できます。

src/App.css
  1:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
  5:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 11:3   ✖  Expected class selector to be kebab-case  selector-class-pattern
 16:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 27:1   ✖  Expected class selector to be kebab-case  selector-class-pattern
 31:12  ✖  Expected keyframe name to be kebab-case   keyframes-name-pattern
 35:3   ✖  Expected empty line before rule           rule-empty-line-before

src/App.tsx
 4:3  ✖  Unexpected longhand value '0 0 1rem 0' instead of '0 0 1rem'  shorthand-property-no-redundant-values

src/index.css
 3:64  ✖  Unexpected quotes around "Roboto"     font-family-name-quotes
 3:74  ✖  Unexpected quotes around "Oxygen"     font-family-name-quotes
 4:6   ✖  Unexpected quotes around "Ubuntu"     font-family-name-quotes
 4:16  ✖  Unexpected quotes around "Cantarell"  font-family-name-quotes

他のファイルにも問題が出ましたが、私たちが修正した./src/App.tsxファイルでStylelintCSSを検査した時と同じエラーが出ることが確認できます。これで、私たちが設定した内容が上手く反映されたことが分かります。

./src/App.tsxファイルを次のように修正して、Stylelintを実行すると、そのファイルのエラーがなくなることが確認できます。

import styled from '@emotion/styled';

const Title = styled.h2`
  margin: 0 0 1rem;
  font-size: 1.5rem;
`;

function App() {
  return (
    <div>
      <Title>Learn React</Title>
    </div>
  );
}

export default App;

完了

これでStylelintを使ってCSS/SCSSのスタイルファイルの内容を検査する方法についてみてみました。また、styled-components/EmotionのようなCSS-in-JSスタイルを検査する方法もみてみました。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts