插件

中文：Chinese

html：HTML CSS Support
      HTML Preview
      html代码段：HTML Snippets
      IntelliSense for CSS class names in HTML
      
css:
    按ctrl查看（css定位器，追踪样式）：CSS Peek
    Beautify css/sass/scss/less
    px to rem & rpx & vw (cssrem) px转rem 默认设计稿是750，可以去设置
js：
    JavaScript (ES6) code snippets
    JavaScript ES6 Snippets
    StandardJS - JavaScript Standard Style

浏览器：
    Live Server
    open in browser

导入：
    自动关闭标签：Auto Close Tag
    自动导入：Auto Import
    自动导入：Auto Import - ES6, TS, JSX, TSX
    自动重命名标签：Auto Rename Tag
    引用路径智能提示：Path Intellisense
    Path Autocomplete

vue：
    vue2：Vetur
    vue3.2：Vue Language Features (Volar)
    Vue
    Vue 2 Snippets
    Vue 3 Snippets
    Vue Peek
    Vue VSCode Snippets

elementUI：
    elementUI快捷键：Element UI Snippets
    elementUI鼠标放到标签上查看它的api：element-ui-helper

Markdown：
    Markdown All in One
    预览：Markdown Preview Enhanced

node：Search node_modules
      Node Snippets

主题：Material Theme
格式化代码：JS-CSS-HTML Formatter
格式化代码：Prettier - Code formatter // 推荐使用
美化代码：Beautify
多行注释：Add jsdoc comments
注释代码高亮：Better Comments
左侧的距离：indent-rainbow
空格颜色：Trailing Spaces
括号对齐利器：Bracket Pair Colorizer 2
图片预览：Image preview
SVG文件预览：SVG Viewer
env文件高亮：DotENV
文件图标：vscode-icon
修改代码历史记录：Local History

运行js/ts：Code Runner
    
react：ES7+ React/Redux/React-Native snippets

常用快捷键

向上向下复制一行：shift+alt+箭头上下
放大、缩小编辑区：ctrl++/-
多个光标：ctrl+alt+箭头上下
光标定位到单词首/单词尾:ctrl + 左箭头/右箭头
光标定位到行首/行尾：home/end

文件夹不紧凑

设置里找到对应的把勾选取消

保存格式化

打开设置（ctrl+,）

方法1:搜索（settings）
"editor.formatOnType": true,
"editor.formatOnSave": true,

方法2：搜索（格式化）

vue.json用户片段

{
  // vue2
  "Print to console vue2": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: \"\",",
      "  components: {},",
      "  props: {},",
      "  data() {",
      "    return {};",
      "  },",
      "  created() {},",
      "  computed: {},",
      "  watch: {},",
      "  mounted() {},",
      "  methods: {},",
      "};",
      "</script>",
      "",
      "<style lang=\"scss\" scoped>",
      "</style>"
    ]
  },
  // vue3
  "Print to console vue3": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "import { defineComponent } from \"vue\";",
      "",
      "export default defineComponent({",
      "  name: \"\",",
      "  props: {},",
      "  components: {},",
      "  setup() {",
      "    return {};",
      "  }",
      "});",
      "</script>",
      "",
      "<style scoped lang=\"scss\">",
      "</style>"
    ]
  },
  // vue3t
  "Print to console vue3t": {
    "prefix": "vue3t",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script lang=\"ts\">",
      "import { defineComponent } from \"vue\";",
      "",
      "export default defineComponent({",
      "  name: \"\",",
      "  props: {},",
      "  components: {},",
      "  setup() {",
      "    return {};",
      "  }",
      "});",
      "</script>",
      "",
      "<style scoped lang=\"scss\">",
      "</style>"
    ]
  },
  // vue3-setup
  "Print to console vue3-setup": {
    "prefix": "vue3-setup",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script setup>",
      "import {  } from \"vue\";",
      "",
      "</script>",
      "",
      "<style scoped lang=\"scss\">",
      "</style>"
    ]
  },
  // vue3-setup-ts
  "Print to console vue3-setup-ts": {
    "prefix": "vue3-setup-ts",
    "body": [
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "import {  } from \"vue\";",
      "",
      "</script>",
      "",
      "<style scoped lang=\"scss\">",
      "</style>"
    ]
  }
}