WebStorm 2024

WebStorm 2024是JetBrains推出的一款专注于JavaScript及相关技术的集成开发环境（IDE），它在延续智能代码辅助、深度学习级代码补全、实时错误检测、对 TypeScript 与 Flow 的精准识别、内置调试器和测试框架集成等功能优势的基础上，引入了多项重要更新：编辑器新增"粘性行"功能，滚动大文件时将函数或类声明等关键结构固定在顶部以保持上下文，快速文档弹窗支持代码块语法高亮并集成到补全结果中；全行代码补全由针对不同语言和框架训练的专属语言模型驱动，可根据当前文件上下文补全整行灰色调建议，且这些模型在本地运行，不会通过互联网发送任何代码；所有 Vue 项目默认启用 Vue Language Server，并为 Vue、Svelte 和 Astro 文件中的组件用法提供编辑器内提示，同时带来新的 Language Services 微件以洞察和管理语言服务。欢迎有需要的用户下载使用。

WebStorm 2024新特性

一、关键亮点

1、改进的框架组件导航和重命名

我们增强了针对 Vue、Svelte 和 Astro 组件的编辑器内提示。 Show component usages（显示组件用法）操作现在可以在 import 和标记模板中查找用法。 我们还添加了 Show Component Usages（显示组件用法）筛选器，以便在搜索常规文件引用时排除组件用法。 Rename（重命名）重构也已更新，现在可以在重命名组件文件时包含用法。

2、对数据库工具和 SQL 的内置支持

数据库工具和完整的 SQL 支持（先前通过付费插件提供）现在已与 WebStorm 捆绑，无需额外付费。 您可以直接在 IDE 中查询、创建和管理数据库。 这扩展了 WebStorm 的后端和全栈开发能力。 它还简化了 JetBrains IDE 之间的切换，因为大多数 IDE 都包含此功能。

3、通过 AI Assistant 实现更出色的代码补全（付费）

我们已努力解决有关 AI Assistant 质量的主要问题。 此版本改进了 JavaScript 和 TypeScript 的代码补全，并增加了对 HTML 和 CSS 的支持。 通过将本地的整行建议与来自 JetBrains 内部 LLM 的基于云的建议相结合，我们提高了速度和准确性，同时减少了无关建议。

二、框架和技术

1、Tailwind CSS 类的颜色预览

现在，编辑器中会以内联方式显示 Tailwind CSS 类的颜色预览，这样可以更轻松地区分颜色。 我们添加了对语言服务器协议 (LSP) 的 textDocument/documentColor 方法的支持，因此所有基于 LSP 的插件现在都直接提供此功能。

2、针对 Angular 的改进

对于采用 Angular 19 的项目，WebStorm 现在对组件、指令和管道默认为独立模式。 新增了一些快速修复来帮助在独立和非独立组件之间转换。 未使用的独立 import 可以在代码重新格式重新设置期间或通过新检查自动移除。 @let 语法支持也得到改进。

3、子文件夹中 .prettierignore 的正确处理

WebStorm 现在可以正确处理包含 package.json 的子文件夹中的 .prettierignore 文件，确保不会设置忽略的文件的格式。 一个新选项允许您在 Settings | Languages & Frameworks | JavaScript | Prettier（设置 | 语言和框架 | JavaScript | Prettier）中指定自定义忽略文件。

4、捆绑的 Vue 语言服务器

Vue 语言服务器现在与 WebStorm 捆绑，旨在增强可靠性并防止在 WSL 上出现加载问题。 未来，我们计划对 Svelte、Astro 和其他技术也做出同样的改动。

5、针对 Svelte 的改进

我们增加了对特性的支持，确保这些块中的符号得到正确解析。 此外，还有一个新的复选框可以禁用 SvelteKit a11y 警告，让您更好地控制无障碍功能警告。

6、对通过 package.json 导出的 CSS 的支持

我们在 package.json 中添加了对 CSS、Sass、SCSS 和 Less 的 exports 字段的支持。 如果样式是通过 package.json 导出，WebStorm 将不再显示有关未解析变量的警告。

7、对 Windows 的 Bun 调试支持

以前仅在 macOS 和 Linux 上可用的基本 Bun 调试现在在 Windows 上也获得了支持。 您可以在 WebStorm 内设置断点、逐步执行代码、检查变量以及对表达式求值。

三、用户体验

1、优化的 Rename（重命名）操作位置

我们优化了 Rename（重命名）操作在编辑器和 Project（项目）工具窗口中的元素上调用时在上下文菜单中的位置。 此操作现在位于顶层，使快速重命名文件、变量和其他元素更加简单。

2、更清晰的目录搜索结果

现在，在项目目录中使用 Find in Files（在文件中查找）时，WebStorm 会默认排除 node_modules 结果，减少无关文件造成的混乱。 您可以通过启用 Settings | Advanced Settings（设置 | 高级设置）下的 Search in library files when “Directory” is selected in Find in Files（在“在文件中查找”中选择“目录”时，在库文件中搜索）选项来恢复先前的行为。

3、高亮显示所选文本的匹配项

WebStorm 现在默认自动高亮显示您在文件中选择的文本的所有实例。 这使得跟踪所选文本在整个代码中出现的位置更加简单。 您可以在 Settings | Editor | General | Appearance（设置 | 编辑器 | 常规 | 外观）中自定义功能。

4、.idea 目录默认显示

此前，.idea 文件夹（WebStorm 存储内部配置设置的地方）默认隐藏。 这使一些用户更难提交项目级配置。 为了解决这个问题，我们在 Project（项目）工具窗口中将其设为可见。

5、对生成的文件的更好识别

WebStorm 现在会自动将 dist 文件夹中的多余文件排除在索引之外，优化 CPU 使用率并缩短索引编制时间。

6、对 WSL 中项目的更出色支持

我们继续提高托管在 WSL 上并从 Windows 在 IDE 中打开的项目的可靠性。 特别是新增的对符号链接的支持，以及与 WSL 的交互切换为 Hyper-V 套接字，这提高了 IDE 与 WSL 交互的性能。

7、索引编制期间可用的新功能

打开或更新项目时，WebStorm 会对其编制索引，导致某些功能暂时无法使用。 我们正在设法改进，在索引编制期间允许使用更多功能。 在此更新中，Search Everywhere（随处搜索）(Shift+Shift) 现在可用于项目中已编入索引的部分，附带拼写和语法检查。

四、集成式开发者工具

1、禁用后台预提交检查的选项

现在，您可以使用 Settings | Version Control | Commit | Advanced Commit Checks | Run advanced checks after a commit is done（设置 | 版本控制 | 提交 | 高级提交检查 | 提交完成后运行高级检查）下的新选项在提交过程中管理后台检查。 通过此设置，您可以决定是否在提交后运行测试和检查。 如果您想等待这些检查完成，禁用此选项即可。

2、新的 Docker Compose 构建特性

我们增加了对新 Docker Compose 特性的支持，让您可以更好地控制 Docker Compose 中的构建、资源管理、服务编排和网络，使开发更加高效灵活。

3、改进的 Dev Container 模板兼容性

我们改进了 Dev Container 模板的兼容性，这些模板最初并非设计用于在远程环境中运行。 此前，Dev Container 模板通常包含假定本地执行的配置，导致在远程 Docker 实例上运行容器时出现问题。 现在，WebStorm 能够确保未针对远程使用进行优化的模板仍可正常运行。

WebStorm用途

一、JavaScript

1、基于DOM，特定浏览器完成。

2、编码导航和用法查询。

3、支持ECMAScript。

4、支持CoffeeScript。

5、支持结点。

6、JavaScript重构。

7、JavaScript单元测试。

8、代码检测和快速修复。

9、JSLint/JSHint。

10、基于 Mozilla的JavaScript调试器。

二、其他用途

1、批量代码分析。

2、编码语言混合或内混。

3、拼写检查器。

4、重复代码检测器。

三、编辑语言

1、支持HTML5。

2、css/js。

3、检验和快速修复。

4、Zen编码。

5、显示内容。

6、显示应用的风格。

四、便捷的环境

1、HTML5样本文件和其他Web应用程序模板。

2、FTP和远程文件同步。

3、集成了版本控制系统。

4、本地记录。

WebStorm常用快捷键介绍

一、编辑

Command+alt+T 用 (if..else, try..catch, for, etc.)包住

Command+/ 注释/取消注释的行注释

Command+alt+/ 注释/取消注释与块注释

alt+↑ 向上选取代码块

alt+↓ 向下选取代码块

Command+alt+L 格式化代码

tab,shift+tab 调整缩进

Control+alt+I 快速调整缩进

Command+C 复制

Command+X 剪切

Command+V 粘贴

Command+shift+V 从剪贴板里选择粘贴

Command+D 复制代码副本

Command+delete 删除当前行

Control+Shift+J 清除缩进变成单行

shift+回车 快速换行

Command+回车 换行光标还在原先位置

Command+shift+U 大小写转换

Command+shift+[,Command+shift+] 文件选项卡快速切换

Command+加号,Command+减号 收缩代码块

Command+shift+加号，Command+shift+减号 收缩整个文档的代码块

Command+W 关闭当前文件选项卡

alt+单击 光标在多处定位

Control+shift+J 把下面行的缩进收上来

shift + F6 高级修改，可快速修改光标所在的标签、变量、函数等

alt+/ 代码补全

二、调试

Control+alt+R 运行项目

Command+Control+R 运行Debug

Command+F8 添加断点

Command+shift+F8 打开断点列表

三、导航

Command+O 跳转到某个类

Command+shift+O 跳转到某个文件

Command+alt+O 跳转到某个符号

Control+←,Control+→ 转到上/下一个编辑器选项卡

F12 打开之前打开的工具窗口（TODO、终端等）

Command+L 跳转行

Command+E 弹出最近文件

Command+alt+←,Command+alt+→ 向前向后导航到代码块交接处（一般是空行处）

Command+shift+delete 导航到上一个编辑位置的位置

Command+B 跳转到变量声明处

Control+J 获取变量相关信息（类型、注释等，注释是拿上一行的注释）

Command+Y 小浮窗显示变量声明时的行

Command+[,Command+] 光标现在的位置和之前的位置切换

Command+F12 文件结构弹出式菜单

alt+H 类的层次结构

F2,shift+F2 切换到上\下一个突出错误的位置

Command+↑ 跳转到导航栏

F3 添加书签

alt+F3 添加带助记的书签

alt+1,alt+2… 切换到相应助记的书签位置

Command+F3 打开书签列表

四、VCS/本地历史记录

control+V 打开VST小浮窗

Command+K 提交项目

Command+T 更新项目

alt+shift+C 打开最近修改列表

五、搜索和替换

Command+F 搜索

Command+R 替换

Command+G 查找下一个

Command+shift+G 查找下一个

Command+shift+F 按路径搜索

Command+shift+R 按路径替换

六、选中文字的搜索

Command+F7 向声明的地方搜索并选中

Command+shift+F7 打开搜索框进行搜索

Command+alt+F7 打开小浮窗显示搜索列表

七、对项目文件的操作（重构）

F5 复制文件到某个目录

F6 移动文件到某个目录

Command+delete 安全删除

shift+F6 重命名

八、全局

双击shift 弹出小浮窗搜索所有

Command+切换项目 Command+shift+ 反向切换项目

Command+shift+A 整个工程的查找操作

Command+1,Command+2… 打开各种工具窗口

alt+shift+F 把文件添加到收藏夹

alt+shift+I 打开项目描述

alt+~ 快速切换当前计划

Command+, 设置编辑器

Control+Tab 选项卡和工具窗口之间进行切换

alert+回车 显示npm版本升级列表