webstorm设置

入行较浅，据我了解的，很多的前端都使用的 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，就如下图示：

4，其他待续

转载于:https://juejin.im/post/5bd912d86fb9a05d0530f491

webstorm设置相关推荐

IDEA、webstorm设置编辑器恶心的竖线位置、隐藏竖线（参考线），然后代码自动换行
webstorm设置编辑器竖线位置: 文件→设置(Ctrl+Alt+S)→编辑器→Code Style→右边距→设置260(勾选☑键入换行) 如果要隐藏这条竖线Ctrl+Shift+A输入Show r ...
Webstorm设置开发模板
WebStorm设置开发模板可能大家会有一些疑问,什么是模板?为什么要设置模板的呢?模板就是一种通用的格式,如果在webstorm中设置了模板,那么每次创建一个javaScript文件的时候都会自动 ...
webstorm设置Ctrl+滚轮缩放字体大小
webstorm设置Ctrl+滚轮缩放字体大小 1.打开webstorm软件,点击左上角的file 2.点击Setting(设置) 3.点击Editor 4.点击General 5.勾选右侧的Chan ...
WebStorm设置编辑器背景图片
Webstorm 设置背景图片 1.下载最新版的webstorm 2.找一张或多张自己喜欢的图片那么接下来就开始设置背景图片 1.打开webstorm 如下图. 2.打开设置 3.在设置里面找到 ...
webstorm html代码提示设置,Webstorm设置代码提示
下载路径: https://github.com/virtoolswebplayer/ReactNative-LiveTemplate 本插件可以配合Webstorm设置代码提示. Mac下安装 We ...
02-学习笔记（webstorm设置代码自动缩进量）【新手上路，多多关照】
内容介绍: **WebStorm设置代码自动缩进为两个空格(默认为四个空格):** 具体步骤: 点击File-settings 选择Editor-Code Style-Style Sheets 找到里 ...
webstorm设置文件类型
这里说一下webstorm如何配置文件类型,相信很多开发者都会有遇到过这个问题,新出来的,或者是以前的某些类型的文件,没有样式,看着特别奇怪. 这个就是没有使用对应的文件类型,并且配置. 例子一: M ...
webstorm 设置tslint_webstorm（2019）配置eslint规范
在项目中我们为了代码书写更规范,在项目中安装ESlint帮助我们检查语法,那么下面介绍下在webstorm中如何配置ESlint规范步骤如下: 1.快捷键:ctrl+alt+s打开设置,找到Code ...
WebStorm设置自动刷新
文章目录 1. 修改WS设置 2. 开启Debug 1. 修改WS设置打开Settings⚙️ WebStorm版本:2019.3.2 在Live Edit中修改一些配置 2. 开启Debug 开启 ...