ESLint - Помогите определить подправило отступа - PullRequest
Новая
       84

ESLint - Помогите определить подправило отступа

0 голосов
/ 30 апреля 2020

Как мне заставить ESLint indent использовать этот код: 

const a = `
  <li
    style=${styleMap({
      color: '#F00',      // bad line
      background: '#0F0'  // bad line
    })}                   // bad line
  >Something</li>
`;

Не нравится отступ в строках, которые я пометил bad line. Это то, что он хочет, чтобы я сделал: 

const a = `
  <li
    style=${styleMap({
  color: '#F00',
  background: '#0F0'
})}
  >
    <span>Something</span>
  </li>
`;

, что выглядит нелепо.

Вот мое текущее правило относительно «отступа»: 

indent: ['error', 2, { SwitchCase: 1 }],

Я просмотрел отступ документация, но не видел ничего, что, казалось бы, соответствовало этому сценарию.

Редактировать: я просмотрел все опции для правила indent, установил их все на 0, затем прошел один за другим, установив их на 10, чтобы увидеть, какое из них влияет на мое выражение. Похоже, что ObjectExpression является виновником, но обычно это хорошее значение.

Похоже, что существует некоторая проблема, связанная с литеральными шаблонными объявлениями объекта-заполнителя из нескольких строк. Я думаю, что единственным моим выходом будет добавить его к ignoreNodes.

1 Ответ

0 голосов
/ 30 апреля 2020

Примечание : окончательную версию см. В нижней части этого ответа. Настроил его еще дальше, продолжая раскрашивать все.

Как только я немного сузил его, я смог найти некоторые лучшие результаты Google и нашел ответ, который был очень похож на мою проблему, но не совсем: Игнорировать отступ в литерале шаблона с помощью правила ESLint `indent`

Шаблон AST не работал для моего конкретного c случая (по крайней мере, первого). После того, как я попробовал это сделать с помощью AST Explorer, я использовал следующие шаблоны: 

indent: ['error', 2, { 
  ignoredNodes: [
    'TemplateLiteral > CallExpression > ObjectExpression',
    'TemplateLiteral *'
  ]
]

Первый описывает точный сценарий в моем вопросе. Второй описывает похожий сценарий: 

const a = `
  <li
    style=${someFunc(
      'arg1',
      'arg2'
    })}      
  >Something</li>
`;

Похоже, что в конечном итоге это проблема, которую ESLint придется как-то исправить, поскольку одна проверка ObjectExpression действительно запутывается внутри заполнителя литерала шаблона.

РЕДАКТИРОВАТЬ:

Я изменил второе выражение с TemplateLiteral > CallExpression на TemplateLiteral > *, потому что я нашел еще два слегка отличающихся сценария ios, которые еще не были пойманы. Я бы предпочел быть более конкретным c, но я не хочу указывать 80 различных сценариев ios.

РЕДАКТИРОВАТЬ 2:

Изменено TemplateLiteral > * к TemplateLiteral * вместо этого, потому что найдено еще больше, которые были вложены и не перехвачены > *.

Теперь шаблоны только один: 

indent: ['error', 2, { 
  ignoredNodes: [
    'TemplateLiteral *'
  ]
]
...