vscode格式化vue2项目的常用配置,如下:

插件:

  • Vue VSCode Snippets
  • Vetur
  • Prettier
  • ESLint

默认格式化:vuter

设置:

{
"vetur.validation.template": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// #括号成对显示
"editor.bracketPairColorization.enabled": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #vue组件中html代码格式化样式
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "force-aligned" // 属性分行对齐
    //  "wrap_attributes": "auto" // 属性在一行显示
    // "wrap_attributes": "force",
    // "wrap_attributes": "force-aligned",
    // "wrap_attributes": "force-expand-multiline"
  }
},
"editor.mouseWheelZoom": true,
"explorer.confirmDelete": false,
"git.enableSmartCommit": true,
"workbench.sideBar.location": "left",
"breadcrumbs.enabled": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.productIconTheme": "fluent-icons",
// 保存时修复eslint错误
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": false
},
"editor.snippetSuggestions": "top",
"[vue]": {
  "editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true
}

效果如下:
在这里插入图片描述
格式化vue3以及文心快码,通义灵码

{
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "editor.bracketPairColorization.enabled": true,
  "editor.mouseWheelZoom": true,
  "editor.stickyScroll.enabled": false,
  "editor.guides.bracketPairs": "active",
  "editor.linkedEditing": true,
  "editor.snippetSuggestions": "top",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 120,
  "prettier.trailingComma": "none",
  "prettier.arrowParens": "avoid",
  // #这个按用户自身习惯选择
  // "vetur.validation.template": false,
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #vue组件中html代码格式化样式
  // "vetur.format.defaultFormatterOptions": {
  //   "js-beautify-html": {
  //     "wrap_attributes": "force-aligned" // 属性分行对齐
  //     //  "wrap_attributes": "auto" // 属性在一行显示
  //     // "wrap_attributes": "force",
  //     // "wrap_attributes": "force-aligned",
  //     // "wrap_attributes": "force-expand-multiline"
  //   }
  // },

  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.productIconTheme": "fluent-icons",
  "workbench.tree.enableStickyScroll": false,
  "workbench.startupEditor": "none",
  "window.commandCenter": false,
  "window.zoomLevel": 1.5,
  "git-graph.date.format": "ISO Date & Time",
  "search.followSymlinks": false,

  "baidu.comate.privateService": "",
  "baidu.comate.username": "1014899802",
  "baidu.comate.license": "dc64d36c-645f-427e-b329-c1bc24eb6f23",
  "baidu.comate.enableSecurityEnhancement": false,
  "baidu.comate.linePreferMode": "auto",

  "Lingma.DisplayLanguage": "简体中文",
  "Lingma.methodQuickOperation": false
}

Logo

前往低代码交流专区

更多推荐