[英]ESLint Lint Indent Config for dropped lines
So, with Angular 11 deprecating TSLint, I made the switch to ESLint (not too happy with it so far).因此,随着 Angular 11 弃用 TSLint,我切换到 ESLint(目前对它不太满意)。
Right now I have this annoying spacing issue I'm trying to work out in the.eslintrc.js config.现在我有这个烦人的间距问题,我正在尝试在 .eslintrc.js 配置中解决。
Take these lines of code (this is what I have and what I want to keep):拿这几行代码(这是我拥有的,也是我想要保留的):
readonly DELETE_DIALOG_MESSAGE = "This message doesn't exceed the width limit & is 1 line.";
readonly RETURN_TO_DRAFT_MESSAGE =
"This message is supper long, like really loooong. So it exceeds my width limit and is dropped a line.";
You see that indent after the dropped line for the longer meesage?您看到较长消息的删除线后的缩进吗? I want to keep that.
我想保留它。 But ESLint is removing it.
但是 ESLint 正在删除它。
ESLint makes it look like this: ESLint 使它看起来像这样:
readonly DELETE_DIALOG_MESSAGE = "This message doesn't exceed the width limit & is 1 line.";
readonly RETURN_TO_DRAFT_MESSAGE =
"This message is supper long, like really loooong. So it exceeds my width limit and is dropped a line.";
See?看? No indent.
没有缩进。 It's even more frustarting because (I use prettier for formatting) my formatter will add the space back.
这更令人沮丧,因为(我使用 prettier 进行格式化)我的格式化程序会将空间添加回来。
I'm trying to find switch rule/config would add an indent when the line is dropped when it exceeds the width limit.我试图找到切换规则/配置会在超出宽度限制时删除行时添加缩进。
Any help would be appreciated!任何帮助,将不胜感激!
My indent rule is: "@typescript-eslint/indent": ["error", 2],
我的缩进规则是:
"@typescript-eslint/indent": ["error", 2],
And here's my whole.eslintrc.js config file:这是我的 whole.eslintrc.js 配置文件:
module.exports = {
env: {
browser: true,
es6: true,
node: true
},
extends: ["prettier", "prettier/@typescript-eslint"],
parser: "@typescript-eslint/parser",
parserOptions: {
project: "tsconfig.json",
sourceType: "module"
},
plugins: [
"eslint-plugin-import",
"eslint-plugin-jsdoc",
"@angular-eslint/eslint-plugin",
// "eslint-plugin-react",
"@typescript-eslint",
"@typescript-eslint/tslint"
],
rules: {
"@angular-eslint/component-class-suffix": "error",
"@angular-eslint/directive-class-suffix": "error",
"@angular-eslint/no-host-metadata-property": "error",
"@angular-eslint/no-input-rename": "error",
"@angular-eslint/no-inputs-metadata-property": "error",
"@angular-eslint/no-output-on-prefix": "error",
"@angular-eslint/no-output-rename": "error",
"@angular-eslint/no-outputs-metadata-property": "error",
"@angular-eslint/use-lifecycle-interface": "error",
"@angular-eslint/use-pipe-transform-interface": "error",
"@typescript-eslint/consistent-type-definitions": "error",
"@typescript-eslint/dot-notation": "off",
"@typescript-eslint/explicit-member-accessibility": [
"off",
{
accessibility: "explicit"
}
],
"@typescript-eslint/indent": ["error", 2],
"@typescript-eslint/member-delimiter-style": [
"error",
{
multiline: {
delimiter: "semi",
requireLast: true
},
singleline: {
delimiter: "semi",
requireLast: false
}
}
],
"@typescript-eslint/member-ordering": "off",
"@typescript-eslint/naming-convention": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-empty-interface": "error",
"@typescript-eslint/no-inferrable-types": [
"error",
{
ignoreParameters: true
}
],
"@typescript-eslint/no-misused-new": "error",
"@typescript-eslint/no-non-null-assertion": "error",
"@typescript-eslint/prefer-function-type": "error",
"@typescript-eslint/quotes": "off",
"@typescript-eslint/semi": ["error", "always"],
"@typescript-eslint/type-annotation-spacing": "error",
"@typescript-eslint/unified-signatures": "error",
"arrow-body-style": ["off"],
"arrow-parens": ["off", "always"],
"brace-style": ["error", "1tbs"],
"comma-dangle": "off",
"constructor-super": "error",
curly: "error",
"eol-last": "error",
eqeqeq: ["error", "smart"],
"guard-for-in": "error",
"id-blacklist": "off",
"id-match": "off",
"import/no-deprecated": "warn",
"jsdoc/no-types": "error",
"linebreak-style": "off",
"max-len": [
"error",
{
code: 140
}
],
"new-parens": "off",
"newline-per-chained-call": "off",
"no-bitwise": "error",
"no-caller": "error",
"no-console": [
"error",
{
allow: [
"log",
"dirxml",
"warn",
"error",
"dir",
"timeLog",
"assert",
"clear",
"count",
"countReset",
"group",
"groupCollapsed",
"groupEnd",
"table",
"Console",
"markTimeline",
"profile",
"profileEnd",
"timeline",
"timelineEnd",
"timeStamp",
"context"
]
}
],
"no-debugger": "error",
"no-empty": "off",
"no-eval": "error",
"no-extra-semi": "off",
"no-fallthrough": "error",
"no-irregular-whitespace": "off",
"no-multiple-empty-lines": "off",
"no-new-wrappers": "error",
"no-restricted-imports": ["error", "rxjs/Rx"],
"no-shadow": [
"off",
{
hoist: "all"
}
],
"@typescript-eslint/no-shadow": ["error"],
"no-throw-literal": "error",
"no-trailing-spaces": "error",
"no-undef-init": "error",
"no-underscore-dangle": "off",
"no-unused-labels": "error",
"no-var": "error",
"prefer-const": "error",
"quote-props": "off",
radix: "error",
"react/jsx-curly-spacing": "off",
"react/jsx-equals-spacing": "off",
"react/jsx-wrap-multilines": "off",
"space-before-function-paren": "off",
"space-before-blocks": "error",
"space-in-parens": ["off", "never"],
"spaced-comment": [
"error",
"always",
{
markers: ["/"]
}
],
"@typescript-eslint/tslint/config": [
"error",
{
rules: {
"import-spacing": true,
whitespace: [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"]
}
}
]
}
};
This is a conflict between the ESLint and Prettier formatting and is a well-known issue .这是 ESLint 和 Prettier 格式之间的冲突,是一个众所周知的问题。
The solution is to let Prettier handle formatting, while ESLint takes care of code quality issues: https://prettier.io/docs/en/integrating-with-linters.html解决方案是让 Prettier 处理格式化,而 ESLint 处理代码质量问题: https://prettier.io/docs/en/integrating-with-linters.html
The quickest and most comprehensive solution is this: eslint-config-prettier .最快最全面的解决方案是: eslint-config-prettier 。 What it does is, it turns off the formatting rules in ESLint, so that ESLint only takes care of code quality.
它的作用是关闭 ESLint 中的格式化规则,让 ESLint 只关心代码质量。 And then you will have Prettier run on either on save, on a pre-commit hook (preferred), or on pre-push to reformat the codebase.
然后您将在保存时、预提交挂钩(首选)或预推送以重新格式化代码库时运行 Prettier。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.