なになれスマートフォン用の表示で見るなになれIT系のことを記録していきます。PrettierPrettierとはコードフォーマッターです。Webフロントエンド向けに対応言語が豊富です。Webフロントエンドの開発環境ではデファクトスタンダードになっているツールのようです。GitHubのスター数は29,000を超えています。※2018年12月9日現在github.com今回は以前に作成したTypeScriptのプロジェクトにPrettierを導入しました。hi1280.hatenablog.comその際に調べたことをまとめます。TSLintが導入済みである前提としています。インストール必要なnpmモジュールをインストールします。tslint-config-prettiertslint-config-prettierはTSLintとPrettierとの設定上の競合を防止するために必要なモジュールです。設定tslint-config-prettierをTSLintに設定します。],Prettierの設定ファイルを作成します。true}好みに合わせてフォーマットのオプションを設定します。設定の詳細はこちらです。Prettier実行確認これでPrettierが使えます。下記のようにnpm-scriptsを設定すると実行できます。formatGitのコミット時に実行するチームで開発する場合には他のメンバーにも同じコードフォーマットを適用したいところです。そのために、Gitのコミット時にPretttierを実行します。インストール必要なnpmモジュールをインストールします。husky設定package.jsonを修正します。lintでlintも合わせて実施するようにしています。Prettier補足情報Prettier適用の試行錯誤中に見つけた情報です。今回はGitのコミットの際にコードフォーマットを実行するようにしました。その他にもファイルの保存時に実行するようにしたい場合は以下のVSCodeの拡張機能を試すのが良さそうです。個人での開発の場合ではこの方法でも良さそうです。今回はPrettierの設定とTSLintの設定を別にしました。tslint-plugin-prettierでTSLintにPrettierを統合できます。別々にしても使用感は特に変わりがないと思ったので、この方法は採用しませんでした。Qiitaこの方法を試す中で、ハマったポイントがあります。tslint.jsonに以下のように直接Prettierの設定を書いた場合には、VSCodeのtslintプラグインがPrettierでのルールをtslint上の問題として正常に出力してくれました。}}Prettierの設定に.prettierrcなどの別ファイルを使用した場合、以下のようにしないと誤った出力になります。editorconfigを無効化することで、外部ファイルの設定が有効になるようです。JavaScriptのテストフレームワークです。コールバック...2018-12-05TypeScriptでWebAPIを実行するTypeScriptの開発環境ができたので、とりあえずWebAPIを実行す...2018-12-04VSCodeでTypeScriptのCLIツール作成環境を作るVSCodeでTypeScriptのCLIツール作成環境を作りました。»プロフィールid:hi1280日々で得たIT技術を記録していきます。月別アーカイブ関連記事Chrome拡張機能を作る過程で学んだReactのことReact+TypeScriptでChrome拡張機能を作ったGraphQL(Backend)を試した注目記事はてなブログをはじめよう!hi1280さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。