Tslint：沒有子元素的 JSX 元素必須自關閉 [錯誤]

Question

所以我一直在尋找解決這個問題的方法。 我的解決方案不會通過命令npm run build因為我有錯誤：

沒有子元素的 JSX 元素必須是自閉合的。

這里有一個類似的問題，沒有被接受（或有效）的答案： 沒有子元素的 JSX 元素必須是自閉合的

相關的Typescript / HTML格式如下：

class ExampleClass { 
    render() {
           return <div>
               <div> 
                   <div>Content 1</div>
                   <div>Content 2</div>
                   <div>Content 3</div>
              </div>
          </div>;
      }
}
export default ExampleClass;

“錯誤”發生在第 5 行，即：

<div>Content 1</div>

我正在使用Tslint並且Tslint的許多功能已經在文件tslint.json更改/工作。

查看當前的tslint.json文件：

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "gulpfile.js",
      "bin/**",
      "wwwroot/**",
      "config/**/*.js",
      "node_modules/**"
    ]
  },
  "rules": {
    "prefer-const": false,
    "triple-equals": false,
    "jsx-no-lambda": false,
    "object-literal-shorthand": false,
    "no-shadowed-variable": false,
    "ban-types": false,
    "one-variable-per-declaration": false,
    "callable-types": false,
    "quotemark": [ false, "single", "jsx-double" ],
    "indent": [ true, "spaces", 2 ],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "comment-format": false,
    "no-trailing-whitespace": false,
    "one-line": false,
    "max-classes-per-file": false,
    "jsx-boolean-value": false,
    "no-empty-interface": false,
    "variable-name": [ true, "allow-pascal-case", "allow-snake-case" ],
    "no-console": false,
    "interface-over-type-literal": false
  }
}

這是我嘗試過的各種事情（連續，不是一次全部） - 沒有成功：

"prefer-const": [
      true,
      { "destructuring": "all" }
    ],
"react/self-closing-comp": "off",
"react/self-closing-comp": false,
"no-trailing-whitespace":  false

Tslint 的規則可以在這里找到： TSLint 核心規則

什么我不希望做的是：

• 完全禁用 TSLint
• 除非完全必要，否則修改我的 HTML 結構

我正在尋找的是用於抑制此錯誤的正確 Tslint 規則。
例如"react/self-closing-comp": false 。

希望有人以前看過這個並且可以幫我一把！

非常感謝！

Answer 1

根據截至 2020 年 1 月 20 日的 npmjs.com ：

TSLint 已被棄用，取而代之的是 ESLint。 請參閱https://github.com/palantir/tslint-react/issues/210了解更多信息。

你可以配置你現有的 TSLint 解決方案來使用來自 ESLint 的新規則，這樣做是這樣的：

1. 根據npmjs.com ，使用 npm 命令npm install eslint --save-dev ： npm install eslint --save-dev
2. 根據npmjs.com ，通過運行以下命令允許 ESLint 規則： npm install --save-dev tslint-eslint-rules
3. 通過添加extends屬性來修改您的tslint.json文件，如下所示： "extends": [ "tslint-eslint-rules"]

在這里可以找到大量相關的 ESLint 規則： ESLint 規則 - npmjs.com和這里ESLint 規則 - eslint.org

修復錯誤的相關規則：

沒有子元素的 JSX 元素必須是自閉合的。

這是：

 "jsx-self-close": false

我的最終tslint.json文件如下所示：

{
  "extends": [ "tslint-eslint-rules", "tslint:latest", "tslint-react", "tslint-config-prettier" ],
  "linterOptions": {
    "exclude": [
      "gulpfile.js",
      "bin/**",
      "wwwroot/**",
      "config/**/*.js",
      "node_modules/**"
    ]
  },
  "rules": {
    "jsx-self-close": false,
    "jsx-wrap-multiline": false,
    "no-constant-condition": true,
    "no-unused-expression": false,
    "no-unused-variable": false,
    "no-string-throw": false,
    "prefer-const": false,
    "triple-equals": false,
    "jsx-no-lambda": false,
    "object-literal-shorthand": false,
    "no-shadowed-variable": false,
    "ban-types": false,
    "one-variable-per-declaration": false,
    "callable-types": false,
    "quotemark": [ false, "single", "jsx-double" ],
    "indent": [ true, "spaces", 2 ],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false,
    "comment-format": false,
    "no-trailing-whitespace": false,
    "one-line": false,
    "max-classes-per-file": false,
    "jsx-boolean-value": false,
    "no-empty-interface": false,
    "variable-name": false,
    "no-console": false,
    "interface-over-type-literal": false,
    "no-conditional-assignment": false,
    "only-arrow-functions": false,
    "no-var-keyword": false,
    "no-empty": false,
    "no-submodule-imports": false,
    "no-duplicate-imports": false,
    "no-useless-rename": false,
    "no-implicit-dependencies": false,
    "no-return-await": false,
    "no-object-literal-type-assertion": false,
    "prefer-object-spread": false,
    "prefer-conditional-expression": false,
    "jsdoc-format": false,
    "prefer-for-of": false,
    "radix": false
  }
}

希望這可以節省一些時間！