«Статья была впервые опубликована вGitHub Blog』
вопрос
Проект был создан с помощью приложения create-react-app в начале, и настроенный ESLint использовался AlloyTeam.eslint-config-alloy/react, Конфигурация по умолчанию очень разумна, и каждая конфигурация имеет соответствующие инструкции, просто нужно изменить некоторые правила в соответствии с личными предпочтениями Моя личная измененная конфигурация .eslintrc.json выглядит следующим образом.
{
"extends": [
"eslint-config-alloy/react"
],
"globals": {
// 这里填入你的项目需要的全局变量
// 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
//
// jQuery: false,
// $: false
},
"rules": {
"indent": [
"warn",
2,
{
"SwitchCase": 1,
"flatTernaryExpressions": true
}
],
"semi": [
"error",
"never"
],
"react/jsx-indent": [
"warn",
2
],
"react/jsx-indent-props": [
"warn",
2
],
"no-unused-vars": [
"warn",
{
"vars": "all",
"args": "none",
"caughtErrors": "none"
}
]
}
}
но запустить после извлеченияnpm startсообщит об ошибке напрямую
думать
Само собой разумеется, что конфигурация до и после извлечения не изменилась, но конфигурация всплывает. npm start должен запускаться напрямую, но сообщается об ошибке ESLint.
Сначала я подумал, что этоeslint-config-alloy/reactПроблема, а затем переписанные некоторые конфигурации все равно будут сообщать об ошибке, что доказывает, что это не проблема с eslint-config-alloy/react. гуглите послеissueОбнаружить:
By default Eslint errors will raise webpack errors unless you change the config as shown above.
То есть ESLint заставит webpack сообщить об ошибке, когда обнаружит ошибку уровня ошибки, что приведет к сбою компиляции.
Но почему код, который может пройти проверку до извлечения, обнаруживает сообщение об ошибке после извлечения?
Просто и грубо, давайте посмотрим непосредственно на create-react-appДокументацияРаздел по ESLint в
If you want to enable even more accessibility rules, you can create an
.eslintrcfile in the root of your project with this content:{ "extends": ["react-app", "plugin:jsx-a11y/recommended"], "plugins": ["jsx-a11y"] }However, if you are using Create React App and have not ejected, any additional rules will only be displayed in the IDE integrations, but not in the browser or the terminal.
Теперь вспомним, как работает ESLint в create-react-app: в терминале есть информация об ошибках/предупреждениях, но информация печатается не в соответствии с правилами eslint-config-alloy/react, а с правилами create-react-app по умолчанию. Функция красной волнистой линии, интегрированная в редактор (я использую VSCode), отображается в соответствии с правилами eslint-config-alloy/react.
Однако после извлечения подсказки компиляции и волны проверяются в соответствии с правилами eslint-config-alloy/react, поэтому код, прошедший проверку в соответствии с правилами по умолчанию до извлечения, не может пройти проверку eslint-config-alloy/. реагировать обзор отчета после выброса.неправильно. (правила eslint-config-alloy/react очень строгие).
Должна ли ошибка ESLint выходить напрямую?
Существует также конфликт между идеями дизайна и идеями использования: уровень ошибки ESLint по умолчанию напрямую сообщает об ошибке и завершает работу, потому что, когда уровень ошибки определенного правила установлен как ошибка, когда код ошибки запускает правило, это означает, что программа основывается на правиле, это уже не правильно, не нужно потом компилировать и т.д. Поэтому код должен сначала пройти уровень ESLint (то есть правила, установленные пользователем для кода), прежде чем его можно будет поместить в babel для компиляции. (Подробности см. в комментарии Закаса по этому вопросу.Обсуждать)
(Лично я предпочитаю не выходить при возникновении ошибки, а затем выборочно модифицировать некоторые проблемные коды, а некоторые коды, сообщающие об ошибках, игнорировать и ждать рефакторинга. Но тщательное размышление об этом идет вразрез с идеей ESLint, т.к. различие между предупреждением и ошибкой, и эти несущественные ошибки должны быть фактически определены как предупреждения.)
проблема с конфигурацией eslint-loader
Согласно ESLint-loaderДокументация
failOnError(default:false)Loader will cause the module build to fail if there are any ESLint errors.
failOnErrorПо умолчаниюfalse, по инструкции не должно мешать сборке.
Автор ESLint-loader такжеупомянул(но еще в марте 2015 г.)
failOn* are off by default to avoid webpack to break the build for "just some linting issues". So you should not have any error/warning that break the build by default.
Однако на самом деле сборка все равно не работает.Конкретной причины не знаю.Также реагируют несколько вопросов.failOnErrorне работает, наверноеESLint-loaderНе удалось настроитьESLint, эта яма будет тщательно изучена, а затем засыпана (побег.
решение
план 1
Предоставлено автором eslint-loaderрешение
Like I said, you can use
emitWarning: trueoption to force all ESLint error/warning being reported as warnings
БудуemitWarningустановить какtrueВот и все, вся информация об ошибках/предупреждениях будет распечатана, ошибка не помешает компиляции, просто и грубо.
rules: [{
enforce: 'pre',
test: /\.jsx?$/,
loader: 'ESLint-loader',
options: {
emitWarning: true
}
}]
Сценарий 2
По дизайнерским задумкам великого бога Закаса, если сообщается об ошибке, компиляция будет заблокирована.Если она будет изменена до тех пор, пока она не пройдет, она будет распечатана, если будет сообщено как предупреждение.Лично я считаю, что это правильный способ следовать ESLint.
Вариант 3 (грубый)
Буду./node_modules/ESLint-loader/index.jsсередина
emitter(webpack.version === 2 ? new ESLintError(messages) : messages)
Просто прокомментируйте это! Не передавайте никакую информацию об ошибке в ESLint, и код ошибки не будет возвращен, поэтому на терминале всегда будет 0 ошибок 0 предупреждений (неправильно), и ошибку можно просмотреть только через подсказку красной строки редактора.
tips
Also to note, the actual build still finishes and produces output. This only affects wrappers that would call webpack, such as
webpack-dev-server(won't automatically reload the browser if lint errors exist) orfrontend-maven-plugin(will fail the maven build if lint errors exist).
этот человекупомянулЧто касается ESLint, на самом деле он не предотвращает сборку, но предотвращает автоматическое обновление браузера сервером, таким как webpack-dev-server, при обнаружении ошибки.