eslintとtslintは目的は同じものですが、設定ファイルの構造や中身が異なります。いう事で、今回はeslintとtslintの両方のパターンでprettierを適用する方法を書いてみます。eslintという順番で実行してくれるモジュールです。(prettierの整形結果をeslintが怒る事があるので)eslint-config-prettierは、prettierが整形した部分をeslintに無視させるモジュールです。create-react-appでeslintするとモジュールが足りないと警告されるので、以下をインストールします。Style)をインストールします。eslint-plugin-promiseeslint-config-standardはJavascript標準スタイル(皆で決めた標準lintルール)のeslint版です。hoge(){}」で「hoge」と「()」の間にスペースが無い場合はNGとする、といったルール集です。Style標準スタイルにはgoogle版やairbnb版等があります。任意に変更して下さい。Styleに準拠しておらず、エラーが出まくるためです。false}EOFprettierに何をさせるかのオプションです。オプション一覧は以下に掲載されています。src/**/*.js"--fixオプションを付けると、prettierの自動整形+eslintの軽い整形を自動保存してくれるようになります。fixを付けないと、ただlintがエラー・警告を発し、ソースコードに編集は入らない挙動になります。ESLintとPrettierの競合チェックコマンドを追加eslintの設定とprettierの設定が競合していないかをチェックするコマンドも用意されています。eslintの順に実行されます。lintで書式チェック、という順に処理が行われます。tslintという順番で実行してくれるモジュールです。tslint-config-prettierは、prettierが整形した部分をtslintに無視させるモジュールです。}}EOFtslint-config-standardはJavascript標準スタイル(皆で決めた標準lintルール)のtslint版です。hoge(){}」で「hoge」と「()」の間にスペースが無い場合はNGとする、といったルール集です。Style標準スタイルにはgoogle版やairbnb版等があります。任意に変更して下さい。false}EOFprettierに何をさせるかのオプションです。オプション一覧は以下に掲載されています。**/*.tsx",fixオプションを付けると、prettierの自動整形+tslintの軽い整形を自動保存してくれるようになります。fixを付けないと、ただlintがエラー・警告を発し、ソースコードに編集は入らない挙動になります。TSLintとPrettierの競合チェックコマンドを追加tslintの設定とprettierの設定が競合していないかをチェックするコマンドも用意されています。tslintの順に実行されます。lintで書式チェック、という順に処理が行われます。IDEAやGoLandでも同じ)の設定WebStormの設定はPrettier公式が設定例を提示してくれています。watcher」のチェックを外す事を忘れないようにしましょう。これのチェックがついていると、新規関数を追加しようと改行した瞬間Watcherに介入され、絶改行できなくなります。Prettierを実行させる事ができます。Watchersの設定を拡張子毎に複数作成しましょう。Prettierのオプション設定ですが、Argumentsの実行時引数でオプションをツラツラ書いてしまうとプロジェクト内の.prettierrcと内容が食い違う可能性があるので、Arguments(Prettierには以下のようにプロジェクト内に配置したPrettier設定ファイルを指定した方が安心できそうです。$FilePathRelativeToProjectRoot$「$ProjectFileDir$」にはプロジェクトのルートディレクトリが設定されるようなので、プロジェクトに配置した「.prettierrc」を指定すれば、プロジェクト固有のPrettier整形をWebStormに行わせる事が可能になります。Watchersについては公式の日本語解説に詳細が書かれているので、是非ウォッチしておくとよいと思います。IDEA一見これで設定が完了したように見えますが、実はこれでは「未使用importの整理」が実現できていません。これについてはマクロ機能を利用すると簡単に実現できます。all」にショートカットを書き換えてしまえばよいのです。Recordingをクリックして録画開始。Recordingをクリックして録画終了。Imports」等と命名して保存します。All」が割り当てられていると警告されますが、removeして上書き保存します。WatchersによってPrettierも実行されるようになります。error」を設定している場合(初期はerror)、コンソールに例えば以下のように表示されるので、どう間違えたかを確認し、修正します。1これで完成です!この設定をすると、以下のような事が自動で行われるようになります。Codeの設定Prettierの拡張機能をインストールします。再起動後にprettierの自動実行設定をしますが、今回はワークスペースのみに設定していきます。ディレクトリを作成します。続いて直下にsettings.jsonを作成します。settings.jsonsettings.jsonに以下を記述します。}}この設定でTypescriptまたはBabelで、ファイル保存時・ペースト時に自動整形され、且つimportの最適化(未使用importの削除+並び替え)が行われるようになります。ワークスペース設定なので、他のプロジェクトの整形に影響を与える事なく、自動整形が設定されます。.vscode/settings.jsonはgitで管理するといいと思います。sをすると、Prettier+ESLint(TSLint)の整形処理が実行されます。Prettierの設定は「.prettierrc」を参照してくれているようです。未使用importの整理についてはできないっぽい?ようです。(/private/tmp/test/eslint-prettier-example/node_modules/eslint/lib/config.js:180:43)eslint-plugin-standardはeslint-config-standardに依存しているので、eslint-config-standardも一緒にインストールしましょう。team.メッセージ通り、eslint-plugin-nodeをインストールします。team.メッセージ通り、eslint-plugin-nodeをインストールします。team.メッセージ通り、eslint-plugin-importをインストールします。(/private/tmp/test/eslint-prettier-example/node_modules/eslint/lib/config/config-file.js:403:28)これは、create-react-appに内蔵されたeslintのバージョンでは不足していると起きるようです。create-react-app自体のバージョンと、内蔵eslintのバージョンはそれぞれ以下の通りです。この組み合わせではエラーが起きました。--versionv4.10.0なので、ちょっと嫌ですが別途eslintの最新バージョンをインストールしてしまいます。eslint現状では「v4.19.1」インストールされました。このバージョンであればエラーは出ませんでした。2017ネット上でprettier-eslintを使った例が見られますが、prettier-eslintの作者が↑のようにもう使ってないよ、と言っているので、使わなくて大丈夫です。eslint-config-prettierの組み合わせを使えば特に問題ないかと思われます。information.projectを指定すると直ります。**/*.tsx"雑感これをまとめるの、実はかなり苦戦しました。(単に私が最近のフロントエンド事情・歴史を知らないからですが)もう使われていないモジュールの例に惑わされたり、バージョン違いによる謎エラーなどなど。prettier動かねー!「tslint+prettier動かねー!」と発狂して全てを諦めてしまいそうです。prettierの効果は絶大で、チームの内で横行するオレオレコードフォーマットルールを撲滅したり、しょうもない凡ミスをlintで気づく事を自動化する事ができます。等という指摘に終始されてしまい、本来のレビュー目的が全スルーされる事がよくありますが、これを防ぐ事に繋がります。週間)昔は業務系SIer、今はベンチャー企業でプログラムを書いています。INFILEを実行できるようにするmacのAutomatorでhomebrewのコマンドをFinderのサービスから実行できるようにするReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。単行本(ソフトカバー)この商品を含むブログを見るAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。大型本この商品を含むブログを見るSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。