TWBMT

技術的な記事や覚書について書いていきます。その内、自作サイトとかに技術記事をまとめたい。

【覚書】AngularプロジェクトでのEs-Lint / Prettierによる快適コーディング設定

前書き

AngularプロジェクトへのEsLint / Prettierの導入方法の覚え書き。

個人レベルでは開発者体験の向上、チーム開発ではレビューのコスト削減の為、Linter/Formatterは必須だなぁと思うのでサクッとお手軽に導入していきましょう。

概要

以下の手順でお手軽に導入する事が出来る。

  1. npx ng add @angular-eslint/schematics

  2. npm install -D prettier@latest eslint-config-prettier@latest

  3. Command Pallete -> Prettier: Create Configuration File

  4. ルートディレクトリの .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