Tslint:没有子元素的 JSX 元素必须自动关闭 [错误]
Tslint: JSX elements with no children must be self closing [Error]
所以我一直在寻找解决这个问题的方法。我的解决方案不会通过命令 npm run build
构建,因为我有错误:
JSX elements with no children must be self-closing.
这里有一个类似的问题,没有被接受(或有效)的答案:JSX elements with no children must be self-closing
关联的 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;
"error" 出现在第 5 行,即:
<div>Content 1</div>
我正在使用 Tslint 并且在文件 tslint.json
.
中已经更改/使用了 Tslint 的许多功能
查看 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 core rules
我不想做的是:
- 完全禁用 TSLint
- 修改我的 HTML 结构,除非完全必要
我正在寻找的是用于抑制此错误的正确 Tslint 规则。
例如"react/self-closing-comp": false
.
希望有人以前看过这个并且可以帮助我!
非常感谢!
根据 npmjs.com 截至 2020 年 1 月:
TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint-react/issues/210 for more information.
您可以将现有的 TSLint 解决方案配置为使用 ESLint 的新规则,方法如下:
- 根据npmjs.com,使用npm命令安装ESLint:
npm install eslint --save-dev
- 根据 npmjs.com,通过 运行 以下命令允许 ESLint 规则:
npm install --save-dev tslint-eslint-rules
- 通过添加
extends
属性 修改您的 tslint.json
文件,如下所示:"extends": [ "tslint-eslint-rules"]
在这里可以找到大量相关的 ESLint 规则:ESLint Rules - npmjs.com and here ESLint Rules - eslint.org
修复错误的相关规则:
JSX elements with no children must be self-closing.
是这样的:
"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
}
}
希望这可以节省一些时间!
所以我一直在寻找解决这个问题的方法。我的解决方案不会通过命令 npm run build
构建,因为我有错误:
JSX elements with no children must be self-closing.
这里有一个类似的问题,没有被接受(或有效)的答案:JSX elements with no children must be self-closing
关联的 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;
"error" 出现在第 5 行,即:
<div>Content 1</div>
我正在使用 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 core rules
我不想做的是:
- 完全禁用 TSLint
- 修改我的 HTML 结构,除非完全必要
我正在寻找的是用于抑制此错误的正确 Tslint 规则。
例如"react/self-closing-comp": false
.
希望有人以前看过这个并且可以帮助我!
非常感谢!
根据 npmjs.com 截至 2020 年 1 月:
TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint-react/issues/210 for more information.
您可以将现有的 TSLint 解决方案配置为使用 ESLint 的新规则,方法如下:
- 根据npmjs.com,使用npm命令安装ESLint:
npm install eslint --save-dev
- 根据 npmjs.com,通过 运行 以下命令允许 ESLint 规则:
npm install --save-dev tslint-eslint-rules
- 通过添加
extends
属性 修改您的tslint.json
文件,如下所示:"extends": [ "tslint-eslint-rules"]
在这里可以找到大量相关的 ESLint 规则:ESLint Rules - npmjs.com and here ESLint Rules - eslint.org
修复错误的相关规则:
JSX elements with no children must be self-closing.
是这样的:
"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
}
}
希望这可以节省一些时间!