Tslint: элементы JSX без дочерних элементов должны быть самозакрывающимися [Ошибка] - PullRequest
Новая
       5

Tslint: элементы JSX без дочерних элементов должны быть самозакрывающимися [Ошибка]

0 голосов
/ 10 февраля 2020

Итак, я искал решение этой проблемы. Мое решение не будет построено с помощью команды 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 структуру, если в этом нет полной необходимости

Что я ' m ищет правильное правило Tslint, чтобы использовать для подавления этой ошибки. Например, "react/self-closing-comp": false.

Надеюсь, кто-то уже видел это раньше и может помочь мне!

Большое спасибо!

1 Ответ

0 голосов
/ 11 февраля 2020

Согласно npmjs .com по состоянию на 20.01.2020:

TSLint устарел в пользу ESLint. Для получения дополнительной информации см. https://github.com/palantir/tslint-react/issues/210.

Вы можете настроить существующее решение TSLint для использования новых правил ESLint, это делается так:

  1. Согласно npmjs .com , установить ESLint с помощью команды npm: npm install eslint --save-dev
  2. Согласно npmjs .com , разрешите правила ESLint, выполнив следующую команду: npm install --save-dev tslint-eslint-rules
  3. Измените файл tslint.json, добавив свойство extends, например: "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
  }
}

Надеюсь, это сэкономит кому-то время!

...