HTML/CSS/JavaScript 编辑器

:PhpStorm 包含 WebStorm 内所有与 HTML、CSS 和 JavaScript 相关的功能。

基于 DOM、浏览器特定的补全

针对标记、关键字、标签、变量、参数和函数的 JavaScript、HTML 和 CSS 代码补全基于 DOM 且支持常用的浏览器,如 Firefox 和 Chrome。

补全适用于 *.js 文件、HTML 事件处理程序和所有其他相关上下文中的标准和用户自定义函数。

支持 Sass、SCSS、Less、Stylus、Compass、CoffeeScript、TypeScript、Dart 和其他尖端 Web 开发技术。

JavaScript 调试器

使用 JetBrains PhpStorm,您既可以调试 JavaScript,又能充分利用所有智能功能:
  • HTML 和 JavaScript 中的断点
  • 可自定义的断点属性:挂起模式、条件和传递计数等
  • 在 JavaScript 调试器 UI 中查看框架、变量和监视代码
  • 对 JavaScript 表达式进行运行时评估
  • 在 JavaScript 中进行单元测试

动态编辑

Live Editing Preview 可以让您节省许多时间并减少按键次数。 激活 Live Edit 功能后,您可以同时在编辑器和浏览器中打开页面,并运行 JavaScript 调试会话。 开始编辑代码,然后立即在浏览器中查看更改,即使在代码补全弹出窗口中浏览列表选项时也能如此。

PhpStorm 会自动保存您的更改,浏览器会实时智能地更新页面,显示您的编辑。

File Watchers

借助 File Watchers,自动将现代 Web 开发语言编译/转译成 JavaScript(从 CoffeeScript、TypeScript 和 Dart 等)或 CSS(从 Sass、SCSS、Less、Stylus 和 Compass 等)。

高速编码

编辑器让您可以利用 Emmet(之前为 Zen Coding)的所有功能。 通过实时模板定义您自己的缩写词,或者为 PHP、HTML、CSS、JS 和其他语言使用预定义的缩写词。

验证和快速修复

PhpStorm 可以检测以下问题并建议自动修复:缺少必要的特性、无效的特性或非法值、链接中文件的错误引用、重复的特性、无效的 CSS 选择器格式、无效的 CSS 属性、未使用的 CSS 类定义和无效的本地锚点等。

JavaScript 重构

针对 JavaScript 的重构功能让您可以轻松地修改代码结构和撤消修改。 可用于 JS 的一些重构:Rename、Extract Variable/Function、Inline Variable/Function、Move/Copy、Safe Delete 和 Extract embedded script into file。

JSLint/JSHint

JavaScript 编辑器中集成了 JavaScript 代码质量工具,可以在您编辑代码时检查它们。 打开 Settings,输入 JSLint/JSHint,启用检查,您的代码将根据输入的这些检查来接受检查。

Node.js

PhpStorm 通过一个来自代码库的免费插件完全支持 Node.js。 它提供代码补全,高亮显示,导航,错误检查,调试和通过 npm 管理包等。

ECMAScript Harmony 支持

对于想要先人一步的开发者,PhpStorm 提供了对 ECMAScript Harmony 的支持。 要试用新功能,请在 IDE 设置中将 ECMAScript Harmony 设置为 JavaScript 语言版本。

JavaScript 模板和 Web 组件支持

PhpStorm 支持 EJS 模板引擎(语法高亮显示、输入辅助和格式化等)并为 Handlebars 和 Mustache 模板提供格式化和语法高亮显示,以及标记自动关闭功能。

还提供了对 Web 组件的初步支持。

Angular 支持

PhpStorm 中的 Angular 支持包含针对指令和绑定的代码补全与导航,以及理解 TypeScript 或 ECMAScript 2015 的新事件特性。

Flow 支持

您可以使用 Flow 添加到 JavaScript 中的类型注释。 使用注释的函数或方法时,您会在代码补全中获得键入参数的信息。

TSLint

PhpStorm 可与 TSLint(适用于 TypeScript 代码的linter)集成。 启用后,输入时可以直接在浏览器中查看 TSLint 中的警告和错误。

Vue.js

在 .vue 文件的脚本和样式块中为 Vue 模板语言和您选择的语言使用编码辅助。 IDE 会自动补全 Vue 组件并为它们添加所需的导入。