vscode入门

1. 在linux上安装vscode

  • 从官网上下载.deb安装包
  • sudo dpkg -i <package>.deb
  • sudo apt-get install -f 安装依赖

2. 基本用户界面

3. 最重要的命令

Ctrl + Shift + P :在这个命令中你可以执行任何你能想到命令,和sublime,Atom中的类似

4. vscode配置

vscode的配置主要分为两部分,一部分是用户设置,一部分是工作空间设置

用户配置一旦覆盖,就会全局生效,其配置文件在~/.config/Code/User/settings.json

工作空间设置则只会在当前工作空间生效,会在当前工作目录的.vscode中生成一个settings.json文件

.vscode/
├── launch.json
├── settings.json
└── tasks.json 

可以通过在命令面板输入settings,选择相应的命令进行配置

5. 主题

有两种类型的主题,一种是颜色主题,一种是文件图标主题

在命令面板中输入color,执行Preferences: Color Theme命令,就可以对编辑器的颜色主题进行配置

在命令面板中输入fileicon,执行Preferences: File Icon Theme命令,就可以对文件的图标进行更改

当然也可以去插件市场找自己喜欢的主题

6. 键盘绑定

打开命令面板输入shortcuts,选择Preferences: Open KeyBoard Shortcuts,就可以看到默认的键盘绑定和自定义的键盘绑定,我们可以复制默认键盘绑定到自定义的键盘绑定,然后进行修改

例如,在linux下触发代码提示的命令Ctrl + Space并不起作用,所以我将其改为了Alt + \,这里要注意了,有两个命令都是由这个键触发的,所以改的时候要两个一起改,如下

{
   "key": "alt+/",
   "command": "toggleSuggestionDetails",
   "when": "editorTextFocus && suggestWidgetVisible"
},{
   "key": "alt+/",
   "command": "editor.action.triggerSuggest",
   "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
} 

当然你也可以通过插件,选择你自己喜欢的键盘绑定方式

vscode有六大部件,分别是编辑区域,资源管理器,搜索,Git,调试,扩展,下面就具体介绍一下这五个部件

7. 编辑区域

  • 编辑区域拆分

Ctrl + \默认是将编辑器竖向排列,可以通过Shift + Alt + 1来更改编辑器排列布局,当然也可以在命令面板中输入toggle layout

  • 代码选择

全选:ctrl + A

选中一个词: Ctrl + D

选中和目前选中词相同的所有词: Shift + Ctrl + L

扩张选择: Shift + Alt + Right

缩小选择: Shift + Alt + Left

列内容选择: 按住ShiftAlt,然后鼠标拖动

向前选择: Shift + Home

向后选择: Shift + End

  • 光标移动和选择

向上添加光标: Shift + Alt + Up 或者点击鼠标

向下添加光标: Shift + Alt + Down或者点击鼠标

光标移动到行前: Home

光标移动到行尾:End

  • 代码删除

删除一行代码: Ctrl + Shift + K

  • 代码移动

向上移动行: Alt + Up

向下移动行: Alt + Down

  • 代码折叠

折叠: Shift + Ctrl + [

展开: Shift + Ctrl + ]

全部折叠: Ctrl + K Ctrl + 0

一级折叠: Ctrl + K Ctrl + 1

二级折叠: Ctrl + K Ctrl + 2

全部不折叠: Ctrl + K Ctrl + J

递归方式折叠: Ctrl + K Ctrl + [

递归方式不折叠: Ctrl + K Ctrl + ]

  • 代码跳转

跳转到实现处: F12

在本页面查看实现: Shift + Ctrl + F10

以下针对TypeScript

查看实现: Ctrl + F12

  • 代码提示

Ctrl + Space 我把它改成了 Alt + /

  • 代码注释

添加取消行注释ctrl + /

添加取消块注释ctrl + shift + A

当然也可以通过添加代码片段的方式,来添加块注释

8. 资源管理器

通过Ctrl + Shift + E 可以打开资源管理器

  • 收缩侧边栏

Ctrl + B

  • 新建文件和文件夹

新建未命名的文件Ctrl + N

其他新建没有快捷键,不妨来绑定一下

{
   "key": "a",
   "command": "explorer.newFile",
   "when": "explorerViewletVisible && filesExplorerFocus"
},{
   "key": "shift+a",
   "command": "explorer.newFolder",
   "when": "explorerViewletVisible && filesExplorerFocus"
} 
  • 打开文件和文件夹

打开文件夹 Ctrl + K Ctrl + O

打开文件 Ctrl + O

  • 保存文件

保存 Ctrl + S

另存为 Shift + Ctrl + S

  • 折叠文件夹

折叠文件夹用 enter space都可以

但是折叠全局文件夹没有快捷键

绑定一个

{
   "key": "ctrl+shift+space",
   "command": "workbench.files.action.collapseExplorerFolders",
   "when": "explorerViewletVisible && filesExplorerFocus"
} 
  • 将焦点移动到资源管理器

Ctrl + Shift + E

  • 将焦点移动到活动编辑窗口

也无快捷键,绑定如下

{
   "key": "ctrl+,",
   "command": "workbench.action.focusActiveEditorGroup",
   "when": "!editorTextFocus"
} 

9. 搜索

Shift + Ctrl + F可进入跨文件搜索

Shift + Ctrl + J可以给出要排除的文件和要包含的文件

Ctrl + F 是文件内搜索

10. Git

建议使用命令行操作

11. 调试

Ctrl + Shift + D 进入调试界面

vscode的调试很简单但也很复杂,你可以轻易地通过F5启动调试,其他操作也很简单

Step Over F10
Step Into F11
Step Out Shift+F11
Restart Ctrl+Shift+F5
Stop Shift+F5 

不过呢,它也可以很复杂,你可以通过添加.vscode/launch.json来对其调试进行配置

{
   "version": "0.2.0",
   "configurations": [
       {
           "type": "node",
           "request": "launch",
           "name": "Launch Program",
           "program": "${file}",
           "cwd": "${workspaceRoot}"
       },
       {
           "type": "node",
           "request": "attach",
           "name": "Attach to Process",
           "port": 5858
       }
   ]
} 

上面是一份简单的node调试配置

  • 基础属性

type属性:vscode可以调试node也可以调试php,不同类型程序可以有不同类型的调试方式,node内置有Gulp调试,Mocha调试,npm调试

request属性:共有两种,一种是launch,一种是attach,launch是直接启动一个调试进程,而attch则是可以先行启动一个node调试进程,然后由通过attach将vscode关联到该程序上进行调试

program:要调试程序的绝对路径

cwd:要调试程序的工作目录的绝对路径

port:这个属性是attach进程模式和远程调试专用的,指定进程端口

  • 如何在外部终端输出调试内容

通过console属性

"console": "externalTerminal" 

奇怪的是启动时无法调试

  • 添加命令选项
"args": [
   "--debug-brk"        
] 
  • 调试协议
{
   "type": "node",
   "request": "launch",
   "name": "启动程序",
   "program": "${file}",
   "protocol": "inspector",
   "cwd": "${workspaceRoot}"
} 

node中的调试协议有两种,一种是legacy,一种是inspector,inspector可以在浏览器上调试后端程序,且支持sourcemap等特性,vscode建议我们使用该协议

关于inspector模式的具体操作,看这个

而protocol属性支持三种模式,一种是auto,一种是legacy,一种是inspector.其中auto会自动检测最优协议

  • 对npm及其他工具的调试支持
{
   "type": "node",
   "request": "launch",
   "name": "Launch via NPM",
   "runtimeExecutable": "npm",
   "windows": {
       "runtimeExecutable": "npm.cmd"
   },
   "runtimeArgs": [
       "run-script",
       "debug"
   ],
   "port": 5858
} 

npm通过runtimeExecutable属性来指定启动的任务程序(设定了环境变量的全局命令),同时通过windows属性来特定windows平台的执行程序.而且通过runtimeArgs来指定运行参数.

在package.json中设定

"scripts": {
   "debug": "node --nolazy --debug-brk=5858 server.js"
 } 

启动调试

npm run-script debug 
> node-test@1.0.0 debug /home/jeffwang/fe/node-test
> node --nolazy --debug-brk=5858 server.js
Debugger listening on [::]:5858
Server running at http://127.0.0.1:1337 
  • 添加node环境变量

可以通过envenvFile载入环境变量

"env": {
   "USER": "jeff"
} 

我们来输出他

console.log(process.env.USER); 

得到的结果

node --inspect=28640 --debug-brk server.js 
Debugger listening on port 28640.
Warning: This is an experimental feature and could change at any time.
Debugger attached.
Server running at http://127.0.0.1:1337
jeff 

而envFile很简单,就是环境变量文件,这样我们可以集中管理环境变量

USER=doe
PASSWORD=abc123

# a comment

# an empty value:
empty=

# new lines expanded in quoted strings:
lines="foo\nbar" 
  • 远程调试

线上代码出现错误,又没有好的调试工具,这样就需要远程调试了,vscode有完备的远程调试功能

{
   "type": "node",
   "request": "attach",
   "name": "Attach to Remote",
   "address": "TCP/IP address of process to be debugged",
   "port": 5858,
   "localRoot": "${workspaceRoot}",
   "remoteRoot": "Absolute path to the remote directory containing the program"
} 
  • sourcepmap
{
   "type": "extensionHost",
   "request": "launch",
   "name": "启动扩展",
   "runtimeExecutable": "${execPath}",
   "args": [
       "--extensionDevelopmentPath=${workspaceRoot}"
   ],
   "sourceMaps": true,
   "outFiles": [
       "${workspaceRoot}/out/**/*.js"
   ],
   "preLaunchTask": "npm"
} 

这是vscode插件开发的调试配置,这里的sourcemap主要涉及两个参数,sourceMaps和outFiles,sourceMaps默认为true,vscode一直开着sourceMap;outFiles主要是给vscode定位编译形成的javascript代码的位置

  • 通过nodemon启动

由于node无法热启动,所以需要nodemon在文件发生改变时,重新启动node

{
   "type": "node",
   "request": "launch",
   "name": "nodemon",
   "runtimeExecutable": "nodemon",
   "runtimeArgs": [
       "--debug=5858"
   ],
   "program": "${workspaceRoot}/app.js",
   "restart": true,
   "port": 5858,
   "console": "integratedTerminal",
   "internalConsoleOptions": "neverOpen"
} 

主要参数是restart,restart设为true,会使得vscode在node进程停止后继续请求连接,默认请求限时10s,可以通过timeout属性来设置其他的限时时间

  • 跳过不想进行调试的代码
"skipFiles": [
   "${workspaceRoot}/node_modules/**/*.js",
   "${workspaceRoot}/lib/**/*.js"
 ] 

skipFiles属性是一个数组,可以跳过不想调试的代码

重要调试技巧

  • 行内调试(column breakpoints)

针对一行内有好几句代码的情况,vscode可以在断点处设置响应次数,这样断点就会停在同一行多次

在断点处右击,选择编辑断点就可以进行设置

  • 退帧调试(restart frame)

在你想更改之前代码的输入值,重新调试时十分有用

变量

${workspaceRoot} 当前工作目录
${workspaceRootFolderName} 工作目录名称
${file} 当前编辑的文件
${relativeFile} 以当前工作目录为相对路径的文件名
${fileBasename} 当前文件的basename
${fileBasenameNoExtension} 
${fileDirname} 当前文件所在目录的目录名
${fileExtname} 
${cwd} 调试启动时的工作目录
${lineNumber} 当前选中行的行数 

12. 插件

Ctrl + Shift + X 可进入插件扩展界面

安装插件

插件编写方法,请看另一篇文章,编写vscode插件

13. Task

vscode可以集成很多任务,npm,gulp,make等等

在命令面板中输入tasks,输入回车,就会在当前工作目录的.vscode中创建文件tasks.json

运行任务也很简单, Ctrl + P调出输入框,输入task,再输入空格就会见到列出的所有任务

看下面的例子

{
   
   "version": "0.1.0",
   "command": "npm",
   "isShellCommand": true,
   "showOutput": "always",
   "suppressTaskName": true,
   "echoCommand": true,
   "tasks": [
       {
           "taskName": "build",
           "args": ["run","build"]
       },
       {
           "taskName": "build-min",
           "args": ["run","build-min"]
       },
       {
           "taskName": "test",
           "args": ["run", "test"]
       }
   ]
} 

这个例子中有一个npm命令,但有3个任务

isShellCommand是指定该命令是shell命令还是外部程序

showOutput有三种模式,分别是always,silent,never,控制窗口输出规则

echoCommand控制是否输出当前执行的命令

suppressTaskName要注意当其为false时,其执行的build任务时,其执行的命令为npm build run build

还有一个多命令的例子

{
   "version": "0.1.0",
   "tasks": [
       {
           "taskName": "tsc",
           "command": "tsc",
           "args": ["-w"],
           "isShellCommand": true,
           "isBackground": true,
           "problemMatcher": "$tsc-watch"
       },
       {
           "taskName": "build",
           "command": "gulp",
           "args": ["build"],
           "isShellCommand": true
       }
   ]
} 

可以执行不同命令的任务

而且还支持不同平台不同命令

{
   "version": "0.1.0",
   "windows": {
       "command": "C:\\Program Files\\nodejs\\node.exe"
   },
   "linux": {
       "command": "/usr/bin/node"
   }
} 

另外vscode对于Gulp的任务是自动侦测的,不需要另外写配置文件

Problem Matcher

检测任务执行输出的问题,在编辑器的问题面板中输出

"tasks": [
   {
       "taskName": "build",
       "args": [],
       "isBuildCommand": true,
       "problemMatcher": [
           "$lessCompile",
           "$tsc",
           "$jshint"
       ]
   }
] 

这里面的$lessCompile,$tsc,$jshint都是问题匹配,例如$lessCompile匹配less编译是产生的问题

后台执行任务

具体参照Background / Watching tasks

14. 代码片段

打开命令面板,输入snippets,按回车,再选择javascript,就可以开始为javascript文件创建代码片段了

"If elseif else": {
   "prefix": "ifelseifelse",
   "body": [
   	"if (${1:condition}) {",
   	"\t$2",
   	"} else if(${3:condition}) {",
   	"\t$4",
   	"} else {",
   	"\t$5",
   	"}"
   ],
   "description": "If elseif else"
} 

一个简单例子,大体和Atom的机制相同

15. 集成控制台

Ctrl + ` 

可以调出控制台

16. Markdown集成

Ctrl + K V : 可以进行侧边预览

Ctrl + Shift + V: 可以在同一编辑区域中预览

参考文献


write by jeffwang 2017/04/05