TSLintとstyleLintと合わせてPrettierを使ってみる

PrettierTSLintstylelint
TSLintとstyleLintと合わせてPrettierを使ってみる
Article

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

そこでコードの整形を自動でできないかと検討した時に 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

早速使ってみる

今回は TSLintstylelint を合わせて使って見ます。

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

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

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