VSCode Settings, EsLint and Prettier conflict

Question

I'm having a super annoying issue where a settings conflict of some sort is preventing the lint from adjusting the file as it should. I am using Wes Bos' ESLint/Prettier configuration. For example, I have a Vue file:

<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>

However in my .eslintrc I have this rule, because I prefer script code to be indented once:

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

When I save the file to allow Prettier to reformat and fix those errors, I can see the comma-dangle and indent issues be fixed for a split second before they revert back and show all of the errors again. Where is the conflict occurring?

ESLint/Prettier is very new to me, and I'm just trying to get a good system in place! Any help would be greatly appreciated.

Other related files:

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"
  }
}

tromgy tromgy · Accepted Answer · 2020-03-16T04:32:13

I think the cause of the conflict is this setting in settings.json:

"editor.formatOnSave": true,

the editor is set to "editor.tabSize": 2, and the default prettier setting is "none" for the trailing comma. So it must be overriding whatever settings you had for eslint that runs on save. You can try setting:

"editor.formatOnSave": false,

alternatively you can change the editor.tabSize setting and add

"prettier.trailingComma": "es5",

VSCode Settings, EsLint and Prettier conflict

2 Answers