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移动开发者大会。

VS Code开发技巧集锦的更多相关文章

  1. VS Code开发技巧集锦【转】

    转自:http://blog.csdn.net/tiantangyouzui/article/details/52163175 入门 自定义 扩展 文件/文件夹管理 编辑技巧 智能感应功能 代码片段 ...

  2. Unity 游戏开发技巧集锦之使用cookie类型的纹理模拟云层的移动

    Unity 游戏开发技巧集锦之使用cookie类型的纹理模拟云层的移动 使用cookie类型的纹理模拟云层的移动 现实生活中,当阳光直射大地,而天空中又有很多云时,云层的影子总是会投射在大地上,风吹着 ...

  3. Unity 游戏开发技巧集锦之创建透明的材质

    Unity 游戏开发技巧集锦之创建透明的材质 Unity创建透明的材质 生活中不乏透明或者半透明的事物.例如,擦的十分干净的玻璃,看起来就是透明的:一些塑料卡片,看起来就是半透明的,如图3-23所示. ...

  4. Unity 游戏开发技巧集锦之创建部分光滑部分粗糙的材质

    Unity 游戏开发技巧集锦之创建部分光滑部分粗糙的材质 创建部分光滑部分粗糙的材质 生活中,有类物体的表面既有光滑的部分,又有粗糙的部分,例如丽江的石板路,如图3-17所示,石板的表面本来是粗糙的, ...

  5. Unity 游戏开发技巧集锦之材质的应用的创建反射材质

    Unity 游戏开发技巧集锦之材质的应用的创建反射材质 Unity中材质的应用 游戏中,大多数材质的应用都离不开纹理,而纹理本身是图片.所以,在学习本章时,最好在电脑上安装一个可以编辑图片的功能强大的 ...

  6. Unity 游戏开发技巧集锦之使用忍者飞镖创建粒子效果

    Unity 游戏开发技巧集锦之使用忍者飞镖创建粒子效果 使用忍者飞镖创建粒子效果 游戏中,诸如烟.火.水滴.落叶等粒子效果,都可以使用粒子系统(particle system)来实现.例如,<明 ...

  7. Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机

    Unity 游戏开发技巧集锦之制作一个望远镜与查看器摄像机 Unity中制作一个望远镜 本节制作的望远镜,在鼠标左键按下时,看到的视图会变大:当不再按下的时候,会慢慢缩小成原来的视图.游戏中时常出现的 ...

  8. iOS开发技巧系列---详解KVC(我告诉你KVC的一切)

    KVC(Key-value coding)键值编码,单看这个名字可能不太好理解.其实翻译一下就很简单了,就是指iOS的开发中,可以允许开发者通过Key名直接访问对象的属性,或者给对象的属性赋值.而不需 ...

  9. Angular开发技巧

    由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...

随机推荐

  1. Qt ------- QByteArray操作注意

    使用QByteArray方法把数据存入QByteArray需要是char型数据,如果需要存入无符号8位数据,如下: QByteArray data; data[0] = 0xFF; 即使通过data[ ...

  2. [技巧篇]04.使用PowerDesigner逆向生成

  3. Javascript利用递归实现数组的快速排序

    // 定义快速排序方法 function quickSort(arr){ // 设置递归的终止条件 if( arr.length <= 1){ return arr; } // 获得数组arr的 ...

  4. 【Android】完善Android学习(四:API 3.1)

    备注:之前Android入门学习的书籍使用的是杨丰盛的<Android应用开发揭秘>,这本书是基于Android 2.2API的,目前Android已经到4.4了,更新了很多的API,也增 ...

  5. C11简洁之道:tupe元祖

    tuple元组是一个固定大小不同类型的值的集合,是泛化的std::pair.我们也可以把它当作一个通用的结构体来使用,不需要创建结构体有获取结构体特征,在某些情况可以取代结构体,使程序更简洁.直观. ...

  6. pythonweb框架

    https://www.cnblogs.com/sss4/p/8097653.html

  7. kafka命令总结

    ./kafka-console-consumer.sh  --bootstrap-server IP:9092  --topic user-asset-change-v1 --partition 2  ...

  8. 【BZOJ1926】【SDOI2010】粟粟的书架 [主席树]

    粟粟的书架 Time Limit: 30 Sec  Memory Limit: 552 MB[Submit][Status][Discuss] Description 幸福幼儿园 B29 班的粟粟是一 ...

  9. bzoj 2956: 模积和 ——数论

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  10. bzoj 4552: [Tjoi2016&Heoi2016]排序——二分+线段树

    Description 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这 ...