webstorm教程

发表于 | 分类于


1、默认修改选项

1、修改快捷键
名称(原快捷键) 删除快捷键 更改快捷键
选择单词(ctrl+W) ctrl+W(不方便) ctrl+Q
关闭标签(ctrl+F4) ctrl+Q(很少用) ctrl+W
智能修改变量(shift+F6) ctrl+Q(很少用) ctrl+Q
2、修改配置

1、快速书写css

1
设置：搜索emmet -- css -- Enable CSS Emmet + Enable fuzzy search...

2、让css一组样式默认一行显示

1
设置：搜索style -- Code style -- css -- other -- Blank lines... = 0 + 选择keep single-line blocks

3、将css背景颜色设置一下

1
设置：搜索appearance -- show css color preview as background

4、修改代码选中颜色

1
设置：搜索Editor -- Colors &Fonts -- General -- Editor -- Selection background

3、修改live 快速开发

教程：教程
设置：搜索live templates – Javascripts – 点击右边+添加快捷键 –
选择最下方define选择JavaScript – 点击Apply

1
2
3
需要设定的快捷键：
设置: Abbreviation: .log  Template text: console.log($CONTENT$);
使用: a.log  //按tab会变成console.log(a)

2、查看文件中的变动

1
菜单栏：VCS — Git — show History — 选择版本 — 左边是上一个版本，右边是最新版本

3、设定布局

显示需要展示的区块(可以理解为ps的工作区)

1
菜单栏：window — store current layout as default

4、搜索内容

1、搜索菜单栏的操作在哪个模块里

1
菜单栏：window — help — search

2、搜索快捷键

1
双击shift

5、如何快速创建文件

在代码中引入了某个未创建的文件

1
出现了一个灯泡，点击灯泡，选择创建一个文件

6、还原到上次拉远程代码的时候

使用场景：比如删除了本地的某个文件或想要丢弃本地修改的

1
控制面板 - Local Changes - 右键选择文件 - revert

7、比较2个文件的差异

使用场景：针对复制后的文件修改后和原文件进行比较

1
2
//打开其中一个文件
菜单栏：view - compare with - 选择另一个文件

8、其他快捷键

代码编辑
名称 快捷键
上下块级移动代码 ctrl+shift+上下键
向下选中代码 shit+下键
选中单词 ctrl+w或者双击
格式化代码 ctrl+shift+L
删除当前行 ctrl+Y
复制当前行 ctrl+D
将下一行代码删除到当前行的末尾 ctrl+delete
光标跳转到新的一行 shift+Enter
跳转到上下一个方法 alt+上下键
快速锁定行 ctrl+G
文件跳转
名称 快捷键
快速锁定文件 ctrl+shift+N
切换标签 alt+左右键或者ctrl+tab
关闭当前标签 ctrl+F4
新建一个文件 ctrl+insert
区域控制
名称 快捷键
最大区域显示代码区域 ctrl+shift+F12或者shift+esc
打开终端 alt+F12
关闭终端 shift+esc

9、解决代码冲突

教程