VS Code开发技巧集锦

Posted 2020-09-01

2016 年 9 月 23-24 日，由 CSDN 和创新工场联合主办的“MDCC 2016 移动开发者大会? 中国”（Mobile Developer Conference China）将在北京? 国家会议中心召开，来自ios、android、跨平台开发、产品设计、VR开发、移动直播、人工智能、物联网、硬件开发、信息无障碍10个领域的技术专家将分享他们在各自行业的真知灼见。

　　从8月8日起至9月4日，MDCC大会门票处于6.8折优惠票价阶段，五人以上团购更有特惠，限量供应（票务详情链接，6.8折优惠，欲购从速！）

　　微软在其官方GitHub上公布了一系列VS Code tips and tricks，本文为对它的翻译提炼，译者：张新慧。

　　目录

　　入门自定义扩展文件/文件夹管理编辑技巧智能感应功能代码片段Git集成调试任务运行

　　下文提及的快捷键可能与机器最新设置不符，请参考官方快捷键说明。

　　1.入门

　　打开命令面板

　　轻松找出VS Code所有可用命令。

　　Mac：cmd+shift+por f1

　　Windows / Linux：ctrl+shift+por f1

　　

　　快捷键偏好设置

　　所有命令（及其快捷键）均显示在命令面板中。如果忘记了如何操作，可随时查看。

　　快速打开

　　快速打开文件，运行命令（见下文）

　　Mac: cmd+p

　　Windows / Linux: ctrl+p

　　键入“?”获取帮助。

　　将命令复制粘贴到快速打开中

　　键入cmd+p，然后粘贴想要运行的命令，浏览扩展（插件）市场时尤为适用。

　　

　　

　　命令行参数

　　Linux: Follow instructions here.Windows: Follow instructions here.Mac: see below.

　　Linux指南和Windows指南参考：http://code.visualstudio.com/docs/setup/setup-overview。

　　Mac指南见下文：

　　打开命令面板（F1）→键入“shell command”→回车键执行“Shell Command: Install ‘code’ command in PATH”。

　　

　　# create a new windowcode -n # change the languagecode --locale=es # open diff editorcode --diff <file1> <file2> # see help optionscode --help

　　.vscode文件夹

　　工作区文件夹在 .vscode中，比如任务运行是tasks.json，检查漏洞是launch.json。

　　状态栏效果

　　错误和警告

　　Mac: shift+cmd+m

　　Windows / Linux: ctrl+shift+m

　　快速跳转到错误和警告。

　　按f8或shift+f8，循环错误检查。

　　

　　更新扩展

　　更新扩展提示会出现在左下角状态栏。

　　

　　更改语言模式

　　Mac: cmd+km

　　Windows / Linux: ctrl+km

　　

　　2. 个人设置

　　这一部分个人发挥的空间很大，完整信息请参考：http://code.visualstudio.com/docs/customization/overview。

　　设置编辑器

　　打开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}

　　更多内容请参考：http://code.visualstudio.com/docs/customization/userandworkspace。

　　预览主题

　　

　　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", "deion": "The name of the entry"} } } },

　　更多内容请参考：http://code.visualstudio.com/docs/languages/json。

　　3.扩展

　　贡献点

　　参考：http://code.visualstudio.com/docs/extensionAPI/extension-points

　　配置命令快捷键语言调试器语法主题代码片段json验证

　　找到扩展

　　官方VS Code市场；搜索产品（见下文）；浏览扩展推荐（见下文）；社区扩展产品，如awesome-vscode。

　　安装扩展

　　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+\or cmdthen 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+kf

　　历史

　　用ctrl+tab来浏览历史

　　向后浏览：

　　Mac: ctrl+-

　　Windows / Linux: alt+left

　　向前浏览：

　　Mac: ctrl+shift+up

　　Windows / Linux: alt+right

　　

　　打开文件

　　Mac: cmd+eor cmd+p

　　Windows / Linux: ctrl+eor ctrl+p

　　

　　文件关联

　　为无法精确检测的文件设置语言关联（即配置文件）：

　　"file.associations": { ".eslintrc": "json"}

　　5.编辑技巧

　　括号匹配

　　更多内容请参考：http://code.visualstudio.com/docs/editor/editingevolved

　　Mac: cmd+shift+\

　　Windows / Linux: ctrl+shift+\

　　

　　多游标选择

　　更多内容请参考：http://code.visualstudio.com/docs/editor/editingevolved

　　Mac: opt+cmd+upor opt+cmd+down

　　Windows: ctrl+alt+upor ctrl+alt+down

　　Linux: alt+shift+upor alt+shift+down

　　

　　

　　为当前选择添加游标。

　　

　　复制一行

　　Mac: opt+shift+upor opt+shift+down

　　Windows / Linux(Issue #5363): shift+alt+downor shift+alt+up

　　

　　缩小/扩大选择

　　更多内容请参考：http://code.visualstudio.com/docs/editor/editingevolved

　　Mac: ctrl+shift+cmd+leftor ctrl+shift+cmd+right

　　Windows / Linux: shift+alt+leftor shift+alt+right

　　

　　符号查找

　　Mac: cmd+shift+o

　　Windows / Linux: ctrl+shift+o

　　

　　定位特定的一行

　　Mac: ctrl+gor cmd+p, :

　　Windows / Linux: ctrl+g

　　

　　撤销游标位置

　　Mac: cmd+u

　　Windows / Linux: ctrl+u

　　

　　上下移动一行

　　Mac: opt+upor opt+down

　　Windows / Linux: alt+upor alt+down

　　

　　修整行尾空格

　　Mac: cmd+shift+x

　　Windows / Linux: ctrl+shift+x

　　

　　代码格式化

　　Mac: opt+shift+f

　　Windows / Linux: shift+alt+f

　　

　　代码折叠

　　Mac: shift+cmd+[and shift+cmd+]

　　Windows / Linux: ctrl+shift+[and ctrl+shift+]

　　

　　选择当前一行

　　Mac: cmd+i

　　Windows / Linux: ctrl+i

　　

　　回到文件开端/末尾

　　Mac: cmd+upand cmd+down

　　Windows: ctrl+upand ctrl+down

　　Linux: ctrl+homeand ctrl+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

　　在java源文件根上配置jsconfig.json，就可以使用ES6了。

　　{ "compilerOptions": { "target": "ES6", "module": "commonjs"}, "exclude": [ "npm_modules"] }

　　.eslintrc.json

　　安装eslint extension。按照个人喜好配置。具体说明参考：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应用

　　安装typings来引进.d.ts文件来激活java智能感应功能。

　　npm install typings --global# Search fordefinitions. typings search tape # Find an available definition (by name). typings search --name react# Install typings (DT is"ambient", make sure toenable the flag andpersist the selection in`typings.json`). typings install react --ambient --save

　　install会创建一个typings文件夹。VS Code会引用.d.ts文件来启动智能感应功能。

　　Emmet语法

　　Emmet语法支持

　　

　　7.代码片段

　　创建自定义代码

　　File -> Preferences -> User Snippets，选择语言，创建代码片段。

　　"create component": { "prefix": "component", "body": [ "class $1extends React.Component {", "", " render() {", " return ($2);", " }", "", "}"] },

　　更多内容请参考：http://code.visualstudio.com/docs/customization/userdefinedsnippets

　　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设置。更多内容请参考：http://code.visualstudio.com/docs/editor/editingevolved

　　

　　消除合并冲突

　　在合并时点击git图标，在diff view里做更改。

　　将VS Code设置为默认合并工具

　　gitconfig--globalmerge.toolcode

　　9.调试

　　配置调试器

　　点击F1，选择“Debug: Open Launch.json”，再选择环境，随后产生一个launch.json文件。Node.js等环境可以直接运行，可能需要额外配置其他语言。更多内容请参考：http://code.visualstudio.com/docs/editor/debugging

　　

　　断点和逐句通过

　　断点应在行数旁边。用调试插件向前浏览。

　　

　　数据检查

　　检查变量在调试面板和控制台里。

　　10.任务运行

　　自动检测任务

　　按下f1，键入“Configure Task”，然后选择“Configure Task Runner”，会生成一个task.json文件，内容如下。更多内容请参考：http://code.visualstudio.com/docs/editor/tasks

　　{ // 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”来终止运行该命令。

　　

　　关于移动开发新技术，更多精彩尽在MDCC 2016，详情请查看大会官网：MDCC 2016移动开发者大会。