在 Angular 项目中使用 ESLint 和 Prettier 与 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 linting 库
@typescript-eslint/eslint-plugin：包含一组特定于 TypeScript 的 ESLint 规则的插件
prettier：核心 prettier 库
eslint-config-prettier：禁用可能与 prettier 冲突的 ESLint 规则
eslint-plugin-prettier：以 ESLint 规则的形式运行 prettier

为 ESLint 添加一个配置文件，名为.eslintrc.json包含：

{
  "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
  }
}

您可以在属性中添加特定的 linting 规则rules。

最好不要格式化依赖项文件夹，因为每次添加新的依赖项时，npm 通常都会这样做，为此您应该添加一个.eslintignore包含以下内容的文件：

package.json
package-lock.json
dist

修改lint您的脚本package.json：

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

这将对您的应用进行类型检查，并运行 linter 检查所有 Javascript、JSON 和 Typescript 文件。所有可以自动修复的 ESLint 错误都将通过此命令修复，但其他错误将在命令行中打印出来。

此时，ESLint 可以与 TypeScript 正确配合使用。你可以运行 lint 来检查项目的 JavaScript 和 TypeScript 文件npm run lint。

为 Prettier 添加一个配置文件，.prettierrc.json文件名为：

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

你可以按照你喜欢的方式配置Prettier

安装以下 Visual Studio Code 扩展：

dbaeumer.vscode-eslint
esbenp.prettier-vscode

将以下内容添加到您的.vscode/settings.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 Code。当您违反了 linting 规则时，您会收到视觉警报；当您保存文件时，ESLint 会尝试使用 Prettier 修复所有问题。这应该适用于 JavaScript 和 TypeScript。

您可以在此处找到本教程的代码：ng-pretty

文章来源：https://dev.to/dreiv/using-eslint-and-prettier-with-vscode-in-an-angular-project-42ib