2019年1月6日はじめに今回は、PrettierとESLintというツールを使用し、JavaScriptの文法チェックとフォーマティングを効率的に行う方法を解説します。文法チェックを行うことにより、コーディングミスを事前に防ぐことができますし、フォーマティングを行うことで複数のメンバーがコーディングしてもすべて同じフォーマットに整えることができます。Code」を使用して解説していきます。PrettierとはNode.js上で動作するコードフォーマッターです。PrettierはNode.js上で動作するため、ユーザー環境に依存することなく、プロジェクト単位でコードフォーマットを統一できる点で他のコードフォーマッターより優れており、最近注目されております。このツールを使用することで、以下のようにフォーマットを整えることができます。"center"}このように、コードフォーマッターを利用すると、自動的に決められたコードスタイルに整形してくれるため、複数人で開発を行っても統一性のあるコードになり可読性もあがります。開発者はコードスタイルを意識することなくコーディングに集中できます。ESLintとはJavaScriptの文法チェックツールです。エディタと組み合わせることで、コードを実行する前に重複変数やカッコの付け忘れなど明らかなバグを見つけたりするのに役立ちます。コードフォーマッターの機能も保有しております。ESLintを使用することで、以下のように赤線で問題を指摘してくれます。問題の部分へカーソルを合わせることでエラー内容も見れます。PrettierとESLintを組み合わせる理由ESLintとPrettierの両方を使用したい場合、両方ともコードフォーマッターとしての機能があるため、どう共存させるかということが問題になります。(なにも考えずやるとprettierの結果コードがESLintでエラーという面倒なことになる)そこで、prettierの記法ルールをESLintのルールとして定義することで、prettierはフォーマッター、ESLintは文法チェックというように競合せず、責務が分担されます。PrettierとESLintここから、実際にPrettierとESLintをエディタにインストールする方法を解説します。Codeの拡張機能より、以下のプラグインをインストールします。プロジェクトへのPrettierとESLintのインストール次に、ターミナルで以下のコマンドを実行し、プロジェクトへPrettierとESLintのインストールします。prettierそれぞれのツールの用途は以下の通りです。設定ファイル作成ESLint機能させるには、「.eslintrc」ファイルをプロジェクト直下に新規作成する必要があります。Style](https://standardjs.com/)に基づいて行い、足りない部分(es6やnode.js、promise)は拡張してます。functionの前のスペースは許容しない、セミコロンの省略は許容しない、シングルコードは許容しないという独自ルールも作成しております。["error"]}}.eslintrcの書き方や設定できるルールは以下の公式サイトをご参照ください。・.eslintrcの書き方https://eslint.org/docs/user-guide/configuring・ルールhttps://eslint.org/docs/rules/以上で、JavaScriptのコードの文法チェックとフォーマティングの設定は完了です。さいごにコードの文法チェックとフォーマティングの設定は最初はとっつきにくく後回しにしてしまいがちですが、これらの設定をすることで生産性があがり、かなりの時間と労力を削減できるので設定することをおすすめします。これから導入する方は参考にしていただければと思います。yacchi1123フリーランスエンジニアの奮闘記Expoよく使うコマンドまとめReactNativeとExpoを使用したスマホアプリ開発やっち@SIer企業出身フリーランスエンジニア一部上場SIer企業4年勤務後、プログラミングほぼ未経験からフリーランスエンジニアへ。時間や場所に縛られないノマドエンジニアになり、実家の寺再興にフルコミットできるようになるため日々精進してます。自身の経験や失敗、技術関連のこと発信してます。言語は主にJava,JavaScript使用。フリーランスエンジニアの。