VSCode编码神器

微软出品的 VScode 现在已经越来越完善。性能远超 AtomWebStorm,相对于 Sublime Text 免费开源,自带 Markdown 文档高亮,你还有什么理由不用它?

插件

代码片段

文件 --> 首选项 --> 用户代码片段
例如我要建 CSS 的代码片段:

{
    "new background": {
        "prefix": "bg+",
        "body": [
            "background:${1:transparent} url(${2}) ${3:0} ${4:0} ${5:no-repeat;}"
        ],
        "description": "new background"
    }
}
new background: 只是一个单纯的描述。
prefix: 是触发snippet的简写。
body: 是展开的代码片段。
1,2,3表示占位符,用于用户展开代码片段所需要替换的,也可以写成${1:label}键值对的方式。
description :用户你在输出snippet之前,方便自己识别的注释,而不用强行记忆那些简写的。

全局代码片段

顾名思义,任意位置都可以调用!

{
    "Background": {
        "prefix": "bg+",
        "body": [
            "background:${1:transparent} url(${2}) ${3:0} ${4:0} ${5:no-repeat;}"
        ],
        "description": "新建background"
    },
    "Console": {
        "prefix": "con",
        "body": [
            "console.log(\"$1\")"
        ],
        "description": "输出Console"
    },
    "Vue": {
        "prefix": "vue+",
        "body": [
            "<template>",
            " <div>",
            "  $1",
            " </div>",
            "</template>\n",
            "<script>",
            " export default {",
            "   data () {",
            "     return {",
            "      $2",
            "     }",
            "   },",
            "   mounted: function() {\n",
            "   }",
            "   components: {\n",
            "   }",
            "   methods: {\n",
            "   }",
            " }",
            "</script>\n"
        ],
        "description": "新建Vue模板"
    },
    "Table": {
        "prefix": "table+",
        "body": [
            "<table width=\"100%\" cellspacing=\"0\" cellpadding=\"0\">",
            " <caption></caption>",
            " <thead>",
            "  <tr>",
            "   <th></th>",
            "  </tr>",
            " </thead>",
            " <tbody>",
            "  <tr>",
            "   <td></td>",
            "  </tr>",
            " </tbody>",
            " <tfoot>",
            "  <tr>",
            "   <td></td>",
            "  </tr>",
            " </tfoot>",
            "</table>"
        ],
        "description": "新建table"
    },
    "Dl": {
        "prefix": "dl+",
        "body": [
            "<dl>",
            " <dd></dd>",
            " <dt></dt>",
            "</dl>"
        ],
        "description": "新建dl"
    },
}

常用快捷键

按键功能
Ctrl + Shift + PF1显示命令面板
Ctrl + P查找当前项目中的文件和快速搜索;输入 @ 查找文件主标题/函数;或者输入 : 跳转到文件某行
Ctrl + R快速列出/跳转到某个函数
Ctrl + D选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)
Ctrl + G跳转到相应的行
Ctrl + J合并行(已选择需要合并的多行时)
Ctrl + K + U改为大写
Ctrl + K + L改为小写
Ctrl + F查找
Ctrl + H替换
Shift + Alt + (拖动鼠标)列(框)选择
Ctrl + Shift + Alt +(箭头键)列(框)选择
Ctrl + \拆分编辑器
Ctrl + 1 / 2 / 3聚焦到第1,第2或第3编辑器组
Ctrl + ] / [缩进/缩进行
Ctrl + F4Ctrl + W关闭编辑器
Ctrl + N新文件
Ctrl + O打开文件
Ctrl + `显示集成终端

Microsoft-GitHub.jpg

标签: VSCode

除单独说明外,文章默认采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

随机文章

添加新评论