AI摘要：VSCode是微软推出的免费开源代码编辑器，性能优越，支持几乎所有主流编程语言。它拥有丰富的插件生态，可高度定制，轻量高效，是程序员理想的编程工具。

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

第一次使用 VS Code 你肯定想不到这是微软出品的开源编程工具，风格清冽，主题柔和，插件丰富，训疾如风。是的，VS Code 是微软推出的一款免费的、开源的、高性能的、跨平台的、轻量级的代码编辑器，它号称微软最好的开源软件作品，人们对它的喜爱超过了其他厚重的 Visual Studio 系列工具。 VS Code 综合了 Eclipse 等很多优秀编辑器的优势，同时也解决了很多编辑器的痛点，在性能、语言支持、开源社区方面都做得非常好。

程序员选择编辑器，一般可以从这三个方面考量：

第一，你对文本、代码的编辑效率要求有多高？比如说，在 Vim 里面你可以通过快捷键快速删掉一行或者某些单词，可以块选，可以快速分屏查看代码，可以高效匹配和替换查找……如果你喜欢这样的功能，那在选择编辑器的时候就要考虑它是否支持这样的特性了。VS Code 支持 Vim 模式编程。

第二，这个编辑器对编程语言的支持如何，配置是否繁琐？比如你平时多用 Java 编程，选择编辑器前最好去官网查查官方是否重点支持这门编程语言，相关的配置和运行时环境是不是繁琐。如果官方都不支持，那你可能就会吃力不讨好了。VS Code 几乎支持所有主流语言。

第三，它的插件生态怎么样，能否满足自己的需求？现在一个优秀的编辑器都具备良好的插件机制。完善的插件生态对已有的编辑器功能是非常好的补充，你会大概率使用到插件的各种功能，甚至，你可以根据自己的需要开发自己的插件，并贡献给社区。所以在选择之前，你要判断它的插件生态是否繁荣，能否支持你的基础需求。如果整个插件社区比较冷清，那你可就要慎重选择了……VS Code 的插件会自己冒出来问你，你正在找我么？

打开编辑器，不需要创建任何的项目工程文件你就可以开始使用 VS Code 了。你可以高效便捷地操作文本，编写程序，同时在编程语言插件的支持下获得语法检查、智能提示和运行时支持；你还可以借助丰富的插件 API 编写自己的插件，拓展 VS Code 的功能以满足自己的需求。

VS Code 强大之处还在于它的插件市场。这一点可以说是师承 Eclipse，不过 VS Code 吸取了 Eclipse 的教训，把插件系统运行在主进程之外，高度可定制但同时又是可控的，启动和运行速度非常快。VS Code 提供了 Windows、macOS 和 Linux 版本，内置支持JavaScript、TypeScript 和 Node.js，通过丰富的扩展和插件生态，你可以使用 VS Code 高效的编写 C++、C#、Java、Python、PHP、Go 等主流编程语言。可以说，VS Code 对几乎所有的编程语言、框架和开发技术都有支持，提供这种支持的方式是多样的，主要包括了为特定技术提供代码片段、语法高亮、Emmet以及智能提示功能。可以说这是一款轻量级的、高效的、高度可定制的编程利器。

插件

• Settings Sync：多个设备同步插件。
• Chinese (Simplified) Language Pack for Visual Studio Code：适用于 VS Code 的中文（简体）语言包。
• Sublime Text Keymap and Settings Importer：导入Sublime Text快捷键。
• Bookmarks：类似于sublime text的书签标记。
• Easy Sass：自动编译SASS。
• File Template：常用文件模板，新建文件的时候用的，默认支持JavaScript、HTML、CSS、PHP、Python、Ruby、XML、Vue，如果需要修改，打开路径 ~/.vscode/extensions/RalfZhang.filetemplate-2.0.0/asset/templates/，这里给出我自己弄的一份模板。
• Vetur：语法高亮、智能感知、Emmet等。
• Path Intellisense：自动路劲补全。
• Markdown All in One：所有需要的Markdown标记。
• Markdown Preview Enhanced：边写边预览，可以导出为PDF。
• Prettier：格式化代码。
• SVN：SVN版本管理。
• 知乎：上班摸鱼上知乎。

代码片段

文件 --> 首选项 --> 用户代码片段
例如我要建 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>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 组件名称 from '组件路径';",
            "export default {",
            "//引入组件",
            "props: [",
            "",
            "],",
            "//引入混淆",
            "mixins: [",
            "",
            "],",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {",
            "",
            "},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {",
            "",
            "},",
            "//监控data中的数据变化",
            "watch: {",
            "",
            "},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "//生命周期 - 创建之前",
            "beforeCreate() {",
            "",
            "},",
            "//生命周期 - 挂载之前",
            "beforeMount() {",
            "",
            "},",
            "//生命周期 - 更新之前",
            "beforeUpdate() {",
            "",
            "},",
            "//生命周期 - 更新之后",
            "updated() {",
            "",
            "},",
            "//生命周期 - 销毁之前",
            "beforeDestroy() {",
            "",
            "},",
            "//生命周期 - 销毁完成",
            "destroyed() {",
            "",
            "},",
            "//如果页面有keep-alive缓存功能，这个函数会触发",
            "activated() {",
            "",
            "},",
            "}",
            "</script>",
            "",
            "<style lang='scss'>",
            "//@import '$3';",
            "</style>"
        ],
        "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"
    },
    "link": {
        "prefix": "a+",
        "body": [
            "<a href=\"javascript:void(0)\">$1</a>"
        ],
        "description": "新建a链接"
    },
}

常用快捷键

补充：安装插件SVN 报vscode SVN not found

错误原因：vscode找不到本地的svn.exe. 这个exe在默认安装TortoiseSVN时，默认是不勾选的，所以不会注意，其实在vscode中安装SVN插件时，该插件就已经提示了，需要在安装TortoiseSVN时，勾选上 Command Line Tools.

最后一个Win7版本：https://code.visualstudio.com/updates/v1_70