入行较浅,据我了解的,很多的前端都使用的 VScode,免费开源,各种自定义配置,体验很好。因为一开始接触前端时,用的就是 webstorm,之后尝试过 VScode,还是不太适应。
所以,这次想介绍一下测试和收集到的,关于 webstorm 的一些设置。
所有截图均是mac下的webstorm,与windows的差别几乎很小。
希望可以帮助到大家。
1,常用基础配置
webstorm 也是一样可以引入各种 jar 包,来实现不同的主题。
也正是因为找不到自己心仪的主题,所以只能自己慢慢进行测试,自定义。
1.1,编辑区域字体
使用这个字体 Courier New,是因为英文和中文的标点符号,非常容易区分。
1.2,编辑区域背景色
设置的是护眼色
1.3,鼠标点到某一行的行色
1.4,鼠标选中某一段代码的背景色
1.5,控制台的设置
这里设置的字体,默认跟随编辑区域的字体设置。
背景色,也是护眼色。
1.6,代码中注释的字体颜色(注意是设置Foreground)
- Block comment 多行注释的字体颜色
- Doc Comment 文档注释的字体颜色(一般用不到)
- Line comment 单行注释的字体颜色
2,辅助设置
2.1,表示颜色的css代码上,直接显示其背景色。
直接看图演示更容易理解。(鸡肋)
但其实默认在左边行号的后面,就有颜色的显示,并且点击还可以显示调色板。2.1,方法之间会有分割线。
经测试,在框架中如React中,也是适用的,偶尔会有点不准。
上面那个 show line numbers 就是显示代码左侧的行号的(默认是有的)。
2.3,忽略首字符匹配
默认是First letter。
举个例子,如果想使用 Math
对象的一些方法,在键入 Math 时,想要有提示,第一个 M 必须大写,才会为你提示Math
设置为 None 后,诸如此类的需要首字母大写才能匹配出提示的,都可以直接写小写字母就会有提示。
2.4,多行显示
(默认是勾选的)取消勾选,一行显示不下时,会多行显示。
多行效率比单行高,因为单行会隐藏超过界面部分 Tab,这样找文件不方便。
3,自定义代码模板
如下定义表示:
键入 con ,敲 tab 键,就会输出console.log()
,并且光标在括号内。
设置步骤:
- 点击右侧加号
- 对比上面所示的例子,对应位置自己输入。
- 点击右下方的Change,来确定该模板使用在哪里。
- apply,ok 即可。
$end$
,是已经定义好的变量,代表光标的位置。 也可以自定义变量,在如上图示 右边的 Edit variables。
如下例子配置,键入 fori
,就如下图示: