当前位置: 首页 > news >正文

WebStorm编辑器侧边栏

目录

  • 编辑器侧边栏
    • 行号
      • 配置行号
      • 隐藏行号
    • 代码折叠
    • 侧边栏图标
    • 书签
      • 添加匿名书签
      • 添加助记符书签
    • 运行和调试
      • 管理断点
      • 配置断点图标
    • 版本控制
      • 配置Git Blame注释

编辑器侧边栏

编辑器左侧的垂直区域。当编写代码时,提供重要信息和操作图标。外观和行为可以根据你的喜好进行定制。
侧边栏
如果在较小的屏幕上工作,并且希望侧边栏和其他UI元素占用更少的空间,则可以启用紧凑模式。
如果使用屏幕阅读器,则可以将其配置为读取排水沟中的行号、注释和图标工具提示。

行号

默认情况下,侧边栏显示行号,这使得在与队友讨论或浏览代码时更容易引用特定的行。

配置行号

  1. 打开“设置”对话框,然后转到Editor | General | Appearance。
  2. 启用“Show line numbers”选项后,从下拉菜单中选择所需的行号模式:
  • Absolute:从文件顶部到底部顺序排列的标准行号,为每一行提供一个唯一的数字。此模式有助于在讨论或错误消息中直接导航和引用特定行。
    绝对行号
  • Relative:显示每行与插入符号的当前位置相距多少行。这对于使用键盘快捷键快速移动或编辑代码块特别有用。
    相对行号
  • Hybrid:此模式结合了绝对和相对行号,显示插入符当前位置的绝对行号和所有其他行的相对编号。它允许使用这两个系统的优点进行高效的导航和编辑。
    混合行号

隐藏行号

  • 在侧边栏上单击鼠标右键,取消选择“Appearance | Show Line Numbers”。
    隐藏行号
  • 在“设置”对话框中,转到“Editor | General | Appearance”,取消选中“Show line numbers”选项。

代码折叠

为了根据手头的任务定制代码视图,可以使用代码折叠。
代码折叠
要始终显示折叠图标,请转到“Settings | Editor | General | Code Folding”,然后选择“Show code folding arrows”旁边的“Always”。
要始终隐藏折叠图标,清除“Show code folding arrows”复选框。

侧边栏图标

可用的图标列表取决于项目的配置、使用的框架和安装的插件。例如,可用于运行程序。要访问项目可用的图标列表,请转到“Settings | Editor | General | Gutter Icons”。要显示或隐藏图标,请选中或清除其旁边的复选框。如果要禁用所有图标,请清除列表顶部的“Show gutter icons”复选框。
侧边栏图标

书签

可以为某一行添加书签,用于快速定位。

添加匿名书签

  • 按F11。
  • 侧边栏右键,选择Add Bookmark
    右键菜单
    书签图标在侧边栏空白处显示。
    书签图标

添加助记符书签

  1. 按Ctrl + F11,或右键菜单,选择“Add Mnemonic Bookmark”。
    插入助记符书签
  2. 在打开的弹出窗口中,选择要用作此书签标识符的数字或字母。
    选择助记符
    如果所选助记符已被使用,将询问您是否要用新书签覆盖现有书签。选择“不再询问”选项以静默覆盖助记符。
    覆盖提示
  3. 填写新书签的描述。
  4. 按Enter键或再次单击所选字母或数字以保存书签。字母或数字书签图标出现在书签行旁边的空白处。
    书签显示

运行和调试

  • 要运行或调试脚本,请在编辑器中打开相关的package.json文件,单击侧边栏的运行按钮,从菜单中选择运行<script_name>或调试<script_nname>。
    运行或调试脚本
  • 要运行或调试测试,请在编辑器中打开相关测试文件,单击相应按钮。
    运行或调试测试

管理断点

  • 要设置行断点,请单击可执行代码行的空白处。
  • 要设置方法断点,请单击声明方法的行处的空白处。
  • 要移动断点,请将其拖动到排水沟中的另一行上。

配置断点图标

默认情况下,断点图标放置在行号上以节省空间。
断点
要在行号附近放置断点,请右键单击侧边栏,取消选择“Appearance | Breakpoints Over Line Numbers”。
断点显示在行号上
断点显示在行号旁边

版本控制

配置Git Blame注释

可以使用VCS注释找出是谁对文件进行了哪些更改。要启用注释,请右键单击侧边栏,然后选择“Annotate with Git Blame”。
启用Git注释
可以根据自己的喜好配置注释以显示信息:

  • Annotation content 注释内容。在注释上单击鼠标右键,然后转到“View”。可以选择要包含在注释中的信息:修订号、更改日期、作者姓名。
  • Colors 颜色。在注释上单击鼠标右键,然后转到“View | Colors”。可以选择要高亮显示的内容:更改的顺序,使最近的提交更容易看到,或者更改的作者。要禁用高亮显示,请选择“Hide”选项。
  • Names 名字。在注释上单击鼠标右键,然后转到“View | Names”。可以选择如何标记作者:使用他们的全名、仅使用名字或仅使用姓氏、首字母缩写或电子邮件。

还可以在编辑器中修改文件时跟踪其更改。所有更改都会用更改标记高亮显示,这些标记显示在修改行旁边的空白处,并显示自上次与存储库同步以来引入的更改类型。当将更改提交到存储库时,更改标记会消失。
不同颜色进行高亮显示
可以使用将鼠标悬停在更改标记上然后单击它时出现的工具栏来管理更改。该工具栏与显示修改行先前内容的框架一起显示:
VCS工具栏
单击向左按钮回滚更改,单击双箭头按钮浏览当前行的当前版本和存储库版本之间的差异,单击ab按钮高亮显示已更改的片断。

相关文章:

  • 40套精品大气黑金系列行业PPT模版分享
  • 【Bluedroid】蓝牙启动之核心模块(startProfiles )初始化与功能源码解析
  • gradle的 build时kaptDebugKotlin 处理数据库模块
  • Laravel 12 更新与之前版本结构变更清单
  • 4.查看、删除数据库
  • 第9章:Neo4j集群与高可用性
  • 基于docker的nocobase本地部署流程
  • 快速使用 Flutter 中的 SnackBar 和 Toast
  • SpringBoot学习day3-SpringBoot注解开发(新闻项目后段基础)
  • 【项目实训】【项目博客#07】HarmonySmartCodingSystem系统前端开发技术详解(5.12-6.15)
  • 工厂模式Factory Pattern
  • KeyOpt
  • 征程 6 Cache 使用场景
  • DNS递归查询
  • 个人AI助理智能体之tool_calling_agent实战指南
  • C# 事件详解
  • 【数据可视化】Pyecharts-家乡地图
  • CppCon 2016 学习: std::accumulate EXPLORING AN ALGORITHMIC EMPIRE
  • 【慧游鲁博】【15】后台管理系统功能完善:仪表盘、多模态交互日志、简单问答词条管理
  • 使用VSCode开发FastAPI指南(二)
  • 徐州网站建设找哪家好/优化人员配置
  • 政府网站建设由哪个部门负责/高端网站建设专业公司
  • 专门做运动装备的网站/怎么开网店新手入门
  • 网站线框/百度推广入口登录
  • 那个网站可以做学历认证/郑州seo排名工具
  • 做微信的网站叫什么/沈阳网站优化