Auto fix made double comma to fix trailing comma

[charlie0228]

When I use Eslint v2.0.13 or v2.0.12 to fix .vue, .ts or .js files, it always adds double comma when fix trailing comma.

Here are my setting files:

settings.json

{
  "editor.tabSize": 2,
  "eslint.format.enable": true,
  "files.trimTrailingWhitespace": true,
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "typescript",
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "vue",
  ],
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascript]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2018,
  },
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    camelcase: 'off',
    indent: ['error', 2, { SwitchCase: 1 }],
    semi: ['error', 'never'],
    'standard/no-callback-literal': 0,
    'comma-dangle': [
      'error',
      {
        arrays: 'always-multiline',
        exports: 'always-multiline',
        functions: 'never',
        imports: 'always-multiline',
        objects: 'always-multiline',
      },
    ],
    'prettier/prettier': [
      'error',
      {
        semi: false,
        tabWidth: 2,
        arrowParens: 'always',
        singleQuote: true,
        trailingComma: 'es5',
        htmlWhitespaceSensitivity: 'ignore'
      }
    ],
    '@typescript-eslint/member-ordering': 'error'
  },
}

package.json

{
  "lint-staged": {
    "*.{ts,js,vue}": "eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^0.3.2",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "axios": "^0.19.0",
    "js-cookie": "^2.2.1",
    "nuxt": "^2.0.0",
    "nuxt-user-agent": "^1.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@nuxt/typescript-build": "^0.5.1",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-config-typescript": "^1.0.0",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@nuxtjs/stylelint-module": "^3.1.0",
    "@storybook/addon-actions": "^5.2.8",
    "@storybook/addon-links": "^5.2.8",
    "@storybook/addons": "^5.2.8",
    "@storybook/vue": "^5.2.8",
    "@types/js-cookie": "^2.2.4",
    "@types/lodash": "^4.14.149",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.6",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-nuxt": "^0.5.0",
    "eslint-plugin-prettier": "^3.0.1",
    "husky": "^2.6.0",
    "jest": "^24.1.0",
    "lint-staged": "^8.2.1",
    "lodash": "^4.17.15",
    "node-sass": "^4.13.0",
    "normalize.css": "^8.0.1",
    "prettier": "^1.16.4",
    "sass-loader": "^8.0.0",
    "stylelint": "^10.1.0",
    "vue-jest": "^4.0.0-0"
  }
}

If there needs more information, please let me know, thanks!

[dbaeumer]

@charlie0228 can you please provide me with a GitHub repository I can clone that demos what you are experiencing. Problems like this usually depend on various factors like used versions, plugins, ...

[charlie0228]

@dbaeumer
Here is the project https://github.com/charlie0228/vscode-eslint-issue
You can edit the files in src/pages/index.vue or src/pages/Example.vue

[charlie0228]

Here is the list of vscode extension I installed.

code --install-extension abusaidm.html-snippets
code --install-extension akamud.vscode-javascript-snippet-pack
code --install-extension Arjun.swagger-viewer
code --install-extension bmewburn.vscode-intelephense-client
code --install-extension christian-kohler.path-intellisense
code --install-extension dbaeumer.vscode-eslint
code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension formulahendry.auto-rename-tag
code --install-extension hex-ci.stylelint-plus
code --install-extension hollowtree.vue-snippets
code --install-extension HookyQR.beautify
code --install-extension junstyle.php-cs-fixer
code --install-extension mhutchie.git-graph
code --install-extension mikestead.dotenv
code --install-extension mrmlnc.vscode-scss
code --install-extension MS-CEINTL.vscode-language-pack-zh-hant
code --install-extension ms-vscode-remote.remote-containers
code --install-extension ms-vscode-remote.remote-ssh
code --install-extension ms-vscode-remote.remote-ssh-edit
code --install-extension ms-vscode-remote.remote-wsl
code --install-extension ms-vscode-remote.vscode-remote-extensionpack
code --install-extension octref.vetur
code --install-extension oderwat.indent-rainbow
code --install-extension onecentlin.laravel-blade
code --install-extension P-de-Jong.vscode-html-scss
code --install-extension PKief.material-icon-theme
code --install-extension redhat.vscode-yaml
code --install-extension Shan.code-settings-sync
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension VisualStudioExptTeam.vscodeintellicode
code --install-extension yzhang.markdown-all-in-one
code --install-extension zhuangtongfa.material-theme

[dbaeumer]

I can not reproduce this using the ESLint format action. Are you sure that this is not caused by another formatter?

[charlie0228]

Yes, I am sure that I use ESLint format as a formatter.

Sorry, I change the Example.vue file, would you please test it again?
Thanks!

I will also check other extensions I've installed, hope it will work!

[dbaeumer]

@charlie0228 thanks for the additional steps. I can reproduce it. It does not happen with --fix

[mi-mazouz]

same issue!

[charlie0228]

@dbaeumer
Thanks for helping, but I found another related issue.
My settings are the same as the previous comment.

When I try to fix empty function like below:

  methods: {
    test() {

    }
  },

It will turn:

  methods: {
    test() {},,
  },

Here is the project https://github.com/charlie0228/vscode-eslint-issue
You can edit the file src/pages/Example.vue

[thedv91]

Same issue. I had to go back to version 2.0.11

[dbaeumer]

@thedv91 it is fixed in 2.0.15. If you still can reproduce it can you please provide me with a GitHub repository that I can clone that demos it.