Help us understand the problem. What is going on with this article?

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

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

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

導入することの利点

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

この記事で紹介しない事

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

完成形

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

リポジトリへのリンク

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

導入

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

$ mkdir lint-demo && cd lint-demo

ディレクトリの初期化

$ npm init -y

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

$ yarn add -D prettier eslint stylelint

設定ファイルの追加

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

Prettier

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

Prettierの設定可能な項目

以下は設定の一例

{
  "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のタスクが自動で実行されます。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away