注目のコードフォーマッター「Prettier」でCSSを整形する方法

この記事の目次

Prettierのメリット

コードフォーマッターとしてのメリット

コードフォーマッターによって自動的にコードを整形してくれるので、手作業でコードを整形する手間と時間を省くことができ、開発者の負担を減らすことができます。

また、複数人でソースファイルを編集する場合でもコードの記述ルールが統一されるため、コードの可読性が保たれ、メンテナンス性が向上します。

Prettierならではのメリット

PrettierはNode.js上で動作するため、WindowsでもMacでも同じ手順で導入することができます。

また、Prettierは以下に列挙した多くの言語をサポートしています。

将来的には、Java、PHP、Python、Ruby、Swiftなどもサポートされるようです。Prettierの今後の進展にも期待が持てます。

手順1:Prettierの導入

Prettierのインストール

まず、プロジェクトルートにpackage.jsonを作成します。


$ npm init

次に、Prettierをインストールします。


$ npm i -D prettier

.prettierrcの作成

.prettierrcは、Prettierの設定ファイルで、コードの整形に必要なPrettierの設定(オプション)を記述します。

.prettierrcは、YAMLまたはJSONのデータ構造で記述します。データ構造がYAMLの場合は「.yaml」「.yml」、JSONの場合は「.json」といった拡張子をファイル名に付け加えることができます。

ちなみに、.prettierrcのファイル名の末尾にある「rc」は、Wikipediaによると「run commands」に由来しているそうです。

ここでは設定ファイルとして.prettierrc.jsonをプロジェクトルートに作成し、オプションをJSON形式で記述します。


{
  "printWidth": 120,
  "tabWidth": 4,
  "useTabs": false,
  "singleQuote": false,
  "proseWrap": "preserve"
}

手順2:stylelintとの連携

prettier-stylelintのインストール

CSSのリントツールであるstylelintとPrettierを組み合わせて使用するために、prettier-stylelintをインストールします。


$ npm i -D prettier-stylelint

.stylelintrcの作成

.stylelintrcはstylelintの設定ファイルです。.prettierrcと同様に、YAML形式またはJSON形式で記述し、データ構造に合わせて拡張子を付け加えることもできます。stylelintでは、150個以上のルールを設定できます。

.stylelintrcの作り方には以下の2通りがあります。

  • stylelintのすべてのルールを記述する
  • GitHubで公開されているstylelintの設定ファイルをもとにして、変更したいルールのみを上書きする

ここでは、後者の方法を用います。stylelint-config-standardをもとに.stylelintrcを作成します。まずは、stylelint-config-standardをインストールします。


$ npm i -D stylelint-config-standard

そして、プロジェクトルートに.stylelintrc.jsonを作成し、下記のようにベースとなる設定ファイルと変更したいルールを記述します。


{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "indentation": 4,
    "declaration-colon-newline-after": null,
    "value-list-comma-newline-after": "never-multi-line"
  }
}

手順3:npm-scriptsのタスクの作成・実行

npm-scriptsとは、package.jsonのタスク管理機能のことです。

下記のように、package.jsonのscriptsフィールドの中に、タスク名と実行コマンドを記述します。


{
  "scripts": {
    "format": "prettier-stylelint --quiet --write ./css/style.css"
  }
}

そして、上記のpackage.jsonで定義したprettier-stylelintのタスクを実行します。


$ npm run format

これでCSSのコードが整形されます。再度コードを整形したい場合は、上記のコマンドを実行すればOKです。

複数人で開発をおこなう場合

Web制作の現場では、一つのプロジェクトに複数の人が携わることがほとんどです。Prettierを利用してプロジェクト内でCSSの記述ルールを統一するためには、以下のファイルを共有しておけば大丈夫です。

  • package.json
  • .prettierrc(「.yaml」「.yml」「.json」のいずれかの拡張子がつくものも含みます)
  • .stylelintrc(「.yaml」「.yml」「.json」のいずれかの拡張子がつくものも含みます)

package.jsonがあるので、手順1と2で紹介したインストールの作業は、以下のコマンドを実行するだけで済みます。


$ npm i

参考URL