Anglar에서 ESLINT 설정

Angular Eslint

Anglar에서 LINT를 실행할 때ng lint.ng lint 설치된 린트의 포장을 바탕으로 린트 검사를 실시하지만 처음 실행할 때 포장을 설치하지 않은 경우 알림 @angular-eslint/schematics을 통해 설치를 추진할 수 있다.

Angular & Prettier

r Pretter를 포맷자로 가져오려는 경우
angular-eslint 추천eslint-plugin-prettier.
먼저 필요한 모듈을 설치합니다.

$ npm i -D @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier prettier-eslint eslint-config-prettier

.eslintrc.json에서 다음 2개 점포를 수정했다.

"files": ["*.ts"]의 extends에prettier

추가

prettier의 설정을 설명하기 위해 새 블록 "files": ["*.html"] 추가

{
  ...,
  "overrides": [
    {
      "files": ["*.ts"],
      ...
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended" // 追加
      ],
      ...
    },
    // 既存の .html ブロックは触らない
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    // prettier ように新しく追加
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

마지막으로 .prettierrc.json를 생성하여 설정을 완료합니다.

{
  "printWidth": 80,
  "useTabs": false,
  "singleQuote": true
}

angular-eslint의prettier에 대응하는 정보는 GiitHub의README에서도 확인할 수 있다.
https://github.com/angular-eslint/angular-eslint#notes-for-eslint-plugin-prettier-users

참고 자료

https://qiita.com/a3katachi/items/186a6570cc6967acbd91