如何通过Eslint设置更漂亮的自动格式化代码

Question

为了将我们的开发时间集中在实际代码上，而不是争论编码风格和粗心的错误，我们试图使用ESLint和Prettier来配置我们的Angular项目。基于https://github.com/angular-eslint/angular-eslint#notes-对于esint插件更漂亮的用户，*.ts和.html可以通过设置来配置：

.eslintrc.json

{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
{
"files": ["*.ts"],
"parserOptions": {
"project": ["tsconfig.json", "e2e/tsconfig.json"],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:prettier/recommended"
],
"rules": {}
},
// NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
{
"files": ["*.html"],
"extends": ["plugin:@angular-eslint/template/recommended"],
"rules": {}
},
// NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
{
"files": ["*.html"],
"excludedFiles": ["*inline-template-*.component.html"],
"extends": ["plugin:prettier/recommended"],
"rules": {
// NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
"prettier/prettier": ["error", { "parser": "angular" }]
}
}
}

然而，除了*.ts和*.html之外，项目中还有其他文件类型，例如*.js、*.json、*.yaml。。。等

问题：运行ng lint时，如何使用类似的方法使Prettier自动格式化其他文件类型？以下是我向.eslintrc.json添加的内容，但运行ng lint没有任何效果。注意，我已经在angular.json中添加了文件类型

.eslintrc.json中的更多项目

// JSON: https://www.npmjs.com/package/eslint-plugin-json
{
"files": ["*.json"],
"extends": [
"plugin:json/recommended-with-comments",
"plugin:prettier/recommended"
]
},
// JavaScript
{
"files": ["*.js"],
"excludedFiles": ["karma.conf.js"], // out-of-the-box karma.conf.js has known lint errors
"extends": ["eslint:recommended", "plugin:prettier/recommended"]
},
// YAML
{
"files": ["*.yaml", "*.yml"],
"plugins": ["yaml"],
"extends": ["plugin:yaml/recommended", "plugin:prettier/recommended"]
},
// Markdown
{
"files": ["*.md"],
"plugins": ["markdown"],
"extends": ["plugin:markdown/recommended", "plugin:prettier/recommended"]
}

angular.json

"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html",
"**/*.json",
"**/*.js",
"**/*.yaml",
"**/*.md"
]
}

Answer 1

这是我用于NG存储库的初始设置。欢迎您重用它，并使用其他规则对其进行扩展。它允许在每次保存时自动格式化和修复。

.eslintrc:

{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint",
"prettier"
],
"ignorePatterns": [
"projects/**/*"
],
"overrides": [
{
"files": [
"*.ts"
],
"parserOptions": {
"project": [
"tsconfig.json"
],
"createDefaultProgram": true
},
"extends": [
"eslint:recommended",
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"rules": {
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "lib",
"style": "camelCase"
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "lib",
"style": "kebab-case"
}
],
"prettier/prettier": [
"error",
{
"arrowParens": "always",
"bracketSameLine": true,
"bracketSpacing": true,
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"endOfLine": "auto",
"useTabs": false
}
]
}
},
{
"files": [
"*.html"
],
"extends": [
"plugin:@angular-eslint/template/recommended"
],
"rules": {}
}
]
}

(对于VSCode(settings.json:

{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"editor.rulers": [
120
],
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": true
}

.editorconfig:

root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false

尽管如此，如果您在VSCode中启用了Prettier插件，它的格式可能与eslint本地配置不同。要解决此问题，请转到"；"扩展"；，找到Prettier并选择Disable(Workspace(