在Vue-cli项目中应用eslint-loader选项，使eslint配置得到尊重

Question

我的Vue-Cli项目是基于vue模板的(不是开源的)。

我遇到的问题是我禁用的eslint规则正在破坏构建。

当我第一次运行vue-cli-service serve时，它构建并运行良好。但是，对源代码的任何更改都会触发检查，并且应该禁用的规则会显示为错误:

ERROR  Failed to compile with 1 error                                                                                                                                                                                                                                           3:57:50 pm
error  in ./src/views/inventory/map/layers/lotsData.js
Module Error (from .../node_modules/eslint-loader/index.js):
.../frontends/backoffice/src/views/inventory/map/layers/lotsData.js
70:40  error  'map' is defined but never used  no-unused-vars
87:3   error  Unexpected console statement     no-console
✖ 2 problems (2 errors, 0 warnings)

.eslintrc.js看起来像这样:

const warnInLocal = process.env.NODE_ENV === undefined ? 0 : 'error'
module.exports = {
root: true,
env: {
node: true,
'jest/globals': true,
},
extends: ['plugin:vue/recommended', '@vue/airbnb'],
parserOptions: {
parser: 'babel-eslint',
},
ignorePatterns: ['**/node_modules/**', '**/.history/**'],
rules: {
// These make sense in deployment, but cause friction in local development
'no-console': 0,
'no-debugger': 0,
'no-unused-vars': 0,
'no-unused-expressions': 0,
},
plugins: ['jest'],
}

vue.config.js:

//snipped
module.exports = {
publicPath: '/',
configureWebpack: {
devtool: 'source-map',
resolve: {
alias: {
'@themeConfig': path.resolve(__dirname, 'themeConfig.js'),
'@core': path.resolve(__dirname, 'src/@core'),
'@validations': path.resolve(__dirname, 'src/@core/utils/validations/validations.js'),
'@axios': path.resolve(__dirname, 'src/libs/axios'),
},
},
},
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
// eslint-disable-next-line no-param-reassign
options.transformAssetUrls = {
// snipped
}
return options
})
},
transpileDependencies: ['vue-echarts', 'resize-detector'],
}

最后package.json:

"devDependencies": {
"@babel/plugin-proposal-throw-expressions": "^7.14.5",
"@serverless-stack/cli": "0.36.0",
"@vue/cli-plugin-babel": "~4.5.9",
"@vue/cli-plugin-eslint": "^4.5.13",
"@vue/cli-plugin-router": "~4.5.9",
"@vue/cli-plugin-vuex": "~4.5.9",
"@vue/cli-service": "~4.5.9",
"@vue/eslint-config-airbnb": "^5.3.0",
"@vuepress/plugin-medium-zoom": "^1.7.1",
"babel-eslint": "^10.1.0",
"eslint": "^7.31.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-vue": "^7.14.0",
"sass": "1.32.*",
"sass-loader": "^10.1.0",
"vue-template-compiler": "2.x"
}

eslint-loader文档中给出了一些设置，但它们引用的是一个webpack配置文件，而这个项目没有。我想我应该把它们放在chainWebpack下，但我真的不明白那是什么样子。

(我也知道eslint-loader被弃用了，但我不认为我有能力取代它。)

我真的只是想让eslint配置正确地应用，即使在热加载期间，所以任何关于这一点的建议都是感激的。

Answer 1

将此添加到我的vue.config.js中似乎可以工作:

chainWebpack: config => {
// ... existing 'vue-loader' rule ...
// stop warnings breaking the build locally
config.module
.rule('eslint')
.use('eslint-loader')
.loader('eslint-loader')
.tap(options => ({
...options,
failOnWarning: false,
failOnError: true,
emitWarning: true,
}))