'Prettier to format .vue

Prettier VS Code extension doesn't work properly with .vue. I mean how to setup prettier to integrate it with eslint and format .vue files on Cmd+Shift+P -> Format Document. .eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  plugins: [
    'vue'
  ]
}
vue.jsvisual-studio-codeeslintprettier


Solution 1:[1]

You need to define those rules in your .eslintrc.js file like this:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "prettier/prettier": [
      "warn",
      {
        "singleQuote": true,
        "semi": false,
        "trailingComma": "none"
      }
    ]
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

Solution 2:[2]

Easier is to install vetur octref.vetur extension and then add a .vscode>settings.json with 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"
}

enter image description here

Solution 3:[3]

you can add .prettierrc.json file in the root directory, and 

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

Solution 4:[4]

./.prettierr.js (file in root folder, that is)

module.exports = {
    //your rules here
    trailingComma: 'none',
    tabWidth: 2,
    singleQuote: true,
    semi: false
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nichlas Wærnes Andersen
Solution 2 Anees Hameed
Solution 3 LarrySSS
Solution 4 Jeremy Rogers

Related Questions