腾讯创意本月推荐 1 创意点的产品功能/使用场景介绍： TCR（代码评审）是Code平台中心研发的一个code review工具。通过此工具进行代码评审，能显著的提高代码质量、减少bug、促进团结交流合作。而在code review中用于代码展示的代码阅览器一侧，我们通过一系列的改进和创新为用户呈现了全新的类IDE方式的代码阅览器。 代码阅览器主要用于呈现代码评审中的代码，包括普通代码呈现模式和差异呈现模式两种。用户除了普通的浏览查看代码方式之外，还可以在代码不同变量和不同函数之间跳转，查看代码大纲，在代码阅览器上进行评论代码，从而达到一个代码级别的管控和交流的作用。 2 创新点的创新之处的具体描述 Ø Web端代码高亮，无缝阅读体验 用网页的方式查看代码内容，并根据代码的相关语言特性，高亮其关键字。目前平台支持41种开发语言，囊括了所有的常用开发语言。 Ø Web端代码差异对比，快速定位无烦恼 TCR代码阅览器通过左右两屏的方式对比查看代码块，清晰展示当前版本与历史版本的代码差异。其中有差异的部分会用特别颜色标注出来，以代码块的方式给用户呈现。而右侧有工具栏用特别的色块标注，使用户快速定位差异代码块。
图1 web端差异对比 Ø 交互新颖，代码点评更舒心 在TCR代码阅览器中，双击进行单行评论，单击选择可进行多行评论。微信对话式的点评方式，按评论对话角色依次替换展示评论，让用户整个评论过程更自然。评论列表可以进行隐藏收缩方便用户在不同场景下进行代码评审。
图2 新颖的评审交互方式 Ø 类IDE操作，玩转代码评审无障碍 点击变量将声明与使用行的高亮；点击跳转自动跳转到变量或者函数的声明行；拥有代码语法大纲模式；可以根据代码跳转痕迹回退与前进…… 没错，曾经只能是在IDE上的功能用户在web侧通通可以享受。拒绝重复学习，拒绝蹩脚操作，玩转代码评审，就从这个强大享受的代码阅览器开始。
图3 类IDE操作点击变量高亮使用行
图4 类IDE操作单击变量或者函数跳转 3 创意如何产生？ 我们平时写代码的时候，大多数人都习惯使用IDE进行开发。所以，IDE肯定是程序员接触最多、最熟悉的软件之一，IDE之于程序员就跟步枪之于士兵一样。所以，我们经常思考，是否在web端也可以设计出这样一款轻量级的代码阅读器，使开发者在code review的时候可以享受到这种IDE似的效果。高效、快捷、方便的浏览代码，快速理解需评审代码的逻辑、实现细节。 因此，我们在使用并且对比了业界许多成熟的code review工具（如google code、github等）的代码浏览页面之后，通过学习业界的这些优秀工具的优点，并结合公司开发者常用的IDE的使用习惯，设计属于我们自己的web端代码阅读器，希望开发者在code review的时候，也同时获得IDE似的使用体验。 4 怎么实现的？ Ø 通过对代码文件内容和格式的深度解析，实现其内容和格式与源文件的一致性展示。 Ø 在代码差异的产生上，通过自动分析用户上传的文件而产生各处的差异，以高亮、差异块栏的方式展现在页面上，并提供通用的点击功能使用户可以轻松的识别和触及差异块，实现快速定位。  图5 用户上传diff解析 Ø 通过一些列支持多语言的词法分析算法，对源文件进行词法分析而标记代码文件中变量和函数，实现变量和函数的高亮和跳转，另外同时对源文件进行语法分析，从而产生源文件的代码大纲。  图6 获取源码文件进行展现 Ø 通过在web端跟踪用户的代码跳转操作，实现代码跳转痕迹的回退与前进功能； Ø 在代码评论上，通过简单的事件处理机制使用户在任意代码行、任意代码位置就可以进行代码评论，包括单行、多行代码评论，另外还将自动通知到相关联的代码评审参与人。 5 产品的意义对未来的展望 以WEB IDE为目标的TCR代码浏览和代码差异对比功能，目前只是实现了一部分的IDE功能而已。未来将会把更多只有在本地IDE环境才有的功能在WEB上实现，例如：完整的代码语法分析能力和更加精细的标识符识别，函数、类声明识别，函数调用识别能力，以实现跟IDE无差异文件内和文件间的代码跳转功能。通过优秀的文件内和文件间的代码跳转功能，让评审人在阅读评审代码的时候更加方便，也更加容易理解代码的逻辑。 |
