webStorm 开发技巧

插件合集

1. IDEA Mind Map 思维导图
2. Atom Material Icons 图标
3. Indent RainBow 彩虹空格
4. Material Theme UI 主题
5. Rainbow Brackets 括号
6. Random Background 随机背景
7. Nyan Progress Bar 彩虹进度条
8. Randomness 随机数据
9. Quick File Preview 快速文件预览
10. Codota AI 完成代码
11. Key Promoter X 快捷键提醒(可以用于快捷键学习)

https://www.jetbrains.com/webstorm/guide/technologies

ctrl+Alt + ->/ <-

记录鼠标的停留位置 箭头左是从前, 箭头右是现在

比如你在上面写的htm,在下面写css/js的时候突然忘记类名,可以ctrl+alt+ 箭头左 直接看看前面写的,然后 ctrl+alt+箭头右回来

ctrl+shift +Delete

上次编辑的位置

ctrl+K

提交到缓存区

F6

代码重构

...
function loader() {
    return 1
}
...

鼠标放在函数名上按下F6

可以把这个函数移到新的路径里

.if

let a=1;
a.if  快捷方式类似于 .log

粘贴历史记录

let a=1;
let b=2;
let c=3;

ctrl+c 把a,b,c 三个进行复制

ctrl+shift+v 可以进行历史粘贴

自定义变量配色

代码智能提示排序

按照机器学习对完成的建议进行排序

Ctrl + alt + O清除所有未使用的导入

最近打开的文件Ctrl+E 快捷键

分支对比

点击单个文件右键, 选中对比的分支进行对比

分支合并

快速创建新文件/文件夹

Alt+1 打开左边导航 Alt+Ins

alt+enter 可以进行数学运算

Alt + enter 字符串注入(环境语法参考)

ctrl+Tab

切换上次打开的文件

Indent Rainbow

空格颜色插件(缩进彩虹)

简洁的箭头功能(删除多余括号)

放在变量num上alt+enter

IDEA Mind Map

.mmd 格式, 类似于脑图

idea 本地历史记录

文件或者文件夹右键

可以把需要导入在html的js,直接拖拽就可以导入

# 正则测试

alt+enter

ctrl+shift+alt+T

选中需要的，不选中也行，按下ctrl+shift+alt+T, 搜索Type

快速添加文件

输入lorem并按下Tab 键

给p标签随机添加内容
p>lorem    

快捷代码

fori
forin
forof

Randomness

随机数据

Alt+R 选中随机的数据类型

shift 回车 就是数组

Nyan Progress Bar 彩虹进度条

alt+方向左/右 选项卡切换

常规字符串拼接变成模板字符串

Alt+Enter

Codota AI 完成代码

Codota使用最先进的机器学习模型来提高生产力并为开发人员节省时间

Quick File Preview 快速文件预览

单击就可以实现

双击就跟我们原来操作一样

Alt+7 查看结构视图

如果你想直接运行控制台指令

例如 你想运行npm yarn之类的工具
ctrl+ctrl `yarn start` 就可以直接启动这个项目

完整语句

ctrl+shift+enter

Alt+Enter 可选对象的简化

ctrl+shift+U 选中大小写切换

方法显示分割线

效果

关闭策略

就是超过7个标签出促发关闭策略

我觉得一般5个标签就可以啦, 可以限制五个,多于5个会把第一个给关闭掉

Ctrl+shift+F12 快速隐藏/恢复所有活动工具窗口

shift+Esc 关闭任何窗口

代码展开/代码折叠

ctrl+ / ctrl -