visual-studio-code - 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 ，默认的漂亮设置是 "none"对于尾随逗号。因此，它必须覆盖您在保存时运行的 eslint 的任何设置。您可以尝试设置:

"editor.formatOnSave": false,

或者，您可以更改 editor.tabSize设置和添加

"prettier.trailingComma": "es5",