Vue/TypeScript/ESLint/Prettier/Vetur formatting doesn't work

Question

Trying to get Vue/TypeScript/ESLint/Prettier/Vetur formatting in VS Code is a nightmare. There are many many GitHub issues and StackOverflow posts on this but I assure you this is not a duplicate. I have followed every tutorial and none of them work. Some of them fix one problem but introduce another. Some of them don't fix any problems. Some of them crash VS Code. Most conflict with each other in the advice they prescribe, including multiple official sources. Many are outdated, referencing obsolete config properties.

I want VS Code to lint and format my .vue and .ts files when I save.

I have spent hours and tried many, many configurations from different posts and tutorials, but this is the closest I have gotten to something that works. With the below configuration, however, whenever saving a .vue file, elements in the .vue files get momentarily wrapped onto a new line, and then immediately reverted back to a single line element:

then then

Below are my current configuration files:

.eslintrc.js

const { resolve } = require('path');
module.exports = {
  root: true,
  parserOptions: {
    extraFileExtensions: ['.vue'],
    parser: '@typescript-eslint/parser',
    project: resolve(__dirname, './tsconfig.json'),
    tsconfigRootDir: __dirname,
    ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module' // Allows for the use of imports
  },

  env: {
    browser: true
  },

  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:vue/recommended'],

  plugins: ['@typescript-eslint', 'vue'],

  globals: {
    ga: true, // Google Analytics
    cordova: true,
    __statics: true,
    process: true,
    Capacitor: true,
    chrome: true
  },

  rules: {
    'prettier/prettier': ['error', { usePrettierrc: true }], 
    'prefer-promise-reject-errors': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-function': ['error', { allow: ['private-constructors'] }],
    'vue/no-v-html': 'off',
    'vue/no-template-shadow': 'off',
    'vue/max-attributes-per-line': 'off',
    quotes: ['warn', 'single', { avoidEscape: true }],

    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
};

.prettierrrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "printWidth": 150,
  "arrowParens": "avoid",
  "trailingComma": "none",
  "endOfLine": "auto"
}

settings.json

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "vue"
  ],
  "typescript.tsdk": "node_modules/typescript/lib",
  "vetur.experimental.templateInterpolationService": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.detectIndentation": false,
  "editor.tabSize": 2
}

Does anyone out there actually have this working?

Answer 1

I've been having some conflict issues between @vue/prettier and eslint. Removing @vue/prettier the problem disappeared. After researching the package I realized that it was a temporary solution until prettier supported Vue natively, and it already does.

I honestly don't know why this package is still recommended by installing vue-cli but I tested putting 'prettier' in place of '@vue/prettier' and it worked

Answer 2

To get Vue/TypeScript/ESLint/Prettier/Vetur working in VSCode, I followed the following steps:

1. Installed the Vue eslint plugin by running vue add @vue/cli-plugin-eslint. NOTE: If you have a client folder directory and a server folder directory, you must first cd to your client directory before using vue add.
2. Changed the .eslintrc.js in my Vue project. Please check this post for more information/alternatives. Basically, I made a new Vue + Typescript project and copied the eslint config to my real project. The boilerplate code didn't work completely at first so I modified it a bit:

module.exports = {
  root: true,
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  env: {
    browser: true,
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/recommended",
    "@vue/prettier",
    "plugin:prettier/recommended",
    "@vue/typescript",
  ],
  // required to lint *.vue files
  plugins: [
    "vue",
    "@typescript-eslint"
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
}

3. Installed the following dependencies by running

npm i -D eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

For more information, please check out this Github page. NOTE: I did not need eslint-plugin-promise (it threw an error when I tried installing it, but it might work for you).

4. Changed my VSCode settings.json to the following:

{
    "editor.defaultFormatter": "octref.vetur",
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": [
        "source.organizeImports",
        "source.fixAll"
    ],
    "editor.formatOnSave": false,
    "javascript.format.enable": false,
    "eslint.alwaysShowStatus": true,
    "eslint.options": {
    "extensions": [ ".html", ".js", ".vue", ".jsx", ".ts" ]
    },
    "eslint.validate": [ "javascript", "vue", "html", "typescriptvue", "typescript" ],
    "eslint.workingDirectories": [
        "./client"
    ]
}

And with that, I'm able to use Vue/TypeScript/ESLint/Prettier/Vetur! It lints and formats my code perfectly each save and I don't really have to worry about the tiny things in my code. Please let me know if you still have trouble and I'll try to see what I can do.