【覚書】AngularプロジェクトでのEs-Lint / Prettierによる快適コーディング設定
前書き
AngularプロジェクトへのEsLint / Prettierの導入方法の覚え書き。
個人レベルでは開発者体験の向上、チーム開発ではレビューのコスト削減の為、Linter/Formatterは必須だなぁと思うのでサクッとお手軽に導入していきましょう。
概要
以下の手順でお手軽に導入する事が出来る。
npx ng add @angular-eslint/schematics
npm install -D prettier@latest eslint-config-prettier@latest
Command Pallete
->Prettier: Create Configuration File
ルートディレクトリの
.eslintrc.json
.prettierrc
をお好みの設定に上書き
*動作環境
node v16.1.0
@angular/cli 12.2.7
Eslint / Prettierの設定について
細かい設定まで追えている訳ではない為、
- 基本的にデフォルトの設定を基に使用
- セミコロンのみ無し
という設定の追加方法だけ書き残します。
以下の記述を.prettierrc
と.eslintrc.js
へそれぞれ追加すればOK。
.prettierrc
{ "rules": { "semicolon": [ false, "always" ], "no-unexpected-multiline":"error", // other settings... } }
.eslintrc.js
{ "semi": false // other settings... }
余談: セミコロンについて
他言語(Java/Kotlin)を書いていて「セミコロンが無い方が、読み心地・書き心地どちらも良いなぁ」と感じていて、 少し調べてみると以下の記事と出会いました。
「Typescriptでセミコロンは使うな!!」という事が述べられています。
(Don’t use Semicolons in TypeScript!)https://medium.com/@eugenkiss/dont-use-semicolons-in-typescript-474ccfe4bdb3
要旨としては
「セミコロンを使わない方が煩わしさが減る」
「セミコロンを使用する事で防がれるJavascriptのエラーはリンターで防ぐ事が出来る」
といった話です。
この記事の中の
「タイピングも少なくなり、IDEの余計な警告に手を止められる事が減る」
という話は凄く共感していて、
Java/Kotlinを書いている時にIDEのWarningやErrorによって手を止められる時間は少ない方が良いと感じています。
(もちろんJavaはセミコロン必須だけれども。)
WarningやErrorは有り難いけれど、手を止めずに済むなら手を止めないで済む方が良いですね。
(ちなみにPrettierの semi
のドキュメントでは「ASI障害の危険性がある場合のみ自動挿入」と記載があり、安心してPrettierを頼って良さそう。)
https://prettier.io/docs/en/options.html
参考
(angular-eslint/angular-eslint)https://github.com/angular-eslint/angular-eslint (Don’t use Semicolons in TypeScript!)https://medium.com/@eugenkiss/dont-use-semicolons-in-typescript-474ccfe4bdb3