コードの整形を自動で出来ると開発を効率化へつながります。

そこでコードの整形を自動でできないかと検討した時に Prettier というツールがあることを知ったので
TSLintとstyleLintと合わせてPrettierを使って見ました。

Prettierとは？

コードを整形してくれるフォーマッタです。
2017年に登場してからGithub上で多くのStarを集めていて大変注目されているようです。

またJavaScriptに関わる多くの言語フォーマットに対応していて
フロントエンド開発に非常に便利なツールです。

対応言語

• ES2017を含むJavaScript
• JSX
• Flow
• TypeScript
• CSS, Less, and SCSS
• JSON
• GraphQL
• Markdown, including GFM
• YAML

※2018年7月現在
参考 公式ドキュメント
https://prettier.io/docs/en/index.html

LintとPrettierについて

LintとPrettierはどちらもコード整形を行うことができるため一部の役割が被っていますが
Lintはコード記述に関するルールや品質に関するチェックを担当
Prettierはコード整形を自動で行うことを担当
といった感じでそれぞれの担当が分かれます。

環境

• Yarn 1.7.0
• Prettier 1.13.7
• TSLint 5.10.0
• stylelint 9.3.0

早速使ってみる

今回は TSLint と stylelint を合わせて使って見ます。

パッケージのインストール

パッケージをまとめてインストールします。

terminal
$ yarn add -D prettier-stylelint stylelint-config-standard stylelint-config-recess-order prettier tslint-config-prettier tslint-plugin-prettier tslint

styleLintの設定

.styleLintrc.yml を作成します。
今回は stylelint-config-standard というルールのプラグインと
stylelint-config-recess-order という並び順のプラグインを使用しています。

styleLintrc.yml
---
extends:
- stylelint-config-standard
- stylelint-config-recess-order

rules:
  indentation: 2
  declaration-colon-newline-after: "always-multi-line"
  value-list-comma-newline-after: "never-multi-line"

package.json に以下を追記します。 prettier の設定を書かないとエラーになりました。
下記参照。

package.json
  "prettier": {},
  "scripts": {
    "format:css": "prettier-stylelint --quiet --write ./src/css/style.css"
  }

cssはサンプルとして適当に作ります。

src/css/style.css
body {
  padding: 0;
  margin: 0;
  position: static;
  width: auto;
  height: auto;
  background-color: #efefef;
  font-color: rgba(0, 0, 0, .87);
}

yarnコマンド で実行します。

terminal
$ yarn format:css
$ prettier-stylelint --quiet --write ./src/css/**/*.css
`{ "parser": "postcss" }` is deprecated. Prettier now treats it as `{ "parser": "css" }`.
✨  Done in 2.02s.

これで ./src/css/style.css が整形されて出力されます。

もし以下のようなエラーが出た場合は？

terminal
$ prettier-stylelint --quiet --write ./src/css/style.css
prettier-stylelint [ERROR]: There was an error formatting "./src/css/style.css"

TypeError: Cannot set property 'useTabs' of null

package.json へ以下の追記すると改善します。

package.json
  "prettier": {},

TSLintの設定

tslint.json を作成します。
prettier のプラグインの設定と
tslint-config-airbnb というルールのプラグインを設定しています。

tslint.json
{
  "rulesDirectory": ["tslint-plugin-prettier"],
  "extends": ["tslint-config-airbnb", "tslint-config-prettier"],
  "rules": {
    "prettier": [
      true, {
        "singleQuote": true,
        "semi": true
      }
    ]
  }
 }

package.json に以下を追記します。

package.json
  "prettier": {},
  "scripts": {
    "format:ts": "tslint --fix ./src/**/*.ts*"
  }

サンプルとして適当にtsファイルを作成しまし。

src/js/app.ts
class Student {
  fullName: string;
  constructor(public firstName: string, public middleInitial: string, public lastName: string) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person : Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

yarnコマンド で実行します。

terminal
$ yarn format:ts
$ tslint --fix ./src/**/*.ts*
✨  Done in 3.65s.

これで ./src/**/*.ts が整形されて出力されます。

参考

Prettier ドキュメント
https://prettier.io/docs/en/install.html