vscode编辑器的日常使用相关实用配置

1.整体窗口大小设置

默认状态下是 0 我设置 0.6 大小正好看着舒服 你会发现 不管是左侧菜单还是控制台 终端页面字体全部变大

2. 只在文件中改变字体大小

3.设置全局代码片段

第一次创建就点击新建全局代码片段这里以vue的代码模板为例 其他语言课自行百度

{
    "console.log('')快速生成": {
        "scope": "javascript,typescript",
        "prefix": "log",
        "body": [
            "console.log($1);",
        ],
        "description": "Log output to console"
    },
    "快速创建一个函数": {
        "scope": "javascript,typescript",
        "prefix": "f",
        "body": [
            "function xxx$1(){};",
            "function xxx$1(){};",
            "$2"
        ],
        "description": "快速创建一个函数"
    },
    "自定义注释片段（动态时间）Print to js method": {
        "prefix": "haoqiang",
        "body": [
            "/*",
            " *@Author: 郝强",
            " *@Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
            " *@Description: $0",
            "*/"
        ],
        "description": "A function comment"
    },
    "生成的vue模版": {
        "prefix": "vue",  
        "body": [
          "<template>",
            "<div></div>",
          "</template>",
          "",
          "<script>",
          "export default {",
          "data() {",
          "return {",
          "",
          "}",
          "},",
          "//生命周期 - 创建完成（访问当前this实例）",
          "created() {",
          "",
          "},",
          "//生命周期 - 挂载完成（访问DOM元素）",
          "mounted() {",
          "",
          "}",
          "}",
          "</script>",
          "<style scoped>",
          "/* @import url(); 引入css类 */",
          "$4",
          "</style>"
        ],
        "description": "Log output to console"
      }
}

4.实用插件

 chinese 中文包    

 Auto Close Tag 自动补全结束标签

 Auto Rename Tag 自动生成标签模板

vscode-icons 给菜单的文件夹加上图标 效果好 文件夹结构清晰

Vue Language Features (Volar)  vue的扩展语言包 可以识别vue 代码 使代码区分颜色 

5.后续在补充 

........