Prettier to format .vue

user_10429105 0
Viewed 11386

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'
  ]
}
prettier eslint vue.js visual-studio-code
4 Answers

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

user_24634030

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"
  }
};
user_42499380

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

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

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

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