vscode开发vue项目常用插件

1. Chinese (Simplified) Language Pack for Visual Studio Code

软件汉化

2. Auto Close Tag

自动闭合HTML/XML标签

3. Auto Rename Tag

自动完成另一侧标签的同步修改

4. Bracket Pair Colorizer

给嵌套的各种括号加上不同的颜色

5. Path Intellisense

智能路径提示，可以在你输入文件路径时智能提示

6. filesize

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间

7. GitLens

查看每一行代码的提交日志，方便查看git日志，git多人协作的时候需要查看日志，能在当前代码中查看

8. Markdown Preview Enhanced

实时预览markdown文件

9. vetur

vue2必备

10. volar

代码高亮 替换 vetur

11. Vue 3 Snippets

vue3 代码块

12. vscode-icons v11.12.0

文件主题图标

13. Prettier - Code formatter v9.5.0

代码格式化

vscode vue 代码片段

1、vue2

"vue template": {
    "prefix": "vue",
    "body": [
        "<template>",
        "    <div class=\"${1}-container\"></div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "    name: '${2}',",
        "    props: '',",
        "    data() {",
        "        return {};",
        "    },",
        "    computed: {},",
        "    watch: {},",
        "    created: {},",
        "    monted: {},",
        "    methods: {}",
        "};",
        "</script>",
        "",
        "<style lang='less' scoped></style>"
    ],
    "description": "vue snippets"
  },

2、vue3

"vue3 template": {
    "prefix": "vue3",
    "body": [
        "${BLOCK_COMMENT_START}",
        "* ${1:new page}",
        "* @author: ${2:小石}",
        "* @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
        "${BLOCK_COMMENT_END}",
        "<template>",
        "    <div class=\"container\"></div>",
        "</template>",
        "",
        "<script setup></script>",
        "",
        "<style lang=\"scss\" scoped></style>"
    ],
    "description": "vue3 snippets"
  },