更漂亮地格式化 .vue

Question

Prettier VS Code 扩展无法与 .vue 正常工作。我的意思是如何设置 prettier 将其与 eslint 集成并格式化 .vue 文件Cmd+Shift+P -> Format Document。.eslintrc.js:

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

Answer 1

更简单的是安装 veturoctref.vetur扩展，然后使用以下内容添加 .vscode>settings.json

{
    "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"
}

Answer 2

您需要在.eslintrc.js文件中定义这些规则，如下所示：

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