webstorm设置

2,993 阅读2分钟

入行较浅,据我了解的,很多的前端都使用的 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)

  1. Block comment 多行注释的字体颜色
  2. Doc Comment 文档注释的字体颜色(一般用不到)
  3. 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(),并且光标在括号内。

设置步骤:

  1. 点击右侧加号
  2. 对比上面所示的例子,对应位置自己输入。
  3. 点击右下方的Change,来确定该模板使用在哪里。
  4. apply,ok 即可。

$end$,是已经定义好的变量,代表光标的位置。 也可以自定义变量,在如上图示 右边的 Edit variables

如下例子配置,键入 fori,就如下图示:

4,其他待续