Angular に ESLINT の設定を入れる
6093 ワード
Angular Eslint
Angular で LINT を実行する場合は ng lint を実行します。
ng lint は インストールされている lint のパッケージに基づいた lint チェックを実行しますが、初回実行時などまだパッケージがインストールされていない場合は、プロンプトを通じて @angular-eslint/schematics のインストールが促されるようです。
Angular & Prettier
フォーマッタとしてr Prettier を導入したい場合、
angular-eslint では eslint-plugin-prettier の利用が推奨されています。
まずは、必要なモジュールをインストールします。
$ npm i -D @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier prettier-eslint eslint-config-prettier
.eslintrc.jsonにおいて、以下２店の修正を加えます。
-
"files": ["*.ts"]の extends に prettier を追加 -
"files": ["*.html"]のブロックを新しく追加して prettier の設定を記述
{
...,
"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 対応に関する情報は、 GitHub の README からも確認可能です。
参考
Author And Source
この問題について(Angular に ESLINT の設定を入れる), 我々は、より多くの情報をここで見つけました https://zenn.dev/mikakane/articles/angular_eslint著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol