ES Lint, Prettier, Vetur, VSCode: Ironing out the conflicts

I recently discovered something more was needed than the out of the box Vue CLI ESLint setup to settle the disputes between prettier, eslint, VSCode's default formatter, and which one fired when on-save vs. on keyboard shortcuts.

This is a quick summary of my workspace configs, but for more of a deep dive, check out this article.

Packages

prettier
eslint-config-prettier
eslint-plugin-prettier
@vue/eslint-config-standard
babel-eslint
eslint
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise
eslint-plugin-standard
eslint-plugin-vue

Keybindings

Remove any existing formatting commands attached to the ctrl+shift+i shortcut and bind this instead to EsLint Fix All Auto-Fixable Problems (tip: you can search by both command and keybinding in Keyboard Shortcuts).

Workspace Settings.json

{
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: ['prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/component-name-in-template-casing': ['error', 'PascalCase']
  }
}

.prettierrc

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

I'll continue to dial these settings in, and plan to expound more here on exactly why these configs work, but this got me up and running past those pesky formatting/linting conflicts in a pinch.

More Reading
https://prettier.io/docs/en/integrating-with-linters.html
https://github.com/vuejs/vetur/issues/1094

Top comments (6)

gregveres • Sep 5 '20

This was helpful, but it didn't solve my problem of the typescript portion of my vue files being 'prettied' twice. I could tell that they were being prettied twice because the first round removed the trailing commas and the second round put them back.

It turns out that you also want to ensure that vetur doesn't do formatting of the source code since it is already being done by eslint. You do that by setting the defaultFormatter for js and ts to none in your settings.json file:

  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",

eslint will use the prettier config in the eslintrc file and vetur will use the prettier settings in prettierrc. If you want to see if your script sections are being formatted twice, set different settings in both of these files and see which one you get. If you don't get the settings from eslintrc, then vetur is also formatting your code.

Tim Titus • Apr 13 '20

OMG! I've been fighting Eslint, Prettier in vue projects for months. All of the other tutorials were out of date, contained deprecated values, and dealing with this instead of coding is just a major PITA.

This tut fixed all my issues, even the emotional ones from my childhood.
You have my sincerest thanks

Lindsey Bradford • Apr 15 '20

Oh awesome! Nothing's more frustrating than striving for tidy commits and getting snagged on save. Really glad it helped out!

Manav Misra • May 13 '20

Same here. With vue:recommeded, it would wreak havoc - fighting with 'auto-fix. I had fixed it with a similar solution.
Just started a quick vue create project, and used Prettier from the settings...no conflicts this time around. NS if there has been an update in the create app vue-cli, but hopefully. Then we don't need to do this sort of thing 👆🏽.