vs code常用插件

 vs code 常用开发插件 

---

 Auto Rename Tag

自动完善标签、标签快速替换 

Auto Rename Tag

 ChatGPT - 中文版

ChatGPT - 中文版

 Chinese (Simplified) (简体中文)

vs code 中文语言包 

Chinese (Simplified) (简体中文)

 CSS Tree

快速获取 css 类名树，配合less/sass使用；

使用：选择 html 代码后，按 ctrl+shift+p 选择 Generate CSS tree

CSS Tree

 Easy LESS

less转换css 

Easy LESS

element-plus-doc 

element-plus-doc

element-ui-helper 

element-ui-helper

Highlight Matching Tag 

编写时标签提示 

Highlight Matching Tag

node-snippets 

node 开发提示 

node-snippets

Nuxt

开发 nuxt 时再装 

Nuxt

 open in browser

可以再 .html 文件上右键浏览器打开

open in browser

 Prettier - Code formatter

代码格式化 

Prettier - Code formatter

 TONGYI Lingma

 开发代码辅助工具

TONGYI Lingma

vscode-icons

vs code 文件图标美化显示

vscode-icons

Vue - Official 

Vue - Official

Vue & Nuxt Snippets

nuxt 开发时代码片段提示

Vue & Nuxt Snippets

Vue 3 Support - All In One 

Vue 3 Support - All In One

vue-helper 

vue-helper

XML Tools 

XML Tools

Vetur 

 vue2用，vue3不用

Vetur

附加：vscode开发配置

本人常用

{
  // 左侧目录不折叠
  "explorer.compactFolders": false,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": false,
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  // 代码提示顺序
  "editor.snippetSuggestions": "top",

  // 选择格式化工具
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // vetur配置
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto" // 设置为“force-aligned”，效果会不一样
    },
    "prettier": {
      "semi": false, // 不加分号
      "singleQuote": true, // 用单引号
      "tabWidth": 2, // tab缩进空格个数
      "trailingComma": "none", // 禁止在末尾加逗号
      "printWidth": 200 // 每行宽达到200才强制换行
    }
  },

  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  
  // 忽略vetur错误提示
  "vetur.ignoreProjectWarning": true,

  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // prettier配置
  "prettier": {
    // 句尾添加分号
    "semi": false,
    // 缩进字节数
    "tabWidth": 2,
    // 超过最大值换行
    "printWidth": 200,
    // 使用单引号代替双引号
    "singleQuote": true,
    "trailingComma": "none" // 禁止在末尾加逗号
  },

  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "workbench.startupEditor": "none",
  "extensions.ignoreRecommendations": true,
  "editor.codeActionsOnSave": {},
  "editor.stickyScroll.enabled": false,
  "workbench.settings.applyToAllProfiles": []
}