StyleHintでCSS を自動整形する

はじめに #

CSS で開発していく上で、ある程度のルールは決めておく必要がある。
stylelint を使用し、コード管理する。
コードルールは stylelint-config-standard を使用する。

1. パッケージ管理ツール npm
2. 使用モジュール stylelint prettier
3. 使用ルール stylelint-config-standard

node をインストール #

nodeをインストールし npm を使用できる状態にしてください。

package.json 作成 #

作業フォルダ内で、以下コマンドを叩いてください。
対話式で聞かれる項目はすべてデフォルト状態で問題ないです。

npm init

package.json ができます。

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

stylelint とルールとフォーマッターをインストールする 作業ディレクトリ内で、以下を実行し必要なモジュールをインストールしてください。

npm install stylelint stylelint-config-standard prettier

stylelint ルールを記述する #

作業ディレクトリ内で、【.stylelintrc】ファイルを作成し以下を記述する

{
  "extends": "stylelint-config-standard",
  "rules": {
    "string-quotes": "double"
  }
}

package.json を編集する #

scripts に以下を追記してください。

"format": "prettier --write"
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --write"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "prettier": "^1.18.2",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0"
  }
}

テストコードを記述する ファイル名は【test.css】とします。 stylelint-config-standard のルールだとインデントは 2 以外を 追加ルールとして”は許されていません。

.add {
    content: 'x';
}

整形する #

以下コマンドを実行し、ルール通りに修正されるか確認してください。

npm run format test.css

.add {
  content: "x";
}

終わり #

ファイルのインデントが修正されたら完了です。 お疲れ様です。