Tslint: JSX elements with no children must be self closing [Error] - html

Question

So I've been searching for a solution to this issue. My solution will not build via the command npm run build as I have the error:
JSX elements with no children must be self-closing.
There is a similar issue here with no accepted (or working) answers: JSX elements with no children must be self-closing
The associated Typescript/HTML is of the format:
class ExampleClass {
render() {
return <div>
<div>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
</div>;
}
}
export default ExampleClass;
The "error" occurs on line 5 which is:
<div>Content 1</div>
I'm using Tslint and have a number of the features of Tslint already changed / working in the file tslint.json.
See the tslint.json file as it currently stands:
{
"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
}
}
Here are the various things I've tried (consecutively, not all at once) - with no success:
"prefer-const": [
true,
{ "destructuring": "all" }
],
"react/self-closing-comp": "off",
"react/self-closing-comp": false,
"no-trailing-whitespace": false
The rules for Tslint can be found here: TSLint core rules
What I'm not looking to do is:
Completely disable TSLint
Modify my HTML structure unless totally necessary
What I'm looking for is the correct Tslint rule to use to suppress this error.
E.g. "react/self-closing-comp": false.
Hopefully someone out there has seen this before & can give me a hand!
Many thanks!

Answer 1

According to the npmjs.com as of the 20/01/2020:
TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint-react/issues/210 for more information.
You can configure your existing TSLint solution to use the new rules from ESLint, this is done like so:
According to npmjs.com, install ESLint with the npm command: npm install eslint --save-dev
According to npmjs.com, allow the ESLint rules by running the following command: npm install --save-dev tslint-eslint-rules
Modify your tslint.json file by adding an extends property, like so: "extends": [ "tslint-eslint-rules"]
A good number of relevant ESLint rules are found here: ESLint Rules - npmjs.com and here ESLint Rules - eslint.org
The relevant rule to fix the error:
JSX elements with no children must be self-closing.
was this:
"jsx-self-close": false
My final tslint.json file looked like this:
{
"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
}
}
Hopefully this saves someone some time!