Vue + Eslint：lintOnSave=false 不起作用，浏览器覆盖仍然会中断开发

Posted 2023-03-13

【中文标题】Vue + Eslint：lintOnSave=false 不起作用，浏览器覆盖仍然会中断开发

【英文标题】：Vue + Eslint: lintOnSave=false not working, browser-overlay still interrupts development

【发布时间】：2020-12-16 19:47:48

【问题描述】：

我更新了我的包，现在我在开发过程中得到了关于 linting 错误的浏览器覆盖。

前段时间我在设置 Vue 2 时遇到过这个问题，现在 Vue 3 也出现了同样的问题。

我想将警告/错误保留在控制台中，但覆盖中断了我的开发，有人知道如何解决这个问题吗？

package.json

  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "env-cmd -f ../.env vue-cli-service serve --port 4022",
    "build": "env-cmd -f ../.env vue-cli-service build",
    "build-action": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "@apollo/client": "^3.1.3",
    "@vue/cli": "^4.5.4",
    "core-js": "^3.6.5",
    "env-cmd": "^10.1.0",
    "graphql": "^15.3.0",
    "graphql-tag": "^2.11.0",
    "lodash": "^4.17.20",
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0-rc.9",
    "vue-i18n": "^9.0.0-alpha.15",
    "vue-router": "^4.0.0-beta.7",
    "vuex": "^4.0.0-beta.4"
  ,
  "devDependencies": 
    "@types/lodash": "^4.14.160",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "^4.5.4",
    "@vue/cli-plugin-eslint": "^4.5.4",
    "@vue/cli-plugin-pwa": "^4.5.4",
    "@vue/cli-plugin-router": "^4.5.4",
    "@vue/cli-plugin-typescript": "^4.5.4",
    "@vue/cli-plugin-vuex": "^4.5.4",
    "@vue/cli-service": "^4.5.4",
    "@vue/compiler-sfc": "^3.0.0-rc.9",
    "@vue/eslint-config-airbnb": "^5.1.0",
    "@vue/eslint-config-typescript": "^5.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-vue": "^7.0.0-beta.2",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "typescript": "^3.9.7",
    "vue-cli-plugin-vue-next": "~0.1.3"
  

vue.config.js

module.exports = 
  lintOnSave: false,
  // lintOnSave: process.env.NODE_ENV !== 'production',
  pwa: 
    workboxOptions: 
      skipWaiting: true,
    ,
  ,
;

eslintrc.js

module.exports = 
  root: true,
  env: 
    node: true,
  ,
  extends: ['plugin:vue/vue3-recommended', '@vue/airbnb', '@vue/typescript/recommended'],
  parserOptions: 
    ecmaVersion: 2020,
  ,
  rules: 
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'import/extensions': [
      'error',
      'always',
      
        ts: 'never',
        vue: 'never',
      ,
    ],
  ,
;

【问题讨论】：

这能回答你的问题吗？ How do you disable linting when using vue-cli serve?

@soroush 感谢您的建议，但我已经尝试了 lintOnSave 标志。

【参考方案1】：

我发现了这个：https://***.com/a/41211721/4071305。

我添加了一个空的打字稿文件并编辑了我的 tsconfig.json 的包含和排除部分，如下所示：

"include": [
  "empty.ts",
],
"exclude": [
  "node_modules",
  "src/**/*.ts", 
  "src/**/*.vue",
  "tests/**/*.ts"
]

这个修补程序有效，但我希望 Vue 3 正式发布时 lintOnSave 标志能够工作。