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/technologiescss

ctrl+Alt + ->/ <-

记录鼠标的停留位置 箭头左是从前, 箭头右是如今html

好比你在上面写的htm,在下面写css/js的时候忽然忘记类名,能够ctrl+alt+ 箭头左 直接看看前面写的,而后 ctrl+alt+箭头右回来web

ctrl+shift +Delete

上次编辑的位置npm

ctrl+K

提交到缓存区数组

F6

代码重构缓存

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

鼠标放在函数名上按下F6dom

能够把这个函数移到新的路径里机器学习

.if

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

粘贴历史记录

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

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

ctrl+shift+v 能够进行历史粘贴ide

自定义变量配色

代码智能提示排序

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

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 -