VScode Vue 配置

适用版本：Vue3

最后修改时间：2023-04-16

插件

💡主题

1	One Dark Pro

💡文件图标

1	Material Icon Theme

💡格式化代码（设置保存后格式化和默认格式化规则）

1	Prettier - Code formatter

💡画图（黑色主题不推荐）

1	Draw.io Integration

💡查看 git 历史版本

Git Graph

💡查看 git 改动代码的信息

1	GitLens — Git supercharged

💡用浏览器打开页面

1	open in browser

💡用临时服务器打开页面（保存后实时预览）

1	Live Server

💡验证英文拼写正确

1	Code Spell Checker

💡Vue 代码高亮

Vetur

💡映射 VScode 上的断点到 chrome 上，方便调试

1	Debugger for Chrome

💡Vue 开发必备插件

1	Vue Volar extension Pack

💡自动修改闭合标签

1	Auto Rename Tag

`VScode` 配置

🔖 ctrl + p 唤起文件搜索框，查找 settings.json 文件，填入配置！

{
  "security.workspace.trust.untrustedFiles": "open",
  "open-in-browser.default": "Chrome",
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.unicodeHighlight.nonBasicASCII": false,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro Darker",
  "editor.mouseWheelZoom": true,
  "editor.fontFamily": "JetBrains Mono, Consolas, 'Courier New', monospace",
  "editor.cursorBlinking": "smooth",
  "editor.formatOnSave": true,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
  },
  "[scss]": {
    "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"
  },
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "cSpell.userWords": []
}

快捷模板

🔖 ctrl + p 唤起文件搜索框，查找 vue.json 文件，填入配置！

`Vue2` 模板

"create Vue2": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div>$0</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${TM_FILENAME_BASE}',",
      "  components: {},",
      "  props: {},",
      "  data () {",
      "    return {",
      "    }",
      "  },",
      "  watch: {},",
      "  computed: {},",
      "  methods: {},",
      "  created () {},",
      "  mounted () {}",
      "}",
      "</script>",
      "",
      "<style scoped lang='scss'>",
      "",
      "</style>",
      ""
    ],
    "description": "vue2 template"
  }

`Vue3` 模板

"create Vue3": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div>$0</div>",
      "</template>",
      "",
      "<script>",
      "import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'",
      "export default {",
      "  name: '${TM_FILENAME_BASE}',",
      "  setup () {",
      "    const data = reactive({})",
      "    onBeforeMount(() => {})",
      "    onMounted(() => {})",
      "    return {",
      "      ...toRefs(data)",
      "    }",
      "  }",
      "}",
      "",
      "</script>",
      "",
      "<style scoped lang='scss'>",
      "",
      "</style>",
      ""
    ],
    "description": "vue3 template"
  }