• VS Code开发技巧集锦


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

  • 相关阅读:
    Centos 下oracle 11g 安装部署及手动建库过程
    MongoDB 存储引擎Wiredtiger原理剖析
    有关RDS上只读实例延时分析-同适用于自建MySQL主从延时分析判断
    windows 下my.ini的配置优化
    什么是purge操作
    linux内核调优参考
    通过第三方镜像仓库代理下载镜像
    微积分拾遗——链式法则
    Java中的RASP实现
    机器学习是什么
  • 原文地址:https://www.cnblogs.com/zzsdream/p/6438520.html
Copyright © 2020-2023  润新知