第三波假期干货——webstrom工具栏图标

在WS中使用工具栏上的快捷图标来配合工作可以有效提高效率,因为你不用去记住一些快捷键,只要点一下鼠标即可。不过在WS中有很多实用功能却是没有自带个性图标的,导致自定义工具栏后可能就是好几个一模一样的绿色图标并排在一起,区分不出哪个是哪个,用起来也麻烦。

这里会提供自定义WS工具栏的方法,以及提供一些常用功能图标供大家替换。

给工具栏添加快捷图标

WS允许用户个性化工具栏,你可以依照自己的喜好把一些常用的图标添加上去。我们可以通过这种方式,让WS像DW一样能直接使用“行缩进”、“格式化代码”、“注释代码” 等快捷图标。

勾选上菜单栏的“视图/View” - “工具栏/Toolbar” 可以调出WS的工具栏。

假设我们现在要添加“行注释”图标,我们可以在帮助图标(蓝色问号)右边空白的地方点击右键,选择“Customize Menu andToolbars...”:

在出现的窗口中点开“Main toolbar”,选中里面的“帮助主题”图标,再点击右边的“Add After..”按钮(这表示你要在“帮助”按钮后面添加新图标),然后从“Main menu”里找到“行注释”,点OK即可(由于“行注释”是没有自己的图标的,系统会弹出窗口告知它会自行安排一个绿色图标给它,为减少图片帧数,下方效果图没把这一过程显示出来)。

然后我们可以看到工具栏的最后已经添加了“行注释”的图标,不是其显示的是系统提供的一个绿色小虫子图像。

同理我们继续添加“块注释”、“格式化”、“缩进” 等图标,系统都会默认分配这么一个绿色小虫子的图像,然后你的工具栏就是一排萌萌哒的绿虫子图标了(灰色表示暂时不能用):

替换图标图像

把绿虫子换成其它图像很简单,我们重新进入“Customize Menu andToolbars”窗口,选中要更换图像的图标,点击右侧“Edit Action Icon...”按钮,输入图标文件地址,点OK即可成功更换图标(比较郁闷的是WS支持16*16大小的png格式,却不支持ico格式)。

我们用这种方法便能将图标的图像也都个性化起来:

不过不太清楚为何“缩进选择”的图标一直为灰色无效状态(虽然直接点Tab键反而比点图标方便),若有知情的朋友请告知一声。

排列、分隔图标

选中图标后,通过点击“MoveUp/Down”可以上下移动改变图标顺序,点击“Add Separator” 可以增加图标之间的分隔线,这个不废话了,大家可以自行尝试:

我自己的整理完之后是这样子:

图标下载

上述的八个图标都是我自己制作的,虽然不够精致,但用起来总比绿虫子方便多了,如果你想要这些图标,可以来我的Github获取它们。

如果你有一些其它的常用功能也是没有个性图标的,欢迎留言告知我,我会尽量帮你做出来更新到Github上面~

共勉~

时间: 2024-10-11 19:42:35

第三波假期干货——webstrom工具栏图标的相关文章

继续送假期干货——响应式图片工具smartImg

中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Github上下载,其实它非常小巧,去掉注释一共也就40行,之所以这么轻便,JQ也是帮了大忙. 应用场景 我们在搭建响应式页面时,对于图片的处理或多或少都有些烦躁,例如我们希望在某个屏宽的环境下显示某一张图片,在另一个屏宽的环境下则显示为另一张图片. 这种做法对于用户体验是比较重要的,常规建议是用户用大屏幕设备访问

ueditor 定制工具栏图标

在使用Ueditor时,如要简化工具栏上的按钮,可以修改配置项的方法: 1. 方法一:修改 ueditor.config.js 里面的 toolbars 2. 方法二:实例化编辑器的时候传入 toolbars 参数 我一般用第二种方法, <script src="~/Content/ueditor/ueditor.config.js"></script> <script src="~/Content/ueditor/ueditor.all.min

工具栏图标切换

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ background-repeat:no-repeat; background-size: 100% 100%; float:left; width:2rem; height:2rem; margin-

VS2008给图标工具栏-状态栏添加响应函数

1.在对话框的:OnInitDialog()函数中添加以下红色代码: BOOL CGSM_MessageDlg::OnInitDialog() { CDialog::OnInitDialog(); // 设置此对话框的图标.当应用程序主窗口不是对话框时,框架将自动 //  执行此操作 SetIcon(m_hIcon, TRUE);          // 设置大图标 SetIcon(m_hIcon, FALSE);         // 设置小图标 // TODO: 在此添加额外的初始化代码 /

eclipse安装完adt插件后只有一个小图标 还打不开怎么回事

============问题描述============ 安装完后提示重新打开 打开的载入界面还是原先的界面  工具栏图标只有一个 点那个图标显示这样 怎么回事 ============解决方案1============ ============解决方案2============ 没有指定你的SDK目录,SDK要是没安装,就装一下,装过了就指一下路径. window-preferec-下面的就如上图 ============解决方案3============ 指定个正确的sdk路径

PyQt4工具栏

工具栏 菜单对程序中的所有命令进行分组防治,而工具栏则提供了快速执行最常用命令的方法. #!/usr/bin/python # -*- coding:utf-8 -*- import sys from PyQt4 import QtGui, QtCore class MainWindow(QtGui.QMainWindow): def __init__(self, parent = None): QtGui.QMainWindow.__init__(self) self.resize(250,

Android开发笔记(一百一十九)工具栏ToolBar

Toolbar 在前面的博文<Android开发笔记(二十)顶部导航栏>中,我们学习了ActionBar的用法,可是ActionBar着实是不怎么好用,比如文字风格不能定制.图标不能定制,而且还存在低版本的兼容性问题,所以实际开发中大家还是不倾向使用ActionBar.为此,Android提供了加强版的工具栏控件即Toolbar,因为Toolbar继承自ViewGroup,而且可在布局文件中像其它布局视图一样使用,所以灵活性大大的提高了.既然Android都与时俱进了,那我们也不能落后,现在就

UEditor百度编辑器,工具栏添加一个普通按钮

添加一个名叫“hougelou”的普通按钮 附言:以下是以UEditor .Net版本举例说明. 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示. //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义 , toolbars:[ ['fullscreen', 'source', '|', 'undo', 'redo

android 设计工具栏

设计工具栏Action Bar(订制工具栏类型) 工具栏给用户提供了一种熟悉和可预测的方式来执行某种动作和操纵应用程序,但是这并不意味着它就需要和其他的应用程序看起来一样的.如果想设计工具栏以使得它能更适合产品的商标,使用android的style和theme资源可以很容易做到点. android包含一些内置的活动主题(build-in activity themes)例如 ”dark"或者"light"工具栏风格.用户也可以扩展这些主题来进一步订制用户自己工具栏的外观. 注