WebStorm开发插件

目录

目录

1.图标插件 Atom Material Icons

 2.Translation

3.彩色括号 Rainbow Brackets

4.高亮括号 HighlightBracketPair

 5.代码缩略图 CodeGlance2

6.正则插件 any-rule

7.换主题插件 Material Theme UI Lite

 8.彩色进度条 Nyan Progress Bar

9.Key promoter

10.idea px 2 rem

11.webstorm设置vscode配置方法

1.设置外观 one dark theme

 2.Napalmpapalam Dark Theme

---

1.图标插件 Atom Material Icons

Enable File Icons 文件图标
Enable Directory Icons 目录图标
Enable UI Icons 顶部UI 图标

 

 2.Translation

        对于英语不是很好的开发者，在取变量名或者文件名字的时候会犯难。那么就可以给编辑器装一个这个翻译插件。使用也很方便，可以直接选中中文右键翻译，也可以直接选中用快捷键Ctrl+shift+Y。

3.彩色括号 Rainbow Brackets

可以实现配对括号相同颜色。

4.高亮括号 HighlightBracketPair

会在左侧代码行数那显示括号范围，比彩虹括号插件更加直观而且不容易看花眼。

 5.代码缩略图 CodeGlance2

6.正则插件 any-rule

安装好后使用方法：
法一：右键->AnyRule
法二：Alt+a
会打开下图弹窗就可选择对应或搜索正则即可 

7.换主题插件 Material Theme UI Lite

 Material Theme UI 主题 Atom One Dark 更推荐这个
a. 找到下面的 Tabs ——> Tab Height ，设置为 26，这个高度是我平时开发觉得的最舒服的高度。
b. 找到下面的 Compact ，勾选 Compact Statusbar 和 Compact Menus ，这个紧凑度最舒服
c. 找到下面的 Components ，勾选 Accent Scrollbars 、 Transparent Scrollbars 和 Tabs Shadow，这个设置最舒适。

.ignore
直接在文件列表中右键，可以快速根据模板生成一系列的 .ignore 文件，比如 .dockerignore、.gitignore 等等。

GitToolBox
其实就是给 ide 扩展了一下 git 相关的功能，比如会自动帮你 fetch 最新的代码（我之前都是两下 shift，然后输入 fetch 查找到对应的命令然后回车，麻烦），单行代码后面显示提交信息等等。
在代码中 会有对应log显示

 8.彩色进度条 Nyan Progress Bar

9.Key promoter

推荐理由：只要是鼠标操作能够用快捷键替代的，Key Promoter 会弹出提示框，告知你用什么快捷键替代。

10.idea px 2 rem

为了保证网页的响应式设计，我们在H5开发中用的单位一般都是rem

        在代码中选中xx px，MAC电脑按快捷键option + d，Windows 为alt + d，则可以实现自动将xx px转换为xx rem

11.webstorm设置vscode配置方法

1.设置外观 one dark theme

      webstorm的对比度低，字体偏细，抗锯齿还不好，习惯vscode的我设置了专属的配置方法，习惯了好多。

在webstorm的插件中下载one dark theme，设置外观为one dark vivid

 2.Napalmpapalam Dark Theme

下载主题Napalmpapalam Dark Theme，并设置编辑器配色方案为Napalmpapalam

 

 

设置编辑器字体15，行高1.3，然后就得到一个对比度适中，代码清晰的组合型配色方案（如果代码配色不习惯，可以自己自定义配置）

 

参考链接：https://blog.csdn.net/qq_45222331/article/details/126185606