未来電子テクノロジーでインターンに参加しています。
今週はフロントエンドの開発ツールについて勉強しました。
Eslint
JavaScriptのコードのエラーチェックをするリンティングツールです。
ESLintはNode.jsを使用して書かれているため、シェル上でnpmを使ってインストールできます。
インストール
npm i -D eslint
初期設定
eslint --init
実行
eslint test.js
実行結果のエラーメッセージが表示されます。
デフォルトで200以上のルールがありますので、公式サイトを参照して修正します。
eslint実行コマンドに--fixを追加することで、エラー箇所を自動修正してくれるオプションもありますが、全てのルールが自動修正されるわけではないので注意しましょう。
Prettier
コードフォーマッターと呼ばれるツールで、コードを自動的に整形してくれます。
Eslintと役割が被るところもありますが、改行処理などより見やすいコードを書くにはPrettierが必要です。
インストール
npm i -D prettier
実行
npm run format
まとめ
EslintとPrettierを併用することで、より質の高いコードを生成できます。
ツールを使ってコード整形を行うことで、エラーチェックにかかる時間の削減とチーム開発でも統一感のあるコードを生成できる効果が期待できます。