jetbrains 官方推出10个优秀的WebStorm 主题

大家好,我是Echa。

最近有粉丝问私信我WebStorm 和Vs code 简单的比较,哪个更好用?首先说作为一位前端开发人员,想必这两款工具大家应该都很熟悉吧,它们都是一款代码编辑器,但是各自又都有着各自的优缺点,以前小编是一直使用WebStorm,而在最近才换Vs code的。小编就简单的概述一下他们的优缺点,也是小编个人使用的想法,讲得不到位的地方勿喷,谢谢!

  1. 是否收费维度分析:WebStorm 是收费的,Vs code 免费。
  2. 插件生态维度分析:WebStorm 插件数官方统计一千多点,而Vs code官方尚未明确公告,但一定比WebStorm多
  3. 从使用纬度分析:WebStorm 有自动修复的功能,毕竟是收费产品,很值。但Vs code无自动修复功能,只能借助插件来修复
  4. 从代码版本管理角度分析:Vs code 的Git 不太好用,即使有GitLens 插件辅助而比不上WebSotrm
  5. 从性能上维度分析:WebSorm 是非常吃内存,小编32g内存占用接近40%,尤其是刚刚启动,特别吃CPU、内存、IO,而Vs code相对轻便。

其实说了这么多,无论哪种编辑器,适合自己项目的就是最好的编辑器。好了,回归正传。

今天小编在逛jetbrains 官方,无意中在WebStorm Blog 文章看见了推出10个优秀的WebStorm 主题,试了试非常不错,所以分享给大家,希望大家有所帮助。

创作不易,喜欢的老铁们加个关注,点个赞,后面会持续更新干货,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。

  1. Darcula
  2. IntelliJ Light
  3. Dark Purple Theme
  4. One Dark Theme
  5. Visual Studio Code Dark Plus Theme
  6. Monokai Pro Theme
  7. Vuesion Theme
  8. Gradianto Theme
  9. Hiberbee Theme
  10. Cyan Light Theme

在 WebStorm 中自带了Darcula ,因此无需安装任何额外的主题插件。这是第一次安装WebStorm时的默认主题。

Darcula 中的深色发出的光较少。这更利于长时间观看,并有助于防止眼睛疲劳。

该主题适用于:弱光环境和敏感的眼睛。

如下图:

IntelliJ Light 是 WebStorm 预装的另一个主题。它与深色主题截然相反,提供更明亮的 IDE 界面。如果在非常明亮的条件下工作或与仅提供浅色模式的其他应用一起工作,使用浅色主题会很有帮助。

这是很多人喜欢的简单、经典的外观。

该主题适用于:明亮的环境和带有许多其他浅色主题应用的桌面。

如下图:

Dark Purple 是 WebStorm 中另一个深色主题。它为 Darcula 提供了一个更暗的对比界面,并用各种红色和紫色代替了蓝色和橙色。

与 Darcula 相比,更强的对比度尤其受到有视觉障碍的用户的喜爱。这个主题是许多 WebStorm 团队成员的最爱。

该主题适用于:弱光环境和正在寻找更高对比度颜色的用户。

如下图:

One Dark Theme 是另一个专为编码而设计的深色主题。它不如其他一些深色主题明亮,这可以使眼睛更舒适。

对于一些人来说,深调和对比度较低的亮色更容易长时间观看。

该主题适用于:弱光条件以及缓解眼睛疲劳。

如下图:

Visual Studio Code Dark Plus Theme 基于 Visual Studio Code 的默认外观。如果习惯了 Visual Studio Code 的外观并想在 WebStorm 中使用它,这个主题提供了类似的效果。

这个主题接近于 VS Code 的深色主题。更深的黑暗意味着 UI 文本和编辑器窗口之间有进一步的对比。配色方案包含比默认 Darcula 主题中的柔和颜色更深的颜色。

该主题适用于弱光条件以及习惯于使用 VS Code 的用户。

如下图:

Monokai Pro Theme 是对 Sublime Text 编辑器方案的改进。它基于 Monokai Pro,旨在帮助用户集中注意力。它使用专门选择的颜色阴影来提供不会分散注意力的用户界面。该主题包含六种不同的暗黑方案变体。

Monokai Pro 主题经过了深思熟虑,使用合理的颜色编码文本元素,使浏览代码变得容易。由于主题包中有不同的变体,因此很容易找到喜欢的那个。

该主题适用于:弱光条件以及需要审查大量代码的场景。

如下图:

Vuesion Theme 的配色方案基于 Vuesion 项目。它将工程和设计方面的现代最佳实践引入 IDE,它会给IDE 一种组织良好、干净的感觉。

编辑器中的高亮对比很好,整个感觉干净、明快和绿色。

该主题适用于:低光照条件和长期在 IDE 中工作的场景。

如下图:

有时候,给 IDE 添点色彩,可以提振心情。Gradianto Theme 包含自然界中发现的一系列渐变,旨在让眼睛轻松,同时色彩鲜艳。

Gradianto 简单又赏心悦目。它不像其他一些黑暗主题那样刺眼,因为它使用彩色调而不是黑色调,因此既不会太亮也会不太暗。

该主题适用于:所有光照条件和敏感的眼睛。

如下图:

Hiberbee Theme 充分利用了 Monokai 和 macOS 的优点,并将它们组合成一个超清晰、对比鲜明的深色主题。

通常,深色主题使用非常明亮的霓虹色来确保文本之间有良好的对比。Hiberbee Theme 使用明亮的颜色,对比鲜明,但没有霓虹灯般的色调。配色方案也很直观,某些标签、类或部分代码以互补色突出显示。

该主题适用于:弱光条件和寻找高对比度非霓虹色的用户。

如下图:

对于喜欢浅色主题但不喜欢所有相关亮白色调的人来说,青色主题是一个完美的折中方案。它偏爱浅灰色而不是白色,营造非常舒适的工作环境。

与大多数浅色主题不同,Cyan Light 使用灰白色和青调来形成对比。排版简洁而内敛,关键字、标识符、字段和变量以深色呈现,以巧妙但明显地区分它们。

该主题适用于:强光条件和敏感的眼睛。

如下图:

选择一个最适合你的主题并不是比较收视率或寻找下载量最多的主题。这是关于了解您的需求以及如何在IDE中花费时间的问题。JetBrains Marketplace官方上有超过250个主题,可能有一个主题比我们在本文中推荐的主题更适合您的需求。这里有一些事情需要考虑。

您的环境

你正在编写代码的环境(这里我们不是指开发环境)会影响你在哪种环境(这次是开发环境)中工作最舒服。例如,如果你喜欢在电脑屏幕的灯光下工作到深夜,那么使用深色主题可以大大减少眼睛疲劳。

眼睛敏感度

有些人觉得有些颜色很难看,有些人无法区分某些颜间的差异。我们都不一样。了解什么样的配色方案可以让你舒适地在前面花上很长时间,这可能需要一些尝试和错误来锁定,但一旦你了解了自己喜欢什么,你就可以寻找具有这些特征的配色方案。

你的工作方式

如果你在多个应用程序中同时处理多个任务,那么从看一个明亮的谷歌文档到看一个黑暗主题的IDE编辑器,很快就会导致疲劳和头痛。寻找一个能补充你的过程的主题是值得的。通过选中主题设置中的“与OS同步”选项,可以将主题与操作系统同步。如果操作系统配置为根据一天中的时间切换主题,那么IDE也会同时自动切换主题。

今天的分享就到这里,希望能启发你找到合适的主题,使 IDE 变得更好。如果有更喜欢的主题,欢迎在评论中分享!

参考文章:https://blog.jetbrains.com/webstorm/2022/12/best-webstorm-themes/

WebStorm 2023 安装教程(附安装包下载)

WebStorm 2023 软件介绍

具有智能代码编辑、代码调试、版本控制、重构等功能,可帮助开发人员提高工作效率。使用WebStorm可以轻松创建和管理项目,同时也可以通过插件扩展其功能。它支持多种编程语言和框架,包括JavaScript、TypeScript、React、Angular等,可满足不同开发需求。

WebStorm 2023 软件下载地址

https://pan.baidu.com/s/1APUbGWK2g1BE0S2zHGRyug?pwd=rsy0

WebStorm 2023 软件安装教程

1、下载WebStorm 2023软件安装包到电脑上,右键选择【解压到WebStorm 2023\\】

2、右键【打开】解压后的文件夹

3、找到【WebStorm-2023.1】应用程序,右键选择【以管理员身份运行】它

4、点击【Next】

5、软件默认安装在C盘,可自定义更改软件安装位置,这里小编选择安装在D盘;点击【Next】

6、全部都勾选上,再点击【Next】

7、点击【Install】

8、软件安装中,稍等片刻

9、点击【Finish】

10、回到WebStorm 2023文件夹,找到【Crack】文件夹,右键【打开】它

11、找到【jetbra】文件夹,右键点击【复制按钮】

12、打开本地C盘,再右键文件夹的空白处,点击【粘贴按钮】

13、找到粘贴的【jetbra】文件夹,右键【打开】它

14、找到【scripts】文件夹,右键【打开】它

15、找到【install-current-users】程序,右键【打开】它

16、点击【确定】

17、点击【确定】

18、回到桌面,右键桌面上的【WebStorm 2023.1软件图标】,点击【打开】

19、勾选【Do not…】,再点击【OK】

20、点击【Activation code】

21、回到Crack文件夹,找到【激活码】文件,右键【打开】它

22、右键点击【复制】全部内容

23、回到软件界面,右键Activation code下的空白处,点击【Paste】

24、点击【Activate】

25、点击【Continue】

26、点击【New Project按钮】

27、点击【Create】

28、依次点击【设置按钮】、【Settings…】

29、点击【Plugins】,在搜索框输入【Chinese】,找到【Chinese(Simplified)…】程序,再点击【Install】

30、安装结束后,点击【Restar IDE】,再点击【Restart】

31、软件正在打开,启动界面如下:

32、软件打开成功,运行界面如下:

33、以上就是WebStorm 2023软件安装的全过程,要是对你有帮助的话,请为小编点个赞!

JavaScript开发工具WebStorm使用教程:WebStorm项目

无论在WebStorm 中做什么,都是在项目的上下文中执行的。WebStorm 中的项目是一个文件夹,其中包含您编辑的源代码、您使用的库和工具(例如,在node_modules子文件夹中)以及各种应用程序配置文件(例如,package.json或.eslintrc)。

WebStorm已更新至V2022.1,欢迎下载WebStorm最新版本试用:

点击获WebStorm官方正式版

在 WebStorm 中打开一个文件夹后,.idea子文件夹将添加到其中 WebStorm 存储其内部配置设置,例如项目代码样式或版本控制系统。

.idea目录中的所有设置文件都应置于版本控制之下,除了workspace.xml,它存储您的本地首选项。workspace.xml文件应被VCS标记为忽略。

WebStorm 不支持直接编辑远程主机上的文件。因此,要在 WebStorm 中使用远程源,需要下载它们,打开存储它们的文件夹,并将它们安排在 WebStorm 项目中,如从现有本地源创建项目中所述。要使本地和远程源保持同步,请使用“部署选项”对话框中的“将更改的文件自动上载到默认服务器”列表配置自动上载。

如果您同时打开了多个项目,您可以使用以下选项在它们之间切换:

  • 切换到下一个项目窗口:(Ctrl+Alt+]窗口|下一个项目窗口)
  • 切换到上一个项目窗口:(Ctrl+Alt+[窗口|上一个项目窗口)
  • 或者,打开窗口菜单并选择要切换到的项目。
  1. 右键单击项目的根文件夹并选择Refactor | 从上下文菜单重命名Shift+F6或按。
  2. 在打开的对话框中,选择重命名策略。
  3. 如果项目名称与其根文件夹的名称相同,请选择Rename directory。
  4. 如果项目名称与其根文件夹的名称不同,请选择Rename project。或者,选择文件 | 从主菜单重命名项目并在打开的对话框中输入项目的新名称。如果您的应用程序部署到远程服务器并且项目根文件夹映射到服务器根目录,也请选择此选项。
  5. 当然,您可以重命名根文件夹并相应地更新服务器配置中的映射。
  1. 在Project工具窗口Alt+1中,右键单击项目的根目录并选择Refactor | 移动目录( F6)。
  2. 在打开的对话框中,为项目指定一个新位置,然后单击Refactor。

在 WebStorm 中,您可以为项目指定默认父文件夹。当您打开项目时,WebStorm 将从该文件夹开始。每次创建新项目时也会建议使用此默认位置。

  1. 打开设置/首选项对话框 ( Ctrl+Alt+S) 并转到外观和行为 | 系统设置。
  2. 在默认目录字段中,指定要存储项目的文件夹的路径。
  3. 下次创建项目时,WebStorm 会建议指定目录作为新项目的父目录。

根据您的选择处理配置文件。修改项目设置并创建新的配置文件后,IDE 会在屏幕底部显示一条通知,提示您选择如何处理此项目中的配置文件:

  • 查看文件:查看已创建配置文件的列表并选择要置于版本控制之下的配置文件。之后,选定的文件将被安排添加到 VCS。
  • Always Add:静默计划在.idea目录中创建的所有配置文件以添加到 VCS(仅适用于当前项目)。
  • 不要再问:永远不要安排配置文件添加到 VCS;在您手动将它们添加到 VCS 之前,它们将具有未版本化状态(仅适用于当前项目)。

如果您在未选择任何选项的情况下关闭通知,则在创建新配置文件后它将再次出现。即使您重新启动 IDE,新文件也将进入该列表,直到您选择其中一个选项。

不可共享的配置文件列表

前端开发工具WebStorm 识别配置文件并将它们自动添加到忽略文件列表中。但是,如果您手动共享项目,我们建议您避免将这些文件和文件夹置于版本控制之下:

  • .idea/workspace.xml
  • .idea/usage.statistics.xml
  • .idea/字典文件夹
  • .idea/架子文件夹

将全局设置复制到项目级别

全局 (IDE) 设置与项目分开存储。这就是为什么这些设置不会通过版本控制与项目一起共享。

但是,可以将某些设置复制到项目级别。例如,您可以创建检查配置文件的副本,从代码完成和自动导入中排除的类和包的列表。如果这样做,IDE 会在.idea目录中创建相应的配置文件,您可以通过 VCS 与项目一起共享这些配置文件。

以上就是有关WebStorm项目的介绍,更多关于WebStorm价格信息可进入慧都官网查看。

WebStorm是一个针对JavaScript和相关技术的集成开发环境。像其他JetBrains IDE一样,它使你的开发体验更加愉快,使日常工作自动化,并帮助你轻松处理复杂的任务。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。