VSCode Settings, EsLint and Prettier conflict - visual-studio-code

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

Answer 1

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

Answer 2

Same issue, it's working for me.
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}