prettier格式化js文件，无需prettierrc文件，只用settings.json就可生效的配置

最新推荐文章于 2024-01-16 22:29:37 发布

原创最新推荐文章于 2024-01-16 22:29:37 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json #前端 #vue

本文介绍了如何在Vue项目中使用Prettier配置全局和局部代码格式，重点关注了如何避免不同文件格式冲突，以及如何让Vue.js的js部分遵循特定的美化规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 配置全局prettier设置，此处基本只针对于js文件，vue文件在下面单独配置
  "prettier.useEditorConfig": false, // 此项最重要！！！是否使用prettierrc文件格式化，若为true，则settings.json中的配置在js文件中无效
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 120,
  "prettier.tabWidth": 2,
  "prettier.arrowParens": "avoid",
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "prettier", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    },
    // 此处配置只针对于vue文件
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "printWidth": 80,
      "tabWidth": 2,
      "arrowParens": "avoid",
      "trailingComma": "none"
    }
  },