[vs code] 代码格式化与插件(防止代码标签换行)

彩蛋：后台管理系统一站式平台模板

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库

# 其它设置可以看这篇文章 vs code

一、首选项 - 设置 - settings.json

{
  // 使用单引号替代双引号
  "prettier.singleQuote": true,
  // 这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
  "workbench.iconTheme": "material-icon-theme",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "backgroundCover.imagePath": "c:\\Users\\Administrator\\Desktop\\文档\\2023154.jpg",
  "search.followSymlinks": false,
  "backgroundCover.opacity": 0.5,
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
}

二、vscode 插件

1. Auto Close Tag
2. Auto Rename Tag
3. background-cover
4. Bracket Pair Colorizer
5. Chinese (Simplified) Language Pack for Visual Studio Code
6. Color Info
7. Community Material Theme
8. Debugger for Chrome
9. filesize
10. GitLens — Git supercharged
11. HTML Boilerplate
12. HTML CSS Support
13. HTML Snippets
14. HTMLHint
15. Icon Fonts
16. JavaScript (ES6) code snippets
17. markdown-formatter
18. Material Icon Theme
19. Material Theme
20. Material Theme Icons
21. open in browser
22. Path Intellisense
23. Prettier - Code formatter
24. Vetur