Visual Studio Code 不完全使用指南

介绍

• JavaScript
• C#
• JSON
• HTML
• Markdown
• TypeScript
• CSS, Sass, Less
• DockerFile
• Swift
• Groovy
• 不断增加中…

快速导航

不使用前缀字符，可以进行工程内的文件搜索；输入前缀字符 ? 可以查看所有命令列表（全局命令 + 编辑器命令），其中 > 前缀的使用最为频繁，通过它我们可以找到所有的命令，excited!

编辑功能

• 多光标选取 Alt + 鼠标单击
• 逐步选中其它相同的symbol Command + D，
• 全选相同symbol Command + F12
• 代码格式化 Shift + Alt + F
• 重构（重命名）Symbol F2
• 查找所有引用了选中symbol的代码 Shift + F12
• 
• 跳转到symbol的定义处 F12
• 瞥见下symbol的定义出（在该symbol下方展开面板，显示定义处代码，非常有用）Alt + F12
• 
• 跳转到光标上一次(下一次)位置（误操作的回退方案，非常有用） Command + Left / Command + Right

语法提示

对于业界知名框架与库，也可以通过强大的 *.d.ts 文件来支持语法提示、参数提示，如我在项目中使用了 angular，键入 angular 命名空间，1s后出现小灯泡，然后点击它，选中”download…”后编辑器就开始后台下载了，成功后会有提示

jQuery, Backbone, Underscore, Lodash, Node.js, Express, Restify, Async 等等知名开源框架跟库的提示都可以直接通过 tsd 来管理，非常方便

无论通过小灯泡点击安装的还是通过tsd安装的ts文件，都会被放置在工程的根路径下的typings文件夹中，方便查看已有的提示插件

开启ES6语法支持

    {
        "compilerOptions": {
            "target": "ES6"
        }
    }

保存该文件 –> 重启编辑器，ES6 语法在该项目就已支持，内建lint工具也不会再提示错误了

调试Node.js

这里Node.js配置的文件名为 launch.json：

    {
        "version": "0.1.0",
        // List of configurations. Add new configurations or edit existing ones.
        // ONLY "node" and "mono" are supported, change "type" to switch.
        "configurations": [
            {
                // Name of configuration; appears in the launch configuration drop down menu.
                "name": "Launch env",
                // Type of configuration. Possible values: "node", "mono".
                "type": "node",
                // Workspace relative or absolute path to the program.
                "program": "env",
                // Automatically stop program after launch.
                "stopOnEntry": false,
                // Command line arguments passed to the program.
                "args": [],
                // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
                "cwd": ".",
                // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
                "runtimeExecutable": null,
                // Optional arguments passed to the runtime executable.
                "runtimeArgs": ["--nolazy", "--harmony"],
                // Environment variables passed to the program.
                "env": { },
                // Use JavaScript source maps (if they exist).
                "sourceMaps": false,
                // If JavaScript source maps are enabled, the generated code is expected in this directory.
                "outDir": null
            },
            {
                "name": "Attach",
                "type": "node",
                // TCP/IP address. Default is "localhost".
                "address": "localhost",
                // Port to attach to.
                "port": 5858,
                "sourceMaps": false
            }
        ]
    }

注：Node.js代码中含有ES6特性的代码，需要开启"--harmony"，因此 `runtimeArgs` 需要添加一项 "--harmony"

常用的添加环境变量，添加应用参数，node的执行参数等操作都能在这里进行修改，配置完成后再次点击绿色的启动按钮，VSCode就可以开始启动服务了，同时监听了5858端口进行调试操作

VSCode Debug 操作与浏览器开发者工具、Webstorm调试工具累似，但是自身没有提供命令行终端的信息显示，因此在调试时会打开系统的默认shell进行程序运行的信息显示

支持Markdown

同其他独立 Markdown Editor （Mou、MacDown、马克飞??等等）一样，VS Code同样可以设置 .md 文件的预览样式，通过快捷键组 Command + , 可以快速打开 User Settings 文件，添加如下字段

"markdown.styles": [
    "https://jasonm23.github.io/markdown-css-themes/screen.css"
]

markdown.styles 字段值是一个样式URL的数组，通过指定，我们的预览便在外部样式表(.css文件)的作用下改变了样式，对于颜控党来说美腻的皮肤总是能为书写（开发）带来额外的动力

缤彩主题请戳我

配置任务

    {
        "version": "0.1.0",
        "command": "marked",
        "isShellCommand": true,
        "args": ["sample.md", "-o", "sample.html"]
    }

配置好后在markdown文件焦点处按下快捷键 “Command + Shift + B”即可编译转换，类似也可以运行其他可以通过命令号工具调用的工具，如lessc、gulp、grunt等等

个人觉得目前Task功能很鸡肋，连基本的 watcher 功能都要依赖 Gulp 来实现，而大多数任务通过简单的命令行调用即可，书写配置文件有时候反而把简单的事搞复杂了，况且 package.json 的 scripts 字段已经赋予了项目通过配置来运行任务的功能了

    "scripts": {
        "start": "NODE_ENV=production node --harmony server-side/server.js",
        "dev": "NODE_ENV=development node --debug --harmony server-side/server.js",
        "pm2": "NODE_ENV=production pm2 start server-side/server.js --node-args=\"--harmony\"",
        "pm2-dev": "NODE_ENV=development pm2 start server-side/server.js --node-args=\"--harmony\"",
        "local": "NODE_ENV=local nodemon --debug --harmony server-side/server.js",
        "test": "npm run test-jshint && npm run test-mocha",
        "test-mocha": "NODE_ENV=test mocha --harmony ./server-side/**/*.spec.js",
        "test-jshint": "jshint -c .jshintrc server-cd side/**/*.js --exclude server-side/**/*.spec.js --reporter node_modules/jshint-stylish/stylish.js",
        "test-mocha-watch": "NODE_ENV=test mocha --watch --harmony ./server-side/**/*.spec.js"
    },

版本控制

它提供了建议的Color Diff工具，清晰地让开发者看到文件变更的差异，提高了diff的效率

编辑器底部工具栏左下角清晰地显示了当前开发所处的分支

点击当前分支，编辑器会弹出所有（远程、本地）分支以供切换，人性化十足

仍有不足

• 插件系统的缺乏
• 编辑器配色缺乏
• 仍需要更多语言的支持
• 本地文件历史快照缺乏
• 光标位置历史的前进、后退
• ^_^ 欢迎补充