Visual Studio Code 不彻底使用指南

 

介绍

---

Visual Studio Code 是“巨硬”基于 Electron 开发的一款轻量级编辑器，主打 web 开发，支持的语言包括：

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

快速导航

---

VS Code 提供了相似于 Sublime 的多功能输入框，Command + P 便可调用出

不使用前缀字符，能够进行工程内的文件搜索；输入前缀字符 ? 能够查看全部命令列表（全局命令 + 编辑器命令），其中 > 前缀的使用最为频繁，经过它咱们能够找到全部的命令，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

 

语法提示

---

VS Code 的语法提示之强大使人发指，对于支持的语言有着很好的支持，同时对于函数方法也有参数的提示

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

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

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

 

开启ES6语法支持

---

VS Code 默认支持 ES5 的语法，你的代码若是过用到了ES6的特性，又不想被内建的lint工具提示语法错误的话，你须要手动开启。在项目Proj根目录下新建jsoconfig.js文件，添加以下代码：

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

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

调试Node.js

---

在本地安装 Mono 并将其加入环境变量中后，能够调试 Node.js 程序，调试操做相似于 WebStorm，先要进行debug的配置工做，经过切换到 Debug 面板，点击绿色启动按钮，这时编辑器会在工程根文件夹下新加 .setting 文件夹，Node.js的启动/调试配置文件、Task的配置文件都会放置在此。

这里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

---

强大的 Sublime Text 2/3 一样支持Markdown语法高亮，可是预览功能却须要插件来实现，能够一键在浏览器中预览。而 VS Code 自带预览功能，Command + Shift + v 能够进行原生地预览，经过开启两栏编辑器能够实现实时预览

同其余独立 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文件)的做用下改变了样式，对于颜控党来讲美腻的皮肤老是能为书写（开发）带来额外的动力

缤彩主题请戳我

 

配置任务

---

VS Code 提供了配置 task.json 文件来快捷键运行 Task 的功能，如 Markdown -> HTML:

{
        "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" },

 

版本控制

---

VS Code 支持Git版本控制，提供了基本的stage、commit、fetch、pull、push等Git经常使用功能，设置项默认开启了后台的 auto git fetch，右侧面板的第三个即是Git管理工具的UI了，点开后当前工程文件的 status 一目了然，经过点击加号就能够把变动的文件 stage 。
编辑器提供的Commit Message输入框还可让开发者填写多行提交信息（命令行工具不支持）

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

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

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

仍有不足

---

• 插件系统的缺少
• 编辑器配色缺少
• 仍须要更多语言的支持
• 本地文件历史快照缺少

• 光标位置历史的前进、后退

• ^_^ 欢迎补充