vscode 使用介绍Visual Studio Code （简称 VS Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。
我们将从一下几个部分来认识vscode

• 基本配置
• 集成
• 版本控制
• 代码调试
  

1 基本配置

• 直接官网下载 code.visualstudio.com/
• 首选项 ， 如下图，通过首选项，我们可以设置vscode 的基本配置 以及快捷键、用户自定义主题等。
  

如下图，基本配置实际上是一个json文件，里面有自带的默认配置，除此之外，我们每安装一个插件，都会生成一个新的json,我们通过在右侧输入自定义的json配置，就可以覆盖默认的配置项

• 快捷键 ，点击首选项下的快捷键可以查看和修改所有的快捷键配置...
  

2 集成vscode 集成了大量第三方插件，通过第三方插件可以大大提高我们的开发效率


常用插件推荐

• vuetr vue 格式化插件
• vscode-fileheader 自动保存文件创建人及修改人
• Auto Close Tag 自动关闭html标签
• Dark Dark - 猫哥基于默认 Dark 主题修改的增强主题
• EditorConfig for VS Code - 用于支持 .editorconfig 配置规范
• ESLint - 用于支持 JavaScript 实时语法校验
• Git History - 可查看文件的 git log 并进行对比
• HTML Snippets - 能修复默认 HTML Emmet 的一些问题
• Material Icon Theme - 左侧文件导航栏 Icon 主题
• Settings Syncs - 用于同步 VS Code 的配置到个人 gist 仓库
  

更多插件支持 可以看这篇文章 《强大的 VS Code》 [url]https://juejin.im/post/5b123ace6fb9a01e6f560a4b[/url]
就列这么多 大家可以自己摸索...
3 版本控制vscode 集成了git切换至 Git 面板，我们可以直接通过图形操作界面执行git命令，如：点击左侧被修改的文件，即可进行版本对比。同时
对于习惯命令操作得当同学，也可以直接在终端中执行git 命令或者ctrl + P 直接快速选择命令
4 代码调试Visual Studio Code 的关键特性之一就是它对调试的支持。在调试中如同chrome 浏览器的debug 一样，vscode 默认支持nodeJs 代码调试，我们可以安装第三方插件 来调试其他语言的代码。对于前端来说，能够非常方便进行nodeJS 代码调试


我们可以安装插件支持如python 等语言的调试


更多信息 参考官网code.visualstudio.com/docs/editor…
调试配置文件 launch.json如果我们默认通过vscode 来调试代码，会生成一个launch.json 配置文件， 详细细节可以查看官方文档code.visualstudio.com/docs/editor… 我们这里只说说我们一般会常用的地方。
lunch.json 配置项

• 必选字段
  

type：调试器类型。这里是 node(内置的调试器)，如果装了 Go 和 PHP 的扩展后对应的 type 分别为 go 和 phprequest：请求的类型，目前只支持 launch 和 attach。launch 就是以 debug 模式启动调试，attach 就是附加到已经启动的进程开启 debug 模式并调试，跟上一篇提到的用 node -e "process._debugProcess(PID)" 作用一样name：下拉菜单显示的名字复制代码

• 可选字段
  

program：可执行文件或者调试器要运行的文件 (launch)args：要传递给调试程序的参数 (launch)env：环境变量 (launch)cwd：当前执行目录 (launch)address：ip 地址 (launch & attach)port：端口号 (launch & attach)skipFiles：想要忽略的文件，数组类型 (launch & attach)processId：进程 PID (attach)复制代码同时目录变量有
${workspaceRoot}：当前打开工程的路径${file}：当前打开文件的路径${fileBasename}：当前打开文件的名字，包含后缀名${fileDirname}：当前打开文件所在的文件夹的路径${fileExtname}：当前打开文件的后缀名${cwd}：当前执行目录复制代码通常一个默认的launch.json 默认配置如下
{    "version": "0.2.1",    "configurations": [        {            "type": "node",            "request": "launch",            "name": "启动程序",            "program": "${workspaceFolder}/index.js"        }    ]}复制代码这个配置会直接运行index.js 我们项目目录下的index.js 文件。我们可以根据上面的配置信息 自动的定义我们启动运行的文件。
调试技巧

• 条件断点
  

1 表达式：当表达式计算结果为 true 时中断 ,如这里可以判断 ctx.body.aaa = '1' ,当为满足这个条件时，才会断点
2 命中次数同样当表达式计算结果为 true进入断点，支持运算符 <, <=, ==, >, >=, %。

• skipFiles  在调试时文件要跳过的一组 glob 模式
  

我们在单步调试时一般会进入到node_modules目录，但是我们一般往往只想调试我们的项目代码，所以这个时候可以通过配置 skipFiles 来进行过滤详细官方文档参考code.visualstudio.com/docs/nodejs…
  "skipFiles": [    "${workspaceFolder}/node_modules/**/*.js",    "${workspaceFolder}/lib/**/*.js"  ]    "skipFiles": [     "<node_internals>/**/*.js"   ]复制代码

• 自动重启
  

通过添加配置可以实现修改代码保存后会自动重启调试，需要结合 nodemon 一起使用。首先安装nodemon
npm i nodemon -g
{    "version": "0.2.1",    "configurations": [        {            "type": "node",            "request": "launch",            "name": "debug-app",            "runtimeExecutable": "nodemon",  要使用的运行时。一个绝对路径或路径上可用的运行时名称。如果省略，则假定为“节点”。            "program": "${workspaceRoot}/app.js",            "restart": true,            "console": "integratedTerminal",            "skipFiles": [                "${workspaceRoot}/node_modules/**/*.js",                "<node_internals>/**/*.js"            ]        }    ]}复制代码参数说明

• runtimeExecutable：用什么命令执行 app.js，这里设置为 nodemon，默认是 node
• restart：设置为 true，修改代码保存后会自动重启调试
• console：当点击停止按钮或者修改代码保存后自动重启调试，而 nodemon 是仍然在运行的，通过设置为 console 为 integratedTerminal 可以解决这个问题。此时 VS Code 终端将会打印 nodemon 的 log，可以在终端右侧下拉菜单选择返回第一个终端，然后运行 curl localhost:3000 调试
  

总结以上差不多就是我们能够常用到的vscode 的地方，我个人觉得在使用过程中好的地方主要是两点即1、第三方插件的使用可以极大地丰富我们的使用功能 2、调试功能用起来真的很爽。 vscode是一个十分强大的IDE工具以上列出来的只是冰山一角之一角。有兴趣的可以直接看文档code.visualstudio.com/docs，可以发掘出更多有意思的东西。


【转载】
作者：fanyang
链接：https://juejin.im/post/5bc86b0b5188255ca00cc58f