DEV Community

Lindsey Bradford
Lindsey Bradford

Posted on

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.


  • 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


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


module.exports = {
  root: true,
  env: {
    node: true
  extends: [
  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']


  "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

Top comments (6)

gregveres profile image

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",
Enter fullscreen mode Exit fullscreen mode

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.

synapse709 profile image
Tim Titus

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

lindseybradford profile image
Lindsey Bradford

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

codefinity profile image
Manav Misra

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 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 👆🏽.

oxavibes profile image

Excuse me Lindsey, i am a bit confused at the moment. Which one should i use? Prettier, eslint, or vetur?

tollswap profile image

This doesnt Work with vue3!?