webstrom有一些基本的操作
1、快速查找
2、代码补全
3、版本控制
4、本地历史
5、即时模板
6、光标
7、代码格式化等

基本操作

双击shift搜索:快速查找。文件,函数名等。

template模板可以设置。

光标定位到相关位置。比如tilte,body
每次修改的历史:local history。

多光标的功能。
1、查找替换,ctrl+R
2、alt+鼠标选择。

3、alt+单击。

4、格式化代码:ctrl+alt+L

菜单,code——reformat code。

5、快捷键可以自定义设置。 可以通过快捷键名称来查找。也可以通过怎么使用来查找快捷键,然后对其进行修改。
webstrom预设了许多快捷键,可以自己选择。与原来的IDE快捷键相同。

Emmet

详情参见:
Emmet:HTML/CSS代码快速编写神器

1、Tab键,缩写的补全
2、li中间写完,按enter键,光标直接定位到接下来的一个。
3、嵌套结构:
> + ^ ()
子元素,同级,往上一级,重复,()
4、属性
# (id). (类)[]自定义属性
div#container.container
$
ul>li.item-$
5
{}文本
p{click me}
lorem没有意义的文字。用于排版。
用法:lorem100
注意事项:光标定位在最后(最想展开的)。
不能有空格。
比如:
css中,bt:border-top
m10:margin:10px;
m10-20:margin:10px 20px;
bdrs10:border-radius:10px;
df:display:flex;

设置前缀。
默认关闭这个开关。可以用其他工具来实现。、
html:5,sublime text等编辑器可以安装emmet插件。

进阶操作一——常见快捷键

操作,快捷键。

光标放在相对应的标签上,按F1,可以显示相关的描述,关联的站点等。
js也是如此,参数列表等。
比如

hello world


要包裹在一个div中,选择这代码,ctrl+alt+T,选择第一个,输入div就变包裹在div中。

——7
1、注释与取消注释
ctrl+/
2、选择
选中子元素,alt+上/下
3、粘贴
ctrl+shift+V,最近粘贴板中的内容。
4、删除当前行,
ctrl+退格键。
5、当前行上、下面加入一行
上面加入一行。ctrl+alt+enter
下面加入一行。ctrl+shift+enter.
这样不需要刻意定位光标的位置。其实键盘上有(home,end)键。
6、折叠代码,ctrl++(展开),ctrl+-(折叠)
ctrl+shift++,ctrl+shift+-,所有可以折叠的地方全部折叠。在css中,js,html中都是如此。
7、相邻位置代码换位置。
alt+shift+上、下键。选中一段代码也可以让其上下移动。
8、闭合标签,定位在两个标签位置。ctrl+m键。引号,括号,{}等也适用。window下好像无效。
9、前进、后退到上一次编辑的地方。ctrl+alt+左右键。
10、转到上一次编辑的地方。ctrl+shift+backspace键。
11、最近使用的文件,ctrl+E
——8
1、img标签,知道图片宽和高。方式1、输入路径,宽和高,按住Tab键可以自动补全。
方式2、放在图片上,按F1图片预览,固定预览框。或者悬浮在文字上方。
方式3、按住shift,鼠标浮在路径上,就可以看到图片的预览了。
2、color:#999;色块上点击即可选择修改颜色。亮度(竖向)和透明度(横向)可以调节。

进阶操作二——重命名

1、重命名,

hello world

,把光标放在标签上,
ctrl+T,第一个就是重命名。window下试用无效。shift+F6重命名。2、其实直接写即可呀。
对话框会显示有相同的地方,右击,排查或包含include,exclude.点击执行,do refactor。侧边有一些功能。
2、函数名称,参数重命名。
html,css,js中都可以重命名,类名,颜色,可以预览,避免把一些框架库里的相同东西修改了。、
文件或文件夹也可以重命名。所有引用的地方也被修改了。

进阶操作三——代码检查

webstrom使用了静态代码分析。
不仅检查编译错误,
而且代码效率低下,未使用的代码,非本地化的字符串,无法解析的代码,内存泄露,甚至编写问题等等。
提示分为:错误,警告和正确。红色,橙黄色,或者绿色。
一般来说是对整个项目进行检查的。也可以自己配置检查的范围。
也可以自己运行检查。–>code->Inspect code

webstrom检查出来的不代表真的有错,还需要人工自己检查。
一般在文件中,F2键可以在各个错误中切换。
alt+enter,可以看到提示。(右侧的提示)
规则自己设置,搜索inspec

js是静态的校验。

本文地址: https://lxchuan12.github.io/2016/12/07/20161207-webstrom-skill/