javascript 使用链调用表达式的ESLint缩进规则配置错误

3zwjbxry  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(118)

在我们的JS文件中,我们有以下结构:

import { html } from 'lit-html';

function when(expression, trueValue, falseValue) {
  if (expression) {
    return trueValue();
  }

  if (falseValue) {
    return falseValue();
  }
  return undefined;
}

export class SomeClass extends LitElement {
  render = () => html`
    <someHtml>
      <p>Some text</p>
      ${when(
        someCondition,
        () => html`<div>on condition true</div>`
        () => html`<div>on condition false</div>`
      )}
    </someHtml>
  `;
}

when函数会在Prettier和ESLint配置之间产生冲突。
下面是我们的prettier配置:

{
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
}

eslint/indent规则:

"indent": [
  "error",
  2,
  {
    "SwitchCase": 1,
    "CallExpression": { "arguments": 1 }
  }
]

你能告诉我为什么我得到下面的错误?

iezvtpos

iezvtpos1#

不要使用eslint进行缩进。Prettier vs. Linters文档:

与ESLint/TSLint/stylelint等相比如何?

短绒有两类规则:

格式化规则:例如:max-lenno-mixed-spaces-and-tabskeyword-spacingcomma-style...

Prettier减轻了对这整个规则类别的需求!Prettier将以一致的方式从头开始重新打印整个程序,因此程序员不可能再在那里犯错误:)

代码质量规则:例如no-unused-varsno-extra-bindno-implicit-globalsprefer-promise-reject-errors...

更漂亮的人对这些规则没有任何帮助。它们也是linters提供的最重要的,因为它们可能会捕获代码中的真正错误!
换句话说,使用Prettier来格式化,使用linter来捕获bug!
本指南也适用于eslint/indent规则。这种冲突(和解决方案)在其他地方有相当好的记录:

如果你还没有像Integrating with Linters中描述的那样在eslint和prettier之间做一个更纯粹的集成,然后确保你以后不会覆盖prettier/recommended,你很可能会从中受益。
作为一个侧面说明,请don't post screenshots of plaintext。相反,您可以使用以下内容表示错误:
示例代码:

someExampleJavaScriptWithErrors()

显示的错误:

  • ESLint:应为4个空格的缩进,但找到了8。(缩进)
  • ESLint:应为6个空格的缩进,但找到了10。(缩进)

相关问题