コードフォーマッターの導入

コードフォーマッターとは

• ソースコードを整形してくれるツール
• イケてる環境は何かしら導入されてるはず

導入することの利点

• レビュー時に細かい指摘をしなくて済む
• ソースコードの品質を最低限担保することが出来る

この記事で紹介しない事

• babelやnode-sass 等のトランスパイルの環境には触れません

完成形

最終的な内容はこちらのリポジトリにあります

リポジトリへのリンク

紹介するフォーマッターの一覧

• Prettier
• ESLint
• stylelint

導入

作業ディレクトリの作成と移動

$ mkdir lint-demo && cd lint-demo

ディレクトリの初期化

$ npm init -y

ライブラリのインストール

$ yarn add -D prettier eslint stylelint

設定ファイルの追加

設定ファイルが無いとLintタスクの実行が出来ないので設定ファイルの追加を行う

Prettier

プロジェクトのルートディレクトリで.prettierrcファイルを追加

Prettierの設定可能な項目

以下は設定の一例

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "htmlWhitespaceSensitivity": "css",
  "printWidth": 120
}

ESLint

Parserを追加

$ yarn add -D babel-eslint

Prettier と併用する為に以下のpackagesを追加

$ yarn add -D eslint-plugin-prettier eslint-config-prettier

Google の推奨設定を利用する為に下記のpackageを追加

$ yarn add -D eslint-config-google

ESLintの設定ファイルはpackage.jsonに追加可能なので以下の用に記載

package.json

{
  "eslintConfig": {
    "parser": "babel-eslint",
    "env": {
      "browser": true
    },
    "extends": [
      "google",
      "plugin:prettier/recommended"
    ]
  }
}

stylelint

Prettier との併用の為に下記のpackageを追加

$ yarn add -D stylelint-config-prettier

SCSS で利用出来るように下記のpackagesを追加

$ yarn add -D stylelint-scss stylelint-config-recommended-scss

スタイルのプロパティの並べ替えを行えるように以下を追加

$ yarn add -D stylelint-order stylelint-config-rational-order

displayによって無効になるプロパティを検知する為に、以下のpluginを追加

$ yarn add -D stylelint-declaration-block-no-ignored-properties

以下の用にpackage.jsonに追加すると設定を読み込んでくれる

package.json

{
  "stylelint": {
    "plugins": [
      "stylelint-declaration-block-no-ignored-properties"
    ],
    "extends": [
      "stylelint-config-rational-order",
      "stylelint-config-recommended-scss",
      "stylelint-config-prettier"
    ],
    "rules": {
      "plugin/declaration-block-no-ignored-properties": true
    }
  }
}

実行環境の構築

Lintの実行にはnpm scriptsを利用する

Lint用にファイルを追加

# ディレクトリの作成
$ mkdir -p src/{scss,html,js}
# 空のファイルを追加
$ touch src/{html/index.html,js/main.js,scss/main.scss}

Git hooks でLintのタスクが実行される用に以下のパッケージを導入

$ yarn add -D husky lint-staged

package.json に以下を追加

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/html/**/*.html": "prettier --write",
    "src/js/**/*.js": "eslint --fix",
    "src/scss/**/*.scss": "stylelint --fix"
  }
}

これでGitのコミットを実行すると、ファイルに合わせてLintのタスクが自動で実行されます。

レガシー環境を撲滅する参考にご利用下さい