Jetbrains Webstorm JS/HTML/CSS开发工具

53次阅读
没有评论

WebStorm 是一款流行的 JavaScript、HTML 和 CSS 开发 IDE 工具, 由 JetBrains 公司开发, 为 Web 前端开发提供强大的编码支持。最新版本中文版在原有功能的基础上, 进行了大量优化升级, 为前端开发者带来更好的用户体验。

Jetbrains Webstorm JS/HTML/CSS 开发工具

官方下载

https://www.jetbrains.com/webstorm/download

JetBrains WebStorm For Mac v2024.3.4 更新内容如下:

  1. 粘性行 :该功能允许在浏览大文件时将关键结构元素(如函数或类声明)固定在编辑器顶部,帮助开发者在不丢失上下文的情况下更方便地追踪和理解代码结构。
  2. 快速文档改进 :快速文档弹出窗口现在支持代码块的语法高亮显示,并集成了补全结果。它还显示接口成员、枚举常量和类型别名主体,为开发者提供了更丰富的文档信息。
  3. 全行代码补全 :增强了代码补全功能,新增了灰色调的单行建议。这些建议由针对不同语言和框架训练的专属语言模型驱动,能够根据当前文件的上下文补全整行代码,提高编码效率。
  4. 默认启用的 Vue Language Server:针对 Vue、Svelte 和 Astro 的组件用法,默认启用了 Vue Language Server,提供更为精准和智能的代码编辑和调试体验。
  5. 新的 Language Services 微件 :引入了新的 Language Services 微件,进一步增强了 IDE 的语言支持能力,为开发者提供了更丰富的语言特性和工具。
  6. 强大的调试功能 :内置调试器支持断点调试、变量监视和表达式求值等操作,同时支持浏览器的远程调试,极大地提高了调试效率。
  7. 自动化构建工具支持 :继续支持自动化构建工具,如 Webpack 和 Gulp,帮助开发者自动化处理文件、编译代码等。

WebStorm for Mac 版特点

  • 支持 Mac 操作系统, 提供精美的原生 Mac 界面
  • 优化了中文字体显示, 支持 Retina 高分辨率屏幕
  • 支持触控板手势操作, 提高编码效率
  • 实现了多进程模式, 大幅提升性能表现
  • 针对大文件提供智能代码折叠, 降低内存占用
  • 支持苹果 Silicon 芯片, 运行速度快且兼容性好

WebStorm 2024.1 最新变化

WebStorm 2024.1 版本引入了许多新功能和改进,旨在提高开发者的效率和开发体验。以下是一些主要的变化:

粘性行

WebStorm 2024.1 中新增了粘性行功能,用于浏览大文件时的上下文保持。该功能会将函数或类声明等关键结构元素固定在编辑器顶部,当您滚动编辑器时不会丢失上下文。您可以自定义粘性行的行为和外观,通过前往设置面板的 Editor | General | Appearance 下的选项进行设置。

快速文档改进

WebStorm 2024.1 增强了快速文档弹出窗口的功能,现在支持代码块的语法高亮,并与自动补全结果集成。该功能现在会显示接口成员、枚举常量和类型别名主体。您可以点击”Show more”链接,查看完整的成员列表并导航到相关的类型引用。

全行代码补全

对于 JavaScript、TypeScript 和其他代码文件,WebStorm 2024.1 引入了全行代码补全的支持。现在,编辑器会根据文件上下文提供对整行代码的补全建议。这些建议是由针对不同语言和框架进行训练的语言模型驱动的。该功能的使用不依赖于互联网连接,模型在本地运行。全行代码补全功能包含在 WebStorm 的标准许可证中。

默认启用的 Vue Language Server

WebStorm 2024.1 版本中,默认启用了 Vue Language Server,适用于所有的 Vue 项目,包括基于 Nuxt 的项目。然而,对于 Vue 2 项目存在一些已知的限制。如果您处理的是 Vue 2 项目,您可以在设置面板的 Languages & Frameworks | TypeScript | Vue 中选择不使用 Vue Language Server。

适用于 Vue、Svelte 和 Astro 的组件用法

WebStorm 现在会在编辑器内的提示信息中列出 Vue、Svelte 和 Astro 文件中组件的用法。这将帮助您快速找到项目中任意位置特定组件的用法。

新的 Language Services 微件

在状态栏上,新增了 Language Services 微件,提供对当前文件和项目的有效语言服务的洞察。您可以直接从该微件重新启动服务或导航至设置面板。

框架和技术

WebStorm 2024.1 还带来了其他一些针对不同框架和技术的改进,例如:

  • 实验性的 TypeScript 引擎,可通过设置面板的 Languages & Frameworks | TypeScript 中进行切换。新的引擎解决了兼容性问题并提升了性能,目前适用于 TypeScript 和 Vue 项目。
  • 针对 React 的新快速修复功能,可供动态创建 props 和状态的使用。您可以使用快捷键⌥Enter 应用这些快速修复。
  • 对结构视图的改进,增强了 React 和 JSX 的支持。Structure(结构)工具窗口现在显示 React 组件和 hooks,以及 JSX 结构,包括条件渲染和列表项。此外,现在也支持 JSX 驱动的库,如 Preact 和 Solid。
  • 对于 Vue,WebStorm 2024.1 进行了改进,包括对 v-bind 同名简写的支持(Vue v3.4 引入的特性)。支持包括引用解析、查找用法、自动补全、文档和检查。

用户体验

WebStorm 2024.1 还带来了一些用户体验方面的改进,例如:

  • 新的终端外观:WebStorm 2024.1 进行了终端界面的更新,包含了视觉和功能方面的改进,以改善命令行任务的处理。
  • 编辑器标签页的颜色编码高亮显示:为了提高在同时处理多个文件时的导航体验,编辑器标签页重新引入了默认的颜色编码高亮显示,以在视觉上区分它们。
  • 默认工具窗口布局选项:WebStorm 现在提供了一个”默认”选项,用于快速将工作区外观恢复到默认状态。
  • 隐藏主工具栏的选项:根据用户的首选,WebStorm 现在提供了隐藏主工具栏的选项。

UI 改进

默认工具窗口布局选项

WebStorm 2024.1 为保存多个工具窗口布局提供了一个新的”默认”选项。这允许您快速将工作区的外观恢复到默认状态。您可以通过主菜单中的”Window”>“Layouts”访问该布局选项。

隐藏主工具栏的选项

WebStorm 2024.1 引入了一项功能,允许您在使用 IDE 的默认视图模式下隐藏主工具栏。要隐藏主工具栏,您可以首先选择”View”>“Appearance”,然后取消选中”Toolbar”选项。

编辑器标签页的颜色编码高亮显示

为了提高对编辑器中同时处理多种文件类型的导航体验,WebStorm 2024.1 重新引入了默认的颜色编码高亮显示,以在编辑器标签页上区分它们。这将帮助您更轻松地找到所需的文件,并且可以根据文件类型进行快速分辨。

适用于 macOS 的新产品图标

WebStorm 2024.1 为 macOS 重新设计了产品图标,使其与操作系统的标准样式指南保持一致。这有助于提供一致的用户体验,使 WebStorm 与其他 macOS 应用程序集成更加紧密。

内置工具改进

终端

WebStorm 2024.1 的新终端经过精心设计,提供了更好的用户体验。现在,命令将显示在不同的块中,您可以使用箭头键或键盘快捷键轻松地进行导航。此外,命令、路径、实参和选项都具有代码补全的功能,从而提高了终端操作的效率和准确性。您可以通过前往设置(Settings)> 工具(Tools)> 终端(Terminal)> 启用新终端(Enable New Terminal)来启用新的终端界面。

全功能差异查看器

WebStorm 2024.1 引入了全功能差异查看器,以改进更改审查的流程。全功能差异查看器允许您在一个可滚动的面板中查看来自不同更改集的所有已修改文件,而无需逐个文件查看。这为您提供了更好的上下文,使您更容易比较和理解多个更改的影响。全功能差异查看器与 GitLab 和 GitHub 兼容,并为检查和审查代码变更提供了更强大的工具。

GitLab 的代码段支持

WebStorm 2024.1 进一步完善了对 GitLab 的集成,现在支持 GitLab 的代码段。您现在可以直接在 WebStorm 中创建 GitLab 的公共或私有代码段,方便您与团队分享和使用代码片段。

运行到光标的嵌入式调试选项

WebStorm 2024.1 引入了新的运行到光标的嵌入式调试选项,使您能够更快地执行特定代码行。当程序挂起后,您可以将鼠标悬停在要执行到的代码行上,然后点击弹出窗口中的”运行到光标”来快速执行。您还可以使用快捷键 Option/Alt + F9 来使用此功能。

JavaScript、TypeScript 和 CSS 改进

TypeScript 的改进

WebStorm 2024.1 解决了在添加 import type 语句时出现的不一致性问题。现在,您可以配置 TypeScript 的 import type 语句或类型说明符时的用法,以更好地满足您的需求。此外,对于 TypeScript 文件中的 package.json 的 exports 字段的行为进行了改进。

HTML 到 JSX 单标签的闭合

将 HTML 代码粘贴到 JSX 文件中时,WebStorm 2024.1 会自动转换相应的特性,并为您添加闭合标签。这一改进使得 JSX 语法更加自动化和方便。

CSS 自定义 @property 支持

WebStorm 2024.1 跟进了 Interop 2023 倡议的更新,引入了 CSS 自定义 @property 的支持。此改进使得 WebStorm 能够更好地检查和补全工作中使用的属性。

对.jsonc 格式的支持

WebStorm 2024.1 包含了对 jsonc 格式的支持,使您能够在文档中使用单行和多行注释(使用 // 和 /* */)。这在丰富您的配置文件和文档时非常有用,可以更好地注释和解释 JSON 文件。

这些只是 WebStorm 2024.1 版本中一些主要的改进和增强。如有需要,您可以在官方文档中了解更多详细信息。希望这些改进能提高您的开发体验和工作效率。

功能 HIGHLIGHT

轻松进行 JavaScript 开发

WebStorm 拥有精美的 UI 设计和便捷的代码编辑器, 内置对主流前端框架的支持, 如 JavaScript、Angular、React、Vue.js 等, 使用智能代码自动完成和错误检查技术, 可以大幅提高编码效率。

对工作结果满怀信心

IDE 会在您输入时运行数十个代码检查并检测潜在的问题, 助您编写更可靠和更易于维护的代码。只需点击几次即可重构您的整个代码库, 且在实现较大的结构更改时不会遗漏任何内容。

享受高效的编码

得益于 JavaScript 开发所需的全部功能开箱即用, 您可以直接开始编码。WebStorm 会为您处理一切常规工作, 让您更高效并专注于更具创造性的任务。

减轻处理复杂任务的压力

担心使用 Git 时出现混乱并丢失重要更改? 或者跨整个项目重命名组件时会中断一些内容?WebStorm 将简化这些和其他具有挑战性的任务, 以便您专注于大局。

核心优势

专门针对 JavaScript 打造

是否在为 JavaScript 开发中最棘手的部分寻找值得信赖的工具?10 多年来, 我们一直在优化 WebStorm, 使编码体验更加有趣。无论您是使用 JS、TS、React、Vue、Angular、Node.js、HTML 还是各种样式表,WebStorm 都能满足您的需求。

最智能的编辑器

WebStorm 深刻理解您的项目结构, 并且可以在编写代码的各个方面为您提供帮助。它将自动补全代码、检测错误和冗余并提供修复建议, 以及帮助您安全地重构代码。

内建开发者工具

在 IDE 中工作的好处之一是在一个地方获得所有必要工具。使用 WebStorm 调试和测试您的客户端和 Node.js 应用, 并利用版本控制。充分使用 linter、构建工具、终端和 HTTP 客户端, 这些均已经与 IDE 集成。

可自定义环境

想要扩展内置功能? 体验各种主题和插件等, 根据您的喜好定制 WebStorm 的外观。保存您的自定义设置并在 WebStorm 的不同实例之间共享。

正文完
 0
评论(没有评论)