1

我最近使用 Vue/cli 4.2 创建了一个项目。问题是 Eslint 检测到格式错误（例如脚本中的双引号，函数括号之间没有空格），但在保存时没有修复它们，尽管lintOnSave: true在vue.config.js. 它应该是默认值，但如果我没有说明这个设置，eslint 会破坏编译并抛出格式错误。如果我包含lintOnSave: true，则执行编译并且错误仅在代码中标记并在终端中列出。唯一修复的错误是尾随空格，但这可能是由.editorconfig设置引起的。

我正在研究 VS 代码。我禁用了“formatOnSave”选项（否则 VS Code 应用它自己的设置）。我不认为这是 VS Code 设置的错误，因为如果我处理一些使用 vue-cli 3.7 创建的旧项目 - 它们工作正常并且自动格式化正确执行。我比较了设置，它们基本相同（lintOnSave: true旧版本中不需要的除外）。

我怎样才能解决这个问题？

这是我的设置——它们可能有点乱，因为我进行了很多试错：

1) *** .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    es6: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    indent: ['error', 4],
    semi: ["error", "always"],
    "space-before-function-paren": ["error", "always"],
    quotes: ["error", "single"]
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: "module",
    ecmaVersion: 6
  }
}

2) *** vue.config.js

module.exports = {
  lintOnSave: true, // If I remove this line, Eslint will break compilation and throw formatting errors
  chainWebpack: (config) => {
      config
          .plugin('html')
          .tap(args => {
              args[0].title = 'App title';
              return args;
          });
      config.resolve.alias
          .set('@comp', path.resolve('src/components/'));
  }
};

3) *** .editorconfig

[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
insert_final_newline = true

4）***包.json

{
  "name": "turniejomat",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "bootstrap-vue": "^2.1.0",
    "core-js": "^3.6.4",
    "mongodb-stitch-browser-sdk": "^4.8.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@babel/polyfill": "^7.7.0",
    "@vue/cli-plugin-babel": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "~4.2.0",
    "@vue/cli-plugin-vuex": "~4.2.0",
    "@vue/cli-service": "~4.2.0",
    "@vue/eslint-config-standard": "^5.1.0",
    "babel-eslint": "^10.0.3",
    "bootstrap": "^4.3.1",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.1.2",
    "mutationobserver-shim": "^0.3.3",
    "node-sass": "^4.12.0",
    "popper.js": "^1.16.0",
    "portal-vue": "^2.1.6",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-bootstrap-vue": "~0.6.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

我会很感激任何提示如何解决缺少自动格式化的问题。

4

0 回答 0