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

更新PrettierESLintstylelint
TSLintとstyleLintと合わせてPrettierを使ってみる
Article
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

終わりに

最後までご覧いただきありがとうございます。
この記事ではTSLintとstyleLintと合わせてPrettierを使ってみるについて紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。