EsLINTを使用して角度プロジェクトでVSCodeを使用する🚀(時代遅れ)

このセットアップガイドでは、Prettierアプリケーションであなたのコード形式の世話をするためにあなたのコードフォーマットとESLintの世話をするためにAngularを使用する方法を学びます.
angular-cliを使用した角度のアプリケーションを作成します.

ng new ng-pretty
cd ng-pretty

必要な依存関係をインストールします

# Install ESLint
npm install --save-dev eslint

# Install additional plugins
npm install --save-dev @typescript-eslint/eslint-plugin eslint-plugin-prettier

# Install Prettier and Prettier-ESLint dependencies
npm install --save-dev prettier prettier-eslint eslint-config-prettier

eslint:コアEslintリンギング図書館

@typescript-eslint/eslint-plugin :タイプスクリプト特有の

であるeslint規則の束を含むプラグイン

prettier:芯きれいな図書館

eslint-config-prettier:絶好の

と対立するかもしれないEslint規則を無効にします

eslint-plugin-prettier : Eslint規則

として走り回ってください
以下の設定ファイルを追加します.

{
  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
  "extends": [
    "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  "parserOptions": {
    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
    "sourceType": "module" // Allows for the use of imports
  },
  "rules": {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
  }
}

は、.eslintrc.jsonプロパティで特定のリンティングルールを追加できます.

依存関係フォルダをフォーマットしないのは良い考えです.新しい依存関係NPMを追加する度に通常は以下のようになります.

package.json
package-lock.json
dist

rulesで.eslintignoreスクリプトを修正します.

"scripts": {
  "lint": "tsc --noEmit && eslint . --ext js,ts,json --quiet --fix",
}

これはあなたのアプリをタイプチェックし、すべてのJavaScript、JSON、およびTypescriptファイルを通してリンターを実行します.自動的に修正される可能性のある任意のエラーは、このコマンドで修正されますが、他のエラーはコマンドラインで出力されます.
この時点では、SeseScriptでEslintが正しく動作します.プロジェクトのJavaScriptとTypesScriptファイルをlintを実行することでリントできます.
以下のように設定されています.

{
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "auto"
}

閉じるこの動画はお気に入りから削除されています😉
次のVisual Studioコード拡張機能をインストールします.

dbaeumer.vscode-eslint
esbenp.prettier-vscode

以下のファイルをpackage.jsonファイルに追加します.

{
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[json]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  }
}

そして、それ!これで、完全なVisual Studioのコード統合を行う必要があります.あなたがLinting規則に違反するとき、あなたは視覚的に警告されるでしょう、そして、あなたがファイルを保存するとき、eslintはきれいに使用しているどんな問題も修正しようとします.JavaScriptとTypeScriptの両方で動作します.
このチュートリアルのコードは次のとおりです.