VS Code开发技巧集锦【转】
转自:http://blog.csdn.net/tiantangyouzui/article/details/52163175
- 入门
- 自定义
- 扩展
- 文件/文件夹管理
- 编辑技巧
- 智能感应功能
- 代码片段
- Git集成
- 调试
- 任务运行
下文提及的快捷键可能与机器最新设置不符,请参考官方快捷键说明。
1.入门
打开命令面板
轻松找出VS Code所有可用命令。
Mac:cmd+shift+p
or f1
Windows / Linux:ctrl+shift+p
or f1
快捷键偏好设置
所有命令(及其快捷键)均显示在命令面板中。如果忘记了如何操作,可随时查看。
快速打开
快速打开文件,运行命令(见下文)
Mac: cmd+p
Windows / Linux: ctrl+p
键入“?”获取帮助。
将命令复制粘贴到快速打开中
键入cmd+p
,然后粘贴想要运行的命令,浏览扩展(插件)市场时尤为适用。
命令行参数
- Linux: Follow instructions Linux指南和Windows指南参考:Mac指南见下文:
打开命令面板(
F1
)→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。# create a new window
code -n # change the language
code --locale=es # open diff editor
code --diff <file1> <file2> # see help options
code --help.vscode文件夹
工作区文件夹在 .vscode中,比如任务运行是tasks.json,检查漏洞是launch.json。
状态栏效果
- 错误和警告
Mac:
shift+cmd+m
Windows / Linux:
ctrl+shift+m
快速跳转到错误和警告。
按
f8
或shift+f8
,循环错误检查。- 更新扩展
更新扩展提示会出现在左下角状态栏。
- 更改语言模式
Mac:
cmd+k
m
Windows / Linux:
ctrl+k
m
2. 个人设置
这一部分个人发挥的空间很大,完整信息请参考:设置编辑器
打开settings.json。
Mac:
cmd+,
Windows / Linux: File -> Preferences -> User Settings
更改字体大小:”editor.fontSize”: 18
更改标签大小:”editor.tabSize”: 4
空格/标签:”editor.insertSpaces”: true
忽略文件/文件夹
清除编辑窗口中的文件/文件夹。
"files.exclude": {
"somefolder/": true,
"somefile": true
}清除搜索结果中的文件/文件夹。
"search.exclude": {
"someFolder/": true,
"somefile": true
}
JSON验证
很多文件默认设置了json验证,可以在settings.json中创建自己的验证模式:
"json.schemas": [
{
"fileMatch": [
"/bower.json"
],
"url": "http://json.schemastore.org/bower"
}
]对于工作区中的模式:
"json.schemas": [
{
"fileMatch": [
"/foo.json"
],
"url": "./myschema.json"
}
]自定义模式:
"json.schemas": [
{
"fileMatch": [
"/.myconfig"
],
"schema": {
"type": "object",
"properties": {
"name" : {
"type": "string",
"description": "The name of the entry"
}
}
}
},更多内容请参考: 3.扩展
贡献点
参考:
- 配置
- 命令
- 快捷键
- 语言
- 调试器
- 语法
- 主题
- 代码片段
- json验证
找到扩展
- 官方VS Code市场;
- 搜索产品(见下文);
- 浏览扩展推荐(见下文);
- 社区扩展产品,如安装扩展
Mac:
cmd+shift+p
Windows / Linux:
ctrl+shift+p
然后键入“ext install”。选择合适的扩展,再按回车键。
扩展推荐
Mac:
cmd+shift+p
Windows / Linux:
ctrl+shift+p
键入“ext”→选择“Show Extension Recommendations”
卸载扩展
Mac:
cmd+shift+p
Windows / Linux:
ctrl+shift+p
键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”
4.文件和文件夹管理
OS X布局
使用任务控制,将终端窗口和VS Code放在同一个屏幕上,就得到一个整合的终端啦!
自动保存
用
cmd+
,打开settings.json
:"files.autoSave": "afterDelay"
开启侧边栏
Mac:
cmd+b
Windows / Linux:
ctrl+b
分割(Side by side)编辑
Mac:
cmd+\
orcmd
then click a file from the file browser.Windows / Linux:
ctrl+\
Linux:
ctrl+2
编辑器切换
Mac:
cmd+1
,cmd+2
,cmd+3
Windows / Linux:
ctrl+1
,ctrl+2
,ctrl+3
切换到资源管理器窗口(explorer window)
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
关闭当前文件夹
Linux:
ctrl+k
f
历史
用
ctrl+tab
来浏览历史向后浏览:
Mac:
ctrl+-
Windows / Linux:
alt+left
向前浏览:
Mac:
ctrl+shift+up
Windows / Linux:
alt+right
打开文件
Mac:
cmd+e
orcmd+p
Windows / Linux:
ctrl+e
orctrl+p
文件关联
为无法精确检测的文件设置语言关联(即配置文件):
"file.associations": {
".eslintrc": "json"
}5.编辑技巧
括号匹配
更多内容请参考:Mac:
cmd+shift+\
Windows / Linux:
ctrl+shift+\
多游标选择
更多内容请参考:Mac:
opt+cmd+up
oropt+cmd+down
Windows:
ctrl+alt+up
orctrl+alt+down
Linux:
alt+shift+up
oralt+shift+down
为当前选择添加游标。
复制一行
Mac:
opt+shift+up
oropt+shift+down
Windows / Linux(shift+alt+down or
shift+alt+up
缩小/扩大选择
更多内容请参考:Mac:
ctrl+shift+cmd+left
orctrl+shift+cmd+right
Windows / Linux:
shift+alt+left
orshift+alt+right
符号查找
Mac:
cmd+shift+o
Windows / Linux:
ctrl+shift+o
定位特定的一行
Mac:
ctrl+g
orcmd+p
, :
Windows / Linux:
ctrl+g
撤销游标位置
Mac:
cmd+u
Windows / Linux:
ctrl+u
上下移动一行
Mac:
opt+up
oropt+down
Windows / Linux:
alt+up
oralt+down
修整行尾空格
Mac:
cmd+shift+x
Windows / Linux:
ctrl+shift+x
代码格式化
Mac:
opt+shift+f
Windows / Linux:
shift+alt+f
代码折叠
Mac:
shift+cmd+[
andshift+cmd+]
Windows / Linux:
ctrl+shift+[
andctrl+shift+]
选择当前一行
Mac:
cmd+i
Windows / Linux:
ctrl+i
回到文件开端/末尾
Mac:
cmd+up
andcmd+down
Windows:
ctrl+up
andctrl+down
Linux:
ctrl+home
andctrl+end
打开README预览
在markdown文件中使用:
Mac:
shift+cmd+v
Windows / Linux:
ctrl+shift+v
分割(Side by Side)Markdown编辑和预览
在markdown文件中使用:
Linux:
ctrl+k v
6.智能感应
试用
ctrl+space
来启动建议栏,这一条可以说是最有用的建议了。可浏览可用的方法、参数以及简短文档等等。
预览(peek)
选择一个符号,键入
alt+f12
,或者使用快捷菜单。转到定义
选择一个符号,键入
f12
,或者使用快捷菜单。查找所有引用
选择一个符号,键入
shift+f12
,或者使用快捷菜单。符号重命名
选择一个符号,键入
f2
,或者使用快捷菜单。jsconfig.json
在JavaScript源文件根上配置jsconfig.json,就可以使用ES6了。
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
}, "exclude": [
"npm_modules"
]
}.eslintrc.json
安装http://eslint.org/docs/user-guide/configuring
以下是使用es6的配置。
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"classes": true,
"defaultParams": true
}
},
"rules": {
"no-const-assign": 1,
"no-extra-semi": 0,
"semi": 0,
"no-fallthrough": 0,
"no-empty": 0,
"no-mixed-spaces-and-tabs": 0,
"no-redeclare": 0,
"no-this-before-super": 1,
"no-undef": 1,
"no-unreachable": 1,
"no-use-before-define": 0,
"constructor-super": 1,
"curly": 0,
"eqeqeq": 0,
"func-names": 0,
"valid-typeof": 1
}
}package.json
参考package.json文件中的智能感应功能。
安装typings应用
install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。
Emmet语法
7.代码片段
创建自定义代码
File -> Preferences -> User Snippets,选择语言,创建代码片段。
"create component": {
"prefix": "component",
"body": [
"class $1 extends React.Component {",
"",
" render() {",
" return ($2);",
" }",
"",
"}"
]
},更多内容请参考: 8.Git集成
Git工作流的流畅集成。
Diffs
点击Git图标,选择要diff的文件。
分割(Side by side)
默认的是分割diff。
内联视图
点击下图所示的“more”选项来启动内联视图。
分支
通过状态栏可轻松切换分支。
Staging
- Stage所有文件
一次选择多个文件,再点击加号按钮。
- Stage选择
Stage文件一部分的方法是:使用箭头选择该文件,然后点击“more”按钮来stage“selected lines”。
撤销最近一次命令
查看Git输出
有时难免需要了解工具的运行状况。有了VS Code,查看正在运行的命令更简单,这对于Git学习或是解决源代码管理问题尤为有帮助。
Mac:
shift+cmd+u
Windows / Linux:
ctrl+shift+u
运行toggleOutput要下拉选择Git。
边槽指示器
查看编辑器中的diff设置。更多内容请参考:
消除合并冲突
在合并时点击git图标,在diff view里做更改。
将VS Code设置为默认合并工具
git config --global merge.tool code
9.调试
配置调试器
点击F1,选择“Debug: Open Launch.json”,再选择环境,随后产生一个launch.json文件。Node.js等环境可以直接运行,可能需要额外配置其他语言。更多内容请参考:
断点和逐句通过
断点应在行数旁边。用调试插件向前浏览。
数据检查
检查变量在调试面板和控制台里。
10.任务运行
自动检测任务
按下
f1
,键入“Configure Task”,然后选择“Configure Task Runner”,会生成一个task.json文件,内容如下。更多内容请参考:{ // See http://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "install", "args": ["install"] }, { "taskName": "build", "args": ["run", "build"] } ] }
在命令面板上运行任务
点击
f1
,运行命令“Run Task”,然后选择要运行的任务。运行“Terminate Running Task”来终止运行该命令。
- 入门
- 自定义
- 扩展
- 文件/文件夹管理
- 编辑技巧
- 智能感应功能
- 代码片段
- Git集成
- 调试
- 任务运行
下文提及的快捷键可能与机器最新设置不符,请参考官方快捷键说明。
1.入门
打开命令面板
轻松找出VS Code所有可用命令。
Mac:
cmd+shift+p
orf1
Windows / Linux:
ctrl+shift+p
orf1
快捷键偏好设置
所有命令(及其快捷键)均显示在命令面板中。如果忘记了如何操作,可随时查看。
快速打开
快速打开文件,运行命令(见下文)
Mac:
cmd+p
Windows / Linux:
ctrl+p
键入“?”获取帮助。
将命令复制粘贴到快速打开中
键入
cmd+p
,然后粘贴想要运行的命令,浏览扩展(插件)市场时尤为适用。命令行参数
- Linux: Follow instructions Linux指南和Windows指南参考:Mac指南见下文:
打开命令面板(
F1
)→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。# create a new window
code -n # change the language
code --locale=es # open diff editor
code --diff <file1> <file2> # see help options
code --help.vscode文件夹
工作区文件夹在 .vscode中,比如任务运行是tasks.json,检查漏洞是launch.json。
状态栏效果
- 错误和警告
Mac:
shift+cmd+m
Windows / Linux:
ctrl+shift+m
快速跳转到错误和警告。
按
f8
或shift+f8
,循环错误检查。- 更新扩展
更新扩展提示会出现在左下角状态栏。
- 更改语言模式
Mac:
cmd+k
m
Windows / Linux:
ctrl+k
m
2. 个人设置
这一部分个人发挥的空间很大,完整信息请参考:设置编辑器
打开settings.json。
Mac:
cmd+,
Windows / Linux: File -> Preferences -> User Settings
更改字体大小:”editor.fontSize”: 18
更改标签大小:”editor.tabSize”: 4
空格/标签:”editor.insertSpaces”: true
忽略文件/文件夹
清除编辑窗口中的文件/文件夹。
"files.exclude": {
"somefolder/": true,
"somefile": true
}清除搜索结果中的文件/文件夹。
"search.exclude": {
"someFolder/": true,
"somefile": true
}
JSON验证
很多文件默认设置了json验证,可以在settings.json中创建自己的验证模式:
"json.schemas": [
{
"fileMatch": [
"/bower.json"
],
"url": "http://json.schemastore.org/bower"
}
]对于工作区中的模式:
"json.schemas": [
{
"fileMatch": [
"/foo.json"
],
"url": "./myschema.json"
}
]自定义模式:
"json.schemas": [
{
"fileMatch": [
"/.myconfig"
],
"schema": {
"type": "object",
"properties": {
"name" : {
"type": "string",
"description": "The name of the entry"
}
}
}
},更多内容请参考: 3.扩展
贡献点
参考:
- 配置
- 命令
- 快捷键
- 语言
- 调试器
- 语法
- 主题
- 代码片段
- json验证
找到扩展
- 官方VS Code市场;
- 搜索产品(见下文);
- 浏览扩展推荐(见下文);
- 社区扩展产品,如安装扩展
Mac:
cmd+shift+p
Windows / Linux:
ctrl+shift+p
然后键入“ext install”。选择合适的扩展,再按回车键。
扩展推荐
Mac:
cmd+shift+p
Windows / Linux:
ctrl+shift+p
键入“ext”→选择“Show Extension Recommendations”
卸载扩展
Mac:
cmd+shift+p
Windows / Linux:
ctrl+shift+p
键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”
4.文件和文件夹管理
OS X布局
使用任务控制,将终端窗口和VS Code放在同一个屏幕上,就得到一个整合的终端啦!
自动保存
用
cmd+
,打开settings.json
:"files.autoSave": "afterDelay"
开启侧边栏
Mac:
cmd+b
Windows / Linux:
ctrl+b
分割(Side by side)编辑
Mac:
cmd+\
orcmd
then click a file from the file browser.Windows / Linux:
ctrl+\
Linux:
ctrl+2
编辑器切换
Mac:
cmd+1
,cmd+2
,cmd+3
Windows / Linux:
ctrl+1
,ctrl+2
,ctrl+3
切换到资源管理器窗口(explorer window)
Mac: cmd+shift+e
Windows / Linux: ctrl+shift+e
关闭当前文件夹
Linux:
ctrl+k
f
历史
用
ctrl+tab
来浏览历史向后浏览:
Mac:
ctrl+-
Windows / Linux:
alt+left
向前浏览:
Mac:
ctrl+shift+up
Windows / Linux:
alt+right
打开文件
Mac:
cmd+e
orcmd+p
Windows / Linux:
ctrl+e
orctrl+p
文件关联
为无法精确检测的文件设置语言关联(即配置文件):
"file.associations": {
".eslintrc": "json"
}5.编辑技巧
括号匹配
更多内容请参考:Mac:
cmd+shift+\
Windows / Linux:
ctrl+shift+\
多游标选择
更多内容请参考:Mac:
opt+cmd+up
oropt+cmd+down
Windows:
ctrl+alt+up
orctrl+alt+down
Linux:
alt+shift+up
oralt+shift+down
为当前选择添加游标。
复制一行
Mac:
opt+shift+up
oropt+shift+down
Windows / Linux(shift+alt+down or
shift+alt+up
缩小/扩大选择
更多内容请参考:Mac:
ctrl+shift+cmd+left
orctrl+shift+cmd+right
Windows / Linux:
shift+alt+left
orshift+alt+right
符号查找
Mac:
cmd+shift+o
Windows / Linux:
ctrl+shift+o
定位特定的一行
Mac:
ctrl+g
orcmd+p
, :
Windows / Linux:
ctrl+g
撤销游标位置
Mac:
cmd+u
Windows / Linux:
ctrl+u
上下移动一行
Mac:
opt+up
oropt+down
Windows / Linux:
alt+up
oralt+down
修整行尾空格
Mac:
cmd+shift+x
Windows / Linux:
ctrl+shift+x
代码格式化
Mac:
opt+shift+f
Windows / Linux:
shift+alt+f
代码折叠
Mac:
shift+cmd+[
andshift+cmd+]
Windows / Linux:
ctrl+shift+[
andctrl+shift+]
选择当前一行
Mac:
cmd+i
Windows / Linux:
ctrl+i
回到文件开端/末尾
Mac:
cmd+up
andcmd+down
Windows:
ctrl+up
andctrl+down
Linux:
ctrl+home
andctrl+end
打开README预览
在markdown文件中使用:
Mac:
shift+cmd+v
Windows / Linux:
ctrl+shift+v
分割(Side by Side)Markdown编辑和预览
在markdown文件中使用:
Linux:
ctrl+k v
6.智能感应
试用
ctrl+space
来启动建议栏,这一条可以说是最有用的建议了。可浏览可用的方法、参数以及简短文档等等。
预览(peek)
选择一个符号,键入
alt+f12
,或者使用快捷菜单。转到定义
选择一个符号,键入
f12
,或者使用快捷菜单。查找所有引用
选择一个符号,键入
shift+f12
,或者使用快捷菜单。符号重命名
选择一个符号,键入
f2
,或者使用快捷菜单。jsconfig.json
在javascript源文件根上配置jsconfig.json,就可以使用ES6了。
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
}, "exclude": [
"npm_modules"
]
}.eslintrc.json
安装http://eslint.org/docs/user-guide/configuring
以下是使用es6的配置。
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"classes": true,
"defaultParams": true
}
},
"rules": {
"no-const-assign": 1,
"no-extra-semi": 0,
"semi": 0,
"no-fallthrough": 0,
"no-empty": 0,
"no-mixed-spaces-and-tabs": 0,
"no-redeclare": 0,
"no-this-before-super": 1,
"no-undef": 1,
"no-unreachable": 1,
"no-use-before-define": 0,
"constructor-super": 1,
"curly": 0,
"eqeqeq": 0,
"func-names": 0,
"valid-typeof": 1
}
}package.json
参考package.json文件中的智能感应功能。
安装typings应用
install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。
Emmet语法
7.代码片段
创建自定义代码
File -> Preferences -> User Snippets,选择语言,创建代码片段。
"create component": {
"prefix": "component",
"body": [
"class $1 extends React.Component {",
"",
" render() {",
" return ($2);",
" }",
"",
"}"
]
},更多内容请参考: 8.Git集成
Git工作流的流畅集成。
Diffs
点击Git图标,选择要diff的文件。
分割(Side by side)
默认的是分割diff。
内联视图
点击下图所示的“more”选项来启动内联视图。
分支
通过状态栏可轻松切换分支。
Staging
- Stage所有文件
一次选择多个文件,再点击加号按钮。
- Stage选择
Stage文件一部分的方法是:使用箭头选择该文件,然后点击“more”按钮来stage“selected lines”。
撤销最近一次命令
查看Git输出
有时难免需要了解工具的运行状况。有了VS Code,查看正在运行的命令更简单,这对于Git学习或是解决源代码管理问题尤为有帮助。
Mac:
shift+cmd+u
Windows / Linux:
ctrl+shift+u
运行toggleOutput要下拉选择Git。
边槽指示器
查看编辑器中的diff设置。更多内容请参考:
消除合并冲突
在合并时点击git图标,在diff view里做更改。
将VS Code设置为默认合并工具
git config --global merge.tool code
9.调试
配置调试器
点击F1,选择“Debug: Open Launch.json”,再选择环境,随后产生一个launch.json文件。node.js等环境可以直接运行,可能需要额外配置其他语言。更多内容请参考:
断点和逐句通过
断点应在行数旁边。用调试插件向前浏览。
数据检查
检查变量在调试面板和控制台里。
10.任务运行
自动检测任务
按下
f1
,键入“Configure Task”,然后选择“Configure Task Runner”,会生成一个task.json文件,内容如下。更多内容请参考:{ // See http://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "npm", "isShellCommand": true, "showOutput": "always", "suppressTaskName": true, "tasks": [ { "taskName": "install", "args": ["install"] }, { "taskName": "build", "args": ["run", "build"] } ] }
在命令面板上运行任务
点击
f1
,运行命令“Run Task”,然后选择要运行的任务。运行“Terminate Running Task”来终止运行该命令。
- 社区扩展产品,如安装扩展
最新文章
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)
- visio如何让动态连接线的单箭头变成双箭头?
- NLog
- bootstrp水平表单格式
- Web开发, 跳转时出现java.lang.ClassNotFoundException
- python_way ,day23 API
- C# virtual和override
- 浅谈sqlserver数据库优化(一)----开光篇
- UVa 11524 - InCircle
- mysqldump 备份原理9
- NSRunLoop(来自官方文档)
- CentOS 6.5 伪分布式 安装 hadoop 2.6.0
- 【ActionBar的使用】
- 对于bootstrap可视化布局设计可以参考2017.6.2
- 将一个整数M分成N个整数 要求每个都在区间【minV, maxV】之间
- Day8--Python--文件操作
- [转载] 虚拟机下面安装windows+oracle ASM的过程
- C# 简单的定时关机
- Guava CompoundOrdering
- javascript获取事件源对象和产生事件的对象
热门文章
- linux常用指令学习记录
- web前端使用localstorage、sessionstorage、cookie增删获方法
- JZOJ 4269. 【NOIP2015模拟10.27】挑竹签
- Susan Sontag【苏珊&#183;桑塔格】
- 指针的操作 p*++
- 《鸟哥的Linux私房菜》学习笔记(4)——用户和组
- 使用dnspod遭遇的奇特问题以及背后的原因与临时解决方法
- 可实现一键分享到多个平台(微信,微博,qq空间,人人等)
- 误删除pycharm项目中的文件,如何恢复?
- Github新手使用学习详解