VSCode设置，EsLint和漂亮冲突

Question

我遇到了一个非常恼人的问题，某种设置冲突阻止了lint调整文件。我正在使用Wes Bos的ESLint/Prettier配置。例如，我有一个Vue文件：

<script>
import { mapState, mapActions } from "vuex";

export default {
  data: () => ({
    valid: false           <-------- Also receive eslint(comma-dangle) error here
  }),
  computed: {
    ...mapState("account", ["status"]),
  },
  methods: {
    ...mapActions("account", ["login", "logout"]),
  },
  created() {}
};
</script>

然而，在我的.eslintrc中，我有这个规则，因为我更喜欢脚本代码缩进一次：

"vue/script-indent": [
  "warn",
  2,
  {
    "baseIndent": 1
  }
],

当我保存文件以允许Prettier重新格式化并修复这些错误时，我可以看到逗号悬空和缩进问题在恢复并再次显示所有错误之前的一瞬间得到修复。冲突发生在哪里？

ESLint/漂亮对我来说是非常新的，我只是想建立一个好的系统！任何帮助将不胜感激。

其他相关文件：

VSCode settings.json

{
    "breadcrumbs.enabled": true,

    "editor.autoClosingBrackets": "always",
    "editor.autoClosingQuotes": "always",
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.fontFamily": "FiraCode-Retina",
    "editor.fontWeight": "500",
    "editor.letterSpacing": 0.5,
    "editor.lineHeight": 20,
    "editor.minimap.enabled": false,
    "editor.tabSize": 2,

    "emmet.includeLanguages": {
        "erb": "html",
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html",
        "scss": "scss"
    },

    "files.associations": {
        "*.js.erb": "javascript"
    },

    "gitlens.codeLens.authors.enabled": false,
    "gitlens.codeLens.recentChange.enabled": false,
    "gitlens.hovers.currentLine.over": "line",

    "html.format.indentInnerHtml": true,

    "javascript.preferences.quoteStyle": "single",

    "search.useReplacePreview": false,

    "terminal.integrated.fontWeightBold": "normal",

    "workbench.colorTheme": "Atom One Dark",
    "workbench.editor.tabCloseButton": "left",
    "workbench.iconTheme": "material-icon-theme",

    "vim.statusBarColors.normal": "#f4f4f4",

    // These are all my auto-save configs
    "editor.formatOnSave": true,
    // turn it off for JS and JSX, we will do this via eslint
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    // tell the ESLint plugin to run on save
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
    "prettier.disableLanguages": [
        "javascript",
        "javascriptreact"
    ],
}

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vuex-orm/core": "0.33.0",
    "@vuex-orm/plugin-axios": "^0.7.0",
    "axios": "^0.19.0",
    "convert-units": "^2.3.4",
    "core-js": "^2.6.5",
    "dayjs": "^1.8.16",
    "echarts": "^4.3.0",
    "fibers": "^4.0.1",
    "lodash": "^4.17.15",
    "material-design-icons-iconfont": "^5.0.1",
    "sass": "^1.23.0",
    "sass-loader": "7.1.0",
    "vee-validate": "^3.0.11",
    "vue": "^2.6.10",
    "vue-headful": "^2.0.1",
    "vue-router": "^3.0.3",
    "vuedraggable": "^2.23.2",
    "vuetify": "2.1.9",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/eslint-config-airbnb": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-vuetify": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

Answer 1

同样的问题，它对我有效。

json prettyprint-override">{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Answer 2

我认为冲突的原因是settings.json中的设置：

"editor.formatOnSave": true,

编辑器设置为“editor.tabSize”：2，尾随逗号的默认更漂亮设置为“none”。因此，它必须覆盖在save上运行的eslint的所有设置。您可以尝试设置：

"editor.formatOnSave": false,

或者，您可以更改editor.tab大小设置并添加

"prettier.trailingComma": "es5",