prettier eslint
v16.3.0
Форматирует ваш JavaScript, используя prettier , затем eslint --fix
Функция fix of eslint довольно великолепна и может автоматически вформировать/исправить большую часть вашего кода в соответствии с вашей конфигурацией Eslint. prettier - более мощный автоматический форматер. Одна из хороших вещей в красивее - это то, насколько она самоуверенна. К сожалению, это не достаточно самоуверенно, и/или некоторые мнения отличаются от моих собственных. Таким образом, после красивого форматирования кода я начинаю получать ошибки в личинке.
Это форматирует ваш код с помощью prettier , а затем передает результат этого eslint --fix . Таким образом, вы можете получить преимущества превосходных возможностей форматирования prettier , но также извлечь выгоду из возможностей конфигурации eslint .
Для файлов с расширением
.css,.less,.scssили.jsonэто работает толькоprettierпосколькуeslintне может обработать их.
Этот модуль распространяется через NPM, который связан с узлом и должен быть установлен в качестве одного из devDependencies :
npm install --save-dev prettier-eslint
const format = require ( 'prettier-eslint' ) ;
// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;
const options = {
text : sourceCode ,
eslintConfig : {
parserOptions : {
ecmaVersion : 7
} ,
rules : {
semi : [ 'error' , 'never' ]
}
} ,
prettierOptions : {
bracketSpacing : true
} ,
fallbackPrettierOptions : {
singleQuote : false
}
} ;
const formatted = await format ( options ) ;
// notice no semicolon in the formatted text
formatted ; // const { foo } = barИсходный код для формата.
Путь форматированного файла может использоваться для переопределения eslintConfig (Eslint будет использоваться для поиска соответствующей конфигурации для файла).
Конфигурация для форматирования с Eslint. Может быть переопределен с filePath .
Варианты, которые можно пройти для форматирования с prettier . Если не предоставлено, prettier-eslint попытается создать параметры на основе eslintConfig (независимо от того, предоставлено или получено через filePath ). Вы также можете предоставить некоторые варианты и получить оставшиеся параметры, полученные с помощью вашей конфигурации Eslint. Это полезно для таких вариантов, как parser .
Примечание. Эти параметры переопределяют конфигурацию Eslint. Если вы хотите, чтобы варианты отступления использовались только в том случае, если правило не может быть выведено из Eslint, см. «SharkbackPrettierOptions» ниже.
Параметры, которые можно пройти для форматирования с помощью prettier если prettier-eslint не способен создавать параметры на основе eslintConfig (независимо от того, предоставлено или получено через filePath ). Эти варианты будут использоваться только в том случае, что соответствующее правило Eslint не может быть найдено, и более красивой опции не был определен вручную в prettierOptions . Если отступление не дано, prettier-eslint просто будет использовать prettier значение по умолчанию в этом сценарии.
prettier-eslint делает немало журналов, если хотите. Пропустите это, чтобы установить количество журналов, которые вы хотите увидеть. По умолчанию process.env.LOG_LEVEL || 'warn' .
По умолчанию, prettier-eslint попытается найти соответствующий модуль eslint (и prettier ) на основе filePath . Если он не может найти его, то он будет использовать версию, которую prettier-eslint установил локально. Если вы хотите указать путь к модулю eslint вы хотели бы использовать prettier-eslint использование, вы можете предоставить полный путь к нему с опцией eslintPath .
Это в основном то же самое, что и eslintPath за исключением prettier модуля.
По умолчанию, prettier-eslint сначала запустит prettier , затем eslint --fix . Это здорово, если вы хотите использовать prettier , но переопределите некоторые стили, которые вам не нравится, используя eslint --fix .
Альтернативный подход заключается в использовании разных инструментов для разных проблем. Если вы предоставите prettierLast: true , он сначала запустит eslint --fix , то prettier . Это позволяет вам использовать eslint для поиска ошибок и/или плохих практик, и использовать prettier для обеспечения соблюдения стиля кода.
prettier-eslint будет распространять ошибки анализа только тогда, когда либо prettier , либо eslint не удастся. В дополнение к распространению ошибок, он также зарегистрирует конкретное сообщение, указывающее, что оно делает во время сбоя.
Примечание. format не будет показывать никаких сообщений, касающихся нарушенных правил ни в prettier , ни eslint .
const { analyze } = require ( "prettier-eslint" ) ;
const text = 'var x = 0;' ;
const result = await analyze ( {
text ,
eslintConfig : {
rules : { 'no-var' : 'error' }
}
} )
console . log ( result . messages ) ;производит на консоли
[{
ruleId: 'no-var',
severity: 2,
message: 'Unexpected var, use let or const instead.',
line: 1,
column: 1,
nodeType: 'VariableDeclaration',
messageId: 'unexpectedVar',
endLine: 1,
endColumn: 11
}]
Дополнительный analyze экспорта идентичен format , за исключением того, что он возвращает простой объект с output свойствами, давая точную строку, которую будет возвращать format , и messages дающие массив описаний сообщений (со структурой, показанной выше), созданной анализом eslint кода. Вы можете использовать analyze вместо format , если хотите выполнить форматирование, но также захватить любые ошибки, которые eslint может заметить.
Код ➡ красивее ➡ eslint -fix ➡ форматированный код
eslintConfig и prettierOptions могут быть предоставлены в качестве аргумента. Если eslintConfig не предоставлен, то prettier-eslint будет искать их на основе fileName (если не предусмотрено fileName , то он использует process.cwd() ). После того, как prettier-eslint обнаружил eslintConfig , prettierOptions выведы из eslintConfig . Если некоторые из prettierOptions уже были предоставлены, то prettier-eslint только выведет оставшиеся варианты. Этот вывод происходит в src/utils.js .
Важно отметить об этом выводе, это то, что он может не поддерживать вашу конкретную конфигурацию Eslint. Таким образом, вы захотите проверить src/utils.js чтобы увидеть, как выполняется вывод для каждой опции (на каких правилах (ы) и т. Д.) И выполните запрос на вытяжку, если ваша конфигурация поддерживается.
По умолчанию, если у вас отключено все соответствующие правила Eslint (или Eslint полностью отключена через /* eslint-disable */ Затем более красивые варианты вернутся к prettier значениям:
{
printWidth : 80 ,
tabWidth : 2 ,
singleQuote : false ,
trailingComma : 'none' ,
bracketSpacing : true ,
semi : true ,
useTabs : false ,
// prettier-eslint doesn't currently support
// inferring these two (Pull Requests welcome):
parser : 'babylon' ,
bracketSameLine : false ,
} Есть много журналов, доступных с prettier-eslint . При отладке вы можете использовать один из logLevel S, чтобы получить лучшее представление о том, что происходит. Если вы используете prettier-eslint-cli , то вы можете использовать --log-level trace , если вы используете плагин Atom, то вы можете открыть инструменты разработчика и ввести: process.env.LOG_LEVEL = 'trace' в консоли, а затем запустите формат. Вы увидите кучу журналов, которые должны помочь вам определить, является ли проблема prettier , eslint --fix , как prettier-eslint который делает ваши prettier варианты или любое количество других вещей. Вас попросят сделать это перед тем, как задать проблемы, так что, пожалуйста, сделайте?
Примечание: когда вы это делаете, рекомендуется, чтобы вы запустили это только в одном файле, потому что есть много журналов :)
Используя // eslint-disable-line , иногда вы можете получить ошибки в личинке после того, как код был обработан этим модулем. Это потому, что prettier меняет это:
// prettier-ignore
if ( x ) { // eslint-disable-line
}к этому:
if ( x ) {
// eslint-disable-line
} И eslint --fix не изменю его обратно. Вы можете заметить, что // eslint-disable-line перешла на новую линию. Чтобы обойти эту проблему, вы можете использовать //eslint-disable-next-line вместо // eslint-disable-line
// eslint-disable-next-line
if ( x ) {
} prettiereslintНикто, о чем я знаю. Не стесняйтесь подать пиар, если вы знаете какие -либо другие решения.
prettier-eslint-cli -интерфейс командной строкиprettier-atom - плагин Atom (проверьте флажок "Eslint Integration" в настройках)vs-code-prettier-eslint -плагин Visual Studio Codeeslint-plugin-prettier -плагин Eslint. В то время как Creatier-Eslint использует eslint --fix для изменения вывода prettier , Eslint-Plugin-Pettier сохраняет prettier вывод и интегрирует его с обычным рабочим процессом Eslint.prettier-eslint-webpack-plugin -Prettier Eslint Webpack Plugin Спасибо этим людям (ключ эмодзи):
Кент С. Доддс ? | Gyandeep Singh ? | Игорь ПНЕВ ? | Бенджамин Тан ? | Эрик Маккормик | Саймон Лиделл | Том МакКирни |
Патрик Окерстран | Лохлан Банн | Даниэль Тервиэль ? ? | Робин Малфайт ? | Майкл МакДермотт | Адам Станквич | Стивен Джон Соренсен |
Брайан Ди Пальма ? | Роб Уайз | Patryk Peas ? | Тидж Керселман ? | Энрике Кабальеро ? | Члукаш Мороз ? | Саймон Фридлунд ? ? ? ? ? ? |
Оливер Джозеф Эш ? | Марк Пэлфриман | Алекс Тейлор | Сианминг Чжун | Льюис Лю | Хамза Хамиди ? ? ? ? | Раджив Ранджан Сингх |
Игорь ? | Ребекка Вест | Крис Боббе ? | Jounqin ? ? ? ? ? ? ? | Джонатан Рем | Глен Уитни |
Этот проект следует за спецификацией всех контролей. Взносы любого вида приветствуются!
Грань
