Webstorm 舒适高效配置,打造提高生产率环境

导读:本篇文章讲解 Webstorm 舒适高效配置,打造提高生产率环境,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

目录

主题护眼配置

webStrom 好用插件

图标插件

Git提交记录

彩色括号

高亮括号

右侧代码小地图

正则插件

超级快捷键

WebStorm 联想卡顿或过慢方案

原因分析

一 、 解决方案如下:

二 、提高webstorm内存占用上限

清除无用的缓存

问题:

自定义颜色


主题护眼配置

首页是主题色跟代码区域设置为护眼

颜色的值: C7EDCC

Setting->Editor->Color Scheme -> General -> Text -> Default text

Webstorm 舒适高效配置,打造提高生产率环境

将整个界面颜色替换:
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,点击对应的颜色框选择颜色,保存选择即可自定义高亮颜色。

超级快捷键

  1. command/ctrl + option/alt + O:import 优化,移除没用到的 import
  2. command/ctrl + option/alt + L:重新格式化代码
  3. command/ctrl + option/alt + Z:Git 回滚当前区域的代码
  4. command/ctrl + J:查看预定义代码模板
  5. command/ctrl + shift + up/down:智能移动代码块,如果移动函数,可以将这个函数整体移动到上一个函数上
  6. control/ctrl + shift + J:合并两行
  7. command/ctrl + G:选择下一个相同匹配项
  8. command/ctrl + D:复制当前行
  9. F2:导航到编辑器报错或者报警告的地方
  10. 代码跳转:Ctrl + 左键 或者Ctrl + B,可以跳转到函数或者变量的声明位置;Ctrl+Alt+B跳转方法实现处,Ctrl+Shift+B跳转方法定义处
  11. 打开定义快速查找:Ctrl+Shift+I
  12. 调用位置:Alt + F7,查找调用者
  13. 搜索文件:Ctrl + Shift + N
  14. 搜索类:Ctrl + N
  15. 查找当前文件的函数或变量:Ctrl + F12
  16. search anywhere: 双击shift
  17. 复制整行: Ctrl + D
  18. 删除整行: Ctrl + Y
  19. 折叠当前块: Ctrl + ‘-‘, 折叠当前块以及子块:Ctrl + Alt + ‘-‘, 折叠全部块:Ctrl + Shift + ‘-‘
  20. 展开当前块: Ctrl + ‘+’, 展开当前块以及子块:Ctrl + Alt + ‘+’, 展开全部块:Ctrl + Shift + ‘+’
  21. 选择: Ctrl + W, 选中范围会从小到大逐渐扩大。比如,按一次选中word,按两次,选择表达式,三次,整个函数
  22. Ctrl+Shift+W,上一个操作的回退
  23. 功能查找:通过 Ctrl + Shift + A,可以快速的通过关键字检索到相应的功能设置和快捷键。
  24. 格式化代码:Ctrl + Shift + L,可以设置为 commit 前自动格式化
  25. 定位到指定代码行: Ctrl + G
  26. 光标定位到代码块的前/后面:Ctrl + ‘[‘ / Ctrl + ‘]’
  27. 光标定位到行首/尾:Home/End
  28. 光标定位到下一行: Shift + 回车
  29. 光标所在位置大小写转换:Ctrl+Shift+U
  30. 选中下一个相同的词:Alt + j
  31. 上/下一个标签页: Alt + 方向(左/右)
  32. 关闭当前标签页: Ctrl + F4
  33. 当前文件内容替换: Ctrl + R
  34. 全局内容替换: Ctrl + Shift + R
  35. 输出模板: Ctrl + J
  36. 切换目录侧边栏: Alt + 1
  37. 切换收藏侧边栏: Alt + 2
  38. 显示/隐藏所有打开的侧边栏: Ctrl + Shift + F12
  39. 显示最近修改过的文件: Ctrl + E
  40. 显示当前css选择器或者js函数的详细信息: Ctrl + Shift + I
  41. 收藏此文件:Alt + Shift + F
  42. 补全当前语句:Ctrl+Shift+Enter
  43. 显示光标所在位置的错误信息或者警告信息:Ctrl+F1
  44. 行注释/取消行注释:Ctrl+/
  45. 块注释/取消块注释:Ctrl+Shift+/
  46. 对所选行进行缩进处理/撤销缩进处理Tab/Shift+Tab
  47. 选择直到代码块结束/开始:Ctrl+Shift+]/[
  48. 从开始/结尾删除某一个变量或表达式:Ctrl+Delete Ctrl+Backspace
  49. 查找当前文件内代码:Ctrl+F
  50. 指定文件内寻找路径:Ctrl+Shift+F
  51. 在方法间快速移动定位:Alt+Up/Down
  52. 跳转到后一个/前一个错误,高亮错误或警告快速定位,使用这个快捷键可以在出错语句之间进行跳转:F2/Shift+F2
  53. 改名:Shift + F6,修改函数名、变量名、文件名,同时可勾选修改所有引用的位置
  54. 移动文件:F6,可选修改文件的引用位置,包括html和js文件
  55. 抽取函数: Ctrl + Alt + M,整块代码抽取成函数
  56. 抽取变量: Ctrl + Alt + V,当前选中抽取为变量
  57. 移动整块代码: Ctrl + Shift + ↑↓
  58. 包裹: Ctrl + Alt + T,外层包裹,比如 if、try catch等
  59. F8: 下一步(不进入函数)
  60. F7:单步执行
  61. Shift + F7: 进入函数内
  62. Shift + F8:跳出
  63. Alt + F9: 运行到光标处
  64. 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 联想卡顿或过慢方案

原因分析

  1. webstorm卡顿一般是ws在执行耗时任务,导致cpu内存占用过高;
  2. 一般包括,建立索引中,开了多个项目;
  3. 可通过任务管理器确认,window 快捷键: Ctrl+Shift+Esc 。

一 、 解决方案如下:

一、 排除不需要建立索引的目录

  1. 排除单个项目的指定目录

Webstorm 舒适高效配置,打造提高生产率环境

image.png

  1. 排除特定的目录

Webstorm 舒适高效配置,打造提高生产率环境

二 、提高webstorm内存占用上限

  1. 使用 ctrl+shift+a 调出actions 命令;
    输入: memory settings 唤起面板。

Webstorm 舒适高效配置,打造提高生产率环境

Webstorm 舒适高效配置,打造提高生产率环境

清除无用的缓存

Webstorm 舒适高效配置,打造提高生产率环境

间括号双击选中 语法不高亮的问题:

选中词汇高亮颜色不明显

HighlightBracketPair:颜色调整一下

我这里是把Background的去掉,双击选中之后显示原来配置的㳀墨色。

Webstorm 舒适高效配置,打造提高生产率环境

 Webstorm 舒适高效配置,打造提高生产率环境

自定义颜色

​​​​” <div></div>” 

也就是将一对标签开始和结束认为成一个尖括号,而默认的括号将背景色和文字颜色都修改了,颜色比较深,看着像一个色块,只需要去修改这两个值即可,现在用起来舒服的很

超高人气免费vue教程:

001_尚硅谷Vue技术_课程简介_哔哩哔哩_bilibili001_尚硅谷Vue技术_课程简介是尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通的第1集视频,该合集共计168集,视频收藏或关注UP主,及时了解更多相关视频内容。Webstorm 舒适高效配置,打造提高生产率环境https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1&vd_source=4d7269ee25fa22b216be7d972d461ecd

其他:

coderwhy的node和webpack是全网无敌的,尤其是node,基本是最新的教程,新旧语法都讲了,源码分析和案例都有,尚硅谷两大框架视频很牛,但其他视频有点偏老

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/101517.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!