VSCode 设置、EsLint 和 Prettier 冲突

Question

我遇到了一个非常烦人的问题，即某种设置冲突会阻止 lint 按应有的方式调整文件。我正在使用Wes Bos' ESLint/Prettier configuration。比如我有一个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/Prettier 对我来说非常陌生，我只是想建立一个好的系统！任何帮助将不胜感激。

其他相关文件：

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

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

"editor.formatOnSave": true,

编辑器设置为"editor.tabSize": 2，默认prettier设置为 "none" 用于结尾的逗号。所以它必须覆盖你为保存时运行的 eslint 所做的任何设置。您可以尝试设置：

"editor.formatOnSave": false,

您也可以更改editor.tabSize 设置并添加

"prettier.trailingComma": "es5",

Answer 2

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

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}