JavaScriptやTypeScriptの開発にて、Visual Studio Code(以下VSCode)にESLintとPrettierを導入して品質、開発効率を改善する一例を紹介します。
ESLintとは
ESLintはコードを静的に解析し、潜在的なエラーや問題を検出します。これにより、バグの早期発見が可能になります。
Prettierとは
Prettierはコードを自動的にフォーマットし、一定のスタイルを一貫して適用します。これにより、コードスタイルに関する議論を減らすことができます。
実例
例えばVSCodeで以下のようにソースを書きます。
普段ならブラウザなどで実行してから初めてエラー検出されると思いますが、ESLintをインストールしているとVSCodeのコンソールに
というエラーが出力されます。
ソースを書いた時点でエラーが分かって便利です。
例えばソースの"()"の前後にスペースを入れたりプログラムの行間に空白行を入れたりするのはプログラマのポリシーよってマチマチですが、得てしてそのポリシーの違いが他人のソースの解析がしにくくなる一因になったりもします。 Prettierは統一されたコーディングルールに則っていないソースをエラー検出し、自動で整形もしてくれます。
上の例では、Prettierのコーディングルールに反している部分に黄色の波線が表示されています。
この波線上にカーソルを当て、キーボードの「Ctrl＋.」押下⇒「Fix this prettier/prettier problem」を押下すると、ソースを自動整形してくれます。
「Fix auto-fixable Problems」を押下すると全てのエラー部分を修正してくれます。
今後も便利なツールや機能がどんどん公開されると思われます。
しっかりアンテナを張ってそれらを活用して、さらに開発の品質や効率を上げていきたいと思います。
