目录
主题护眼配置
首页是主题色跟代码区域设置为护眼
颜色的值: C7EDCC
Setting->Editor->Color Scheme -> General -> Text -> Default text
将整个界面颜色替换:
File->settins ->Apperacnce &Behavior ->Apperance : UI Options : Background Image按钮 点击打开设界面背景图:
选个纯色的 轻绿色(C7EDCC)的背景导入(可以从刚才设置的代码区域截取一个纯色图片导入),设置透明度:Opacity然后:OK即可切换到养眼的界面。
光标问题
如果发现console区域光标看不到,把透明度调到70,差不多了。
字体 JetBrains Mono
推荐原因:程序员专用字体。
注意:新版 WebStorm自带这款字体。
webStrom 好用插件-大大提高生产效率插件
图标插件
个人觉得系统默认的图标不是很好看,所以去插件市场找了一个图标插件。
插件的名字: Atom Material Icons
Git提交记录
插件的名字: GitToolBox
维护项目时,发现bug,我们想快速知道这行代码是谁提交的,大部分开发者可能要去通过git log来查找。
当我们鼠标选择某一行代码时,就能显示出这行代码的提交人和提交时间。
彩色括号
插件的名字: Rainbow Brackets
可以实现配对括号相同颜色。
每种括号可以设置5种颜色, 当层数超过5时, 再从1号颜色开始循环……
(建议:设置括号颜色尽量避开红色, 因为红色括号容易和红色的错误信息混淆,不便于错误信息的定位)
File >> Settings >> Editor >> Color Schema >> Rainbow Brackets
高亮括号
插件的名字: HighlightBracketPair
会在左侧代码行数那显示括号范围,比彩虹括号插件更加直观而且不容易看花眼。
右侧代码小地图
插件的名字: CodeGlance Pro
用过 sublime 的同学会知道右侧有一个当前文件中代码的缩略图,这个插件可以让 webstorm 也具有此功能。
正则插件
插件的名字: any-rule
一个比较全面的正则插件。
activate-power-mode
狂拽炫酷吊炸天装逼的插件,atom 上的神器啊,抱着试一试的心态一搜,webstorm 上居然也有了,安装之后可以在 window -> activate-power-mode 中关闭震动以及开启彩色模式。
Tabnine AI Code Completion
Tabnine基于数百万个开源Java程序和您的上下文来完成代码行,从而帮助您以更少的错误更快地进行编码。不用担心你的代码会被公开。Tabnine不会将你的代码发送到Tabnine服务器,它只会从当前编辑的文件中发送最少的上下文信息,从而使Tabnine能够根据你当前的本地范围进行预测。
ESLint
代码检查插件
BrowseWordAtCaret高亮选中所有相同词汇
该插件可以自定高亮颜色。
- 打开webtorm –> settins –> Plugins,在右侧搜索框搜索BrowseWordAtCaret,然后点击install.安装完成之后需要重启webstorm.
- 依次打开 settings –> Editor –> Color Scheme –> BrowseWordAtCaret,在右侧界面选中BrowseWordAtCaret,勾选右边栏上的Background,点击对应的颜色框选择颜色,保存选择即可自定义高亮颜色。
超级快捷键
command/ctrl + option/alt + O
:import 优化,移除没用到的 importcommand/ctrl + option/alt + L
:重新格式化代码command/ctrl + option/alt + Z
:Git 回滚当前区域的代码command/ctrl + J
:查看预定义代码模板command/ctrl + shift + up/down
:智能移动代码块,如果移动函数,可以将这个函数整体移动到上一个函数上control/ctrl + shift + J
:合并两行command/ctrl + G
:选择下一个相同匹配项command/ctrl + D
:复制当前行F2
:导航到编辑器报错或者报警告的地方- 代码跳转:Ctrl + 左键 或者Ctrl + B,可以跳转到函数或者变量的声明位置;Ctrl+Alt+B跳转方法实现处,Ctrl+Shift+B跳转方法定义处
- 打开定义快速查找:Ctrl+Shift+I
- 调用位置:Alt + F7,查找调用者
- 搜索文件:Ctrl + Shift + N
- 搜索类:Ctrl + N
- 查找当前文件的函数或变量:Ctrl + F12
- search anywhere: 双击shift
- 复制整行: Ctrl + D
- 删除整行: Ctrl + Y
- 折叠当前块: Ctrl + ‘-‘, 折叠当前块以及子块:Ctrl + Alt + ‘-‘, 折叠全部块:Ctrl + Shift + ‘-‘
- 展开当前块: Ctrl + ‘+’, 展开当前块以及子块:Ctrl + Alt + ‘+’, 展开全部块:Ctrl + Shift + ‘+’
- 选择: Ctrl + W, 选中范围会从小到大逐渐扩大。比如,按一次选中word,按两次,选择表达式,三次,整个函数
- Ctrl+Shift+W,上一个操作的回退
- 功能查找:通过 Ctrl + Shift + A,可以快速的通过关键字检索到相应的功能设置和快捷键。
- 格式化代码:Ctrl + Shift + L,可以设置为 commit 前自动格式化
- 定位到指定代码行: Ctrl + G
- 光标定位到代码块的前/后面:Ctrl + ‘[‘ / Ctrl + ‘]’
- 光标定位到行首/尾:Home/End
- 光标定位到下一行: Shift + 回车
- 光标所在位置大小写转换:Ctrl+Shift+U
- 选中下一个相同的词:Alt + j
- 上/下一个标签页: Alt + 方向(左/右)
- 关闭当前标签页: Ctrl + F4
- 当前文件内容替换: Ctrl + R
- 全局内容替换: Ctrl + Shift + R
- 输出模板: Ctrl + J
- 切换目录侧边栏: Alt + 1
- 切换收藏侧边栏: Alt + 2
- 显示/隐藏所有打开的侧边栏: Ctrl + Shift + F12
- 显示最近修改过的文件: Ctrl + E
- 显示当前css选择器或者js函数的详细信息: Ctrl + Shift + I
- 收藏此文件:Alt + Shift + F
- 补全当前语句:Ctrl+Shift+Enter
- 显示光标所在位置的错误信息或者警告信息:Ctrl+F1
- 行注释/取消行注释:Ctrl+/
- 块注释/取消块注释:Ctrl+Shift+/
- 对所选行进行缩进处理/撤销缩进处理Tab/Shift+Tab
- 选择直到代码块结束/开始:Ctrl+Shift+]/[
- 从开始/结尾删除某一个变量或表达式:Ctrl+Delete Ctrl+Backspace
- 查找当前文件内代码:Ctrl+F
- 指定文件内寻找路径:Ctrl+Shift+F
- 在方法间快速移动定位:Alt+Up/Down
- 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以在出错语句之间进行跳转:F2/Shift+F2
- 改名:Shift + F6,修改函数名、变量名、文件名,同时可勾选修改所有引用的位置
- 移动文件:F6,可选修改文件的引用位置,包括html和js文件
- 抽取函数: Ctrl + Alt + M,整块代码抽取成函数
- 抽取变量: Ctrl + Alt + V,当前选中抽取为变量
- 移动整块代码: Ctrl + Shift + ↑↓
- 包裹: Ctrl + Alt + T,外层包裹,比如 if、try catch等
- F8: 下一步(不进入函数)
- F7:单步执行
- Shift + F7: 进入函数内
- Shift + F8:跳出
- Alt + F9: 运行到光标处
- Option/Alt + Enter:默认情况下,Webstorm 不提供 Node Assistance,这时输入
require
引入对应包时不会获得提示,并标黄require
和其引入的包。 在标黄区域按下 option / alt + enter 键,选择Enable Node assistance for Node.js
即可获得 Node.js 语法解析和提示支持
代码编辑
Webstorm快捷键 | Eclipse快捷键 | 说明 |
ctrl+D | ctrl+shift+↑ | 复制当前行 |
ctrl+W | alt+shift+↑ | 选中单词 |
ctrl+←/→ | ctrl+←/→ | 以单词作为边界跳光标位置 |
alt+insert | alt+insert | 新建一个文件或其他 |
ctrl+alt+L | ctrl+alt+L | 格式化代码 |
shift+tab/tab | shift+tab/tab | 减少/扩大缩进(可以在代码中减少行缩进) |
ctrl+Y | ctrl+D | 删除一行 |
shift+enter | shift+enter | 重新开始一行(无论光标在哪个位置) |
Ctrl+Alt+ left/right | 返回上次光标的位置返回至上次浏览的位置 |
在这里我根据习惯改了:
ctrl+←/→ |
返回上次光标的位置返回至上次浏览的位置 |
|
Ctrl+Alt+ left/right | 以单词作为边界跳光标位置 |
查看官方的所有快捷键可以点击 帮助->键盘快捷键 PDF
,或者双击 shift
输入「键盘快捷键」就可以看到官方快捷键参考 PDF,内容非常全,多看看经常可以发现惊喜。
WebStorm 联想卡顿或过慢方案
原因分析
webstorm
卡顿一般是ws
在执行耗时任务,导致cpu
内存占用过高;- 一般包括,建立索引中,开了多个项目;
- 可通过任务管理器确认,
window
快捷键:Ctrl+Shift+Esc
。
一 、 解决方案如下:
一、 排除不需要建立索引的目录
- 排除单个项目的指定目录
image.png
- 排除特定的目录
二 、提高webstorm内存占用上限
- 使用
ctrl+shift+a
调出actions
命令;
输入:memory settings
唤起面板。
清除无用的缓存
间括号双击选中 语法不高亮的问题:
选中词汇高亮颜色不明显
HighlightBracketPair:颜色调整一下
我这里是把Background的去掉,双击选中之后显示原来配置的㳀墨色。
自定义颜色
” <div></div>”
也就是将一对标签开始和结束认为成一个尖括号,而默认的括号将背景色和文字颜色都修改了,颜色比较深,看着像一个色块,只需要去修改这两个值即可,现在用起来舒服的很
超高人气免费vue教程:
其他:
coderwhy的node和webpack是全网无敌的,尤其是node,基本是最新的教程,新旧语法都讲了,源码分析和案例都有,尚硅谷两大框架视频很牛,但其他视频有点偏老
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/101517.html