Vue.js

创建 Vue.js 组件

1. 在 项目 工具窗口 Alt+1 中，选择新组件的父文件夹，然后从列表中选择 Vue 组件。

2. 在 新建 Vue 组件 弹出窗口中，输入组件文件名并选择组件类型： 组合式 API 或 选项式 API。

   

提取组件

1. 选择要提取的模板片段并调用组件提取操作：

   • 要使用意图操作，请按 Alt+Enter ，然后在列表中选择 提取 Vue 组件。

   • 要使用重构，请从主菜单或所选内容的上下文菜单中选择 重构 | 提取 | 提取 Vue 组件。

2. 输入新组件的名称。 如果该名称已被使用或无效，PyCharm 会显示警告。 否则，将创建新的单文件组件并将其导入父组件。

   

在 script、style 和 template 块中补全代码

• 默认情况下，PyCharm 会在 script 块中提供 ECMAScript 6 代码补全，并在 style 块中提供 CSS 代码补全。

  

• 在 template 标签内，提供对 Vue.js 组件和属性的代码补全 Ctrl+Space 和转到定义 Ctrl+B。

  

补全 Vue.js 属性和方法

• PyCharm 还会为 Vue.js 属性、 data 对象中的属性、计算属性和方法提供补全。

  

补全插槽名称

• PyCharm 会为来自库组件以及项目中定义的组件的 插槽 名称提供补全。

  如果您的项目包含带命名插槽的组件，PyCharm 会在 template 标签的 v-slot 指令中显示这些名称的建议。

• 如果您使用的是 Vuetify、 Quasar 或 BootstrapVue ，插槽名称的代码补全同样可用。

补全在单独文件中定义的组件

• 如果一个 组件在多个文件中定义 ，PyCharm 会识别组件各部分之间的关联，并为属性、数据和方法提供正确的代码补全。

  例如，如果组件的各个部分定义在单独的 JavaScript 和样式表文件中，并通过 src 属性在 vue 文件中进行关联，则在模板中，JavaScript 中定义的属性与方法一样都能得到正确补全。

• 位于组件 template 属性的模板字符串中的模板将获得与置于 template 标签内相同的补全。

  如果模板定义在单独的 HTML 文件中，然后链接到 template 属性，也同样提供补全。

在 Vue.js 注入中补全代码

在 HTML 文件中的 Vue.js 注入内，PyCharm 能识别 Vue.js 语法并相应地高亮显示您的代码。 在不将这些库添加到项目依赖项的情况下，您还可以为在 HTML 文件中通过 CDN 链接的 Vue.js 库中的符号获取补全。

1. 打开包含指向外部 Vue.js 库的 CDN 链接的 HTML 文件。 PyCharm 会高亮显示该链接。

2. 要为该库启用补全，请在链接上按 Alt+Enter ，并在列表中选择 下载库。 或者，将鼠标悬停在链接上并点击 下载库。

该库会添加到 设置 | 语言与框架 | JavaScript | 库 页面上的 JavaScript 库列表中。 有关更多信息，请参阅 配置通过 CDN 链接添加的库。

配置参数提示

1. 打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 内联提示。

2. 在 参数名称 下展开 Vue。

3. 通过选中相应的复选框，指定要显示参数提示的上下文。

   预览会显示您在设置中所做更改如何影响代码外观。

4. 对于某些方法和函数，PyCharm 在任意上下文中都不显示参数提示。 点击 排除列表... 以查看这些方法和函数，必要时为其启用参数提示，或向列表添加新条目。

5. 要在任意上下文中隐藏任意值类型的参数提示，请在 参数名称 下清除 Vue 模板 复选框。

1. 键入要使用的模板缩写，或按 Ctrl+J 并从可用模板列表中选择它。

2. 要展开该模板，请按 Tab。

3. 要在模板内从一个变量移动到另一个变量，请再次按 Tab。

   

1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | TypeScript | Vue。

2. 在 Vue 语言服务器 字段中，指定要使用的 Vue 语言服务器版本。

   • 接受建议的默认版本。

   • 如果您安装了其他版本的 @vue/language-server 包，该版本会显示在列表中。 您可以选择该版本，或接受默认版本。

     

   • 或者，点击 选择 或 并指定自定义 @vue/language-server 包的路径。

3. 指定要使用的服务。

   • 默认选择 自动 选项，这意味着默认使用 Vue 语言服务器（Volar）。

   • 选择 经典 TypeScript 服务， 在 .ts 和 .vue 文件中始终使用 TypeScript 语言服务。

     请注意，TypeScript 语言服务不适用于 TypeScript 5.0.0 及更高版本。 因此，如果您的项目使用这些版本之一，将通过 PyCharm 的内部代码检查提供错误高亮显示。

   • 选择 禁用 可同时关闭 TypeScript 语言服务和 Vue 语言服务器，并从 PyCharm 的内部支持获取编码辅助。

4. 选中 启用基于服务的类型引擎 复选框，可基于来自 Vue 语言服务器的数据评估符号的类型。

   默认情况下，复选框未选中，因此类型评估、解析、代码检查和重构基于 PyCharm 内部 TypeScript 引擎的类型信息。

   这种默认行为可能导致性能问题以及类型解析中的缺陷，因为 PyCharm 内部 TypeScript 引擎采用的类型评估算法与 Vue 语言服务器的算法不同。 选中该复选框可能有助于避免这些问题。

配置缩进

默认情况下，代码在顶层标签内会统一缩进，采用 Vue.js 特定样式。 您可以将此缩进配置为取决于所使用的语言，例如，采用针对 HTML 或 Pug 的特定缩进样式。

1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器(E) | 代码样式 | Vue 模板 ，并打开 制表符与缩进 选项卡。

2. 默认情况下，所有顶层标签的内容都采用 Vue.js 特定样式统一缩进。 接受默认缩进设置，或使用页面上的控件对其进行自定义。 随着您更改设置，右侧窗格中的 预览 会显示这些更改如何影响代码格式。

   要使顶层标签内的代码根据其语言进行缩进，请选择 特定于块中语言。

3. 在 缩进顶层标签的子元素 字段中，指定代码应具有初始缩进的顶层标签。

   默认情况下，只有 template 标签内的代码具有初始缩进。 如有必要，请使用逗号作为分隔符添加其他标签。 例如，如果在该字段中指定 script ，则所有 script 标签内的代码都具有初始缩进，如 预览 窗格所示。

配置空格

1. 默认情况下，PyCharm 自动在 Vue.js 文本插值的 Mustache 语法 中，在左花括号（{ ）之后和右花括号（} ）之前插入空格。

   要禁止自动插入空格，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 代码样式 | Vue 模板 ，然后打开 空格 选项卡并清除 插值 复选框。

2. 默认情况下，当您将代码片段括在块注释中时，文本会紧接起始 /* 字符之后开始，不包含任何空格。 在结束 */ 字符之前也不会插入空格。

   此默认代码样式可能与某些 linter 的规则冲突，例如 ESLint。 要改进代码样式，请配置块注释的首尾空格。

   在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器(E) | 代码样式 | JavaScript 或 编辑器(E) | 代码样式 | TypeScript ，打开 代码生成 选项卡，并在 注释 区域配置空格和格式。

配置换行和大括号

1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器 | 代码样式 | Vue 模板 ，并打开 换行和大括号 选项卡。

2. 如果 Vue.js 插值中的 JavaScript 表达式 包含换行，PyCharm 会自动将该 JavaScript 表达式从新的一行开始，并在其后添加新的一行。

   清除 在 '{{' 之后换行 和 在 '}}' 之前换行 复选框以更改此默认行为。

3. 按照 Vue.js 代码样式：视觉指南 中的说明配置多个右边距。

4. 按照 换行选项 中的说明配置插值中的换行。

使用 Prettier 重排代码

• 在编辑器中，选择要重排的代码片段。 要重排文件或文件夹，请在 项目 工具窗口 Alt+1 中选择它。 然后在上下文菜单中选择 使用 Prettier 重新设置代码格式。

• 要运行 Prettier 自动处理特定文件，请打开 设置 对话框（Ctrl+Alt+S ），转到 语言与框架 | JavaScript | Prettier ，并使用 在重新设置代码格式时 和 在保存时 复选框指定将触发 Prettier 的操作。

  有关更多信息，请参阅 Run Prettier automatically on save 和 将 Prettier 设为默认格式化程序。

应用 Prettier 代码样式规则

• 在启用 Prettier 的项目中，打开 package.json ，并在选项卡顶部的窗格中点击 是。

  

• 要重新应用 Prettier 代码样式（在窗格中点击 否 或修改代码样式之后），按 Ctrl+Shift+A ，并从 查找操作 列表中选择 应用 Prettier 代码样式规则。

安装并配置 typescript-tslint-plugin

1. 在嵌入式 终端 （Alt+F12 ）中，键入：

   npm install --save-dev typescript-tslint-plugin

2. 在您的 tsconfig.json 文件的 plugins 属性中，键入：

   { "compilerOptions": { "plugins": [{"name": "typescript-tslint-plugin"}] } }

3. 当您使用 typescript-tslint-plugin 时， TSLint 会通过 TypeScript 语言服务 运行，因此您可以禁用与 PyCharm 的 TSLint 集成，以避免重复错误报告。

   为此，请打开 设置 对话框（Ctrl+Alt+S ），转到 语言与框架 | TypeScript | TSLint ，并选择 禁用 TSLint。

创建 npm 运行/调试配置

1. 转到 运行 | 编辑配置。 或者，从工具栏上的 运行 小部件中选择 编辑配置。

   

   在打开的 编辑配置 对话框中，在工具栏上点击 添加 按钮（ ），并从列表中选择 npm。

2. 在打开的 运行/调试配置： npm 对话框的 配置 选项卡中，指定 package.json 的位置、 Node.js 运行时以及要使用的包管理器。

   在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 很可能是默认的 dev 脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。

   

3. 可选：

   要在浏览器中打开应用，请按如下方式更新配置：在 浏览器 / Live Edit 选项卡中，选中 启动后 复选框，选择用于打开应用的浏览器，并指定应用将运行的 URL 地址。

   如果您将要调试该应用，请选择 Google Chrome 或其他 Chromium-based 浏览器。

   

运行应用

1. 从工具栏上的 运行 小部件中选择 npm 类型的运行配置，然后点击其旁边的 。 这可以是自动生成的 dev 配置，或者是您自行创建的自定义配置 as described above。

   

2. 等待应用编译完成并且开发服务器就绪。

   运行 工具窗口或 终端 会显示您的应用正在运行的 URL。 如果您的应用是由 create-vue 生成的，默认 URL 是 http://localhost:5173/ 。 点击此链接以查看应用。

   

   或者，启用 PyCharm 在启动时打开应用 as described above。

使用单个 npm 运行/调试配置运行并调试 Vue.js 应用

1. 设置 断点 在您的代码中。

2. 创建一个 npm 配置 as described above。

   如果您使用 create-vue 生成了应用，PyCharm 已经创建了一个 npm 配置，默认名称为 npm dev。 该配置可在 运行 小部件和 运行/调试配置 对话框中使用。

3. 在打开的 运行/调试配置： npm 对话框的 配置 选项卡中，指定 package.json 的位置、 Node.js 运行时以及要使用的包管理器。

   在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 很可能是默认的 dev 脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。

   

4. 在 浏览器 / Live Edit 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based 浏览器 ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用将运行的 URL。

   

5. 点击 运行。

   要重新运行该配置，请在 运行 小部件的列表中选择它，然后点击其旁边的 。

   PyCharm 运行应用于开发模式，并同时启动调试会话。

   

6. 当第一个断点被命中时，切换到 Debug 工具窗口 并按常规方式进行： 逐步执行程序、 停止和恢复 程序执行、 在挂起时检查 ，探索调用堆栈和变量，设置监视，评估变量、 查看实际 HTML DOM ，等等。

使用 JavaScript Debug 运行/调试配置开始调试

1. 设置 断点 在您的代码中。

2. 按 as described above 在开发模式下启动应用，并等待应用编译完成并且开发服务器就绪。

   运行 工具窗口或 终端 会显示您的应用正在运行的 URL。 复制该 URL 以 在随后于 JavaScript Debug 配置中进行指定。

   

3. 创建 JavaScript 调试 配置。 为此，请在主菜单中转到 运行 | 编辑配置 ，点击 ，并从列表中选择 JavaScript 调试。

   如果您使用 create-vue 生成了应用，PyCharm 已经创建了一个 JavaScript 调试 运行/调试配置，默认名称为 调试应用程序 ，默认 URL 为 http://localhost:5173。 在 JavaScript 调试 节点下的列表中选择此运行/调试配置。

   

4. 在打开的 运行/调试配置： JavaScript 调试 对话框中，指定配置的名称以及应用在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制该 URL， 如上所述。

   

5. 点击 调试。

   要重新运行该配置，请在 运行 小部件的列表中选择它，然后点击其旁边的 。

   

6. 当第一个断点被命中时，切换到 Debug 工具窗口 并按常规方式进行： 逐步执行程序、 停止和恢复 程序执行、 在挂起时检查 ，探索调用堆栈和变量，设置监视，评估变量、 查看实际 HTML DOM ，等等。

1. 设置 断点 在您的代码中。

2. 按 as described above 在开发模式下启动应用，并等待应用编译完成并且开发服务器就绪。

3. 运行 工具窗口或 终端 会显示您的应用正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 PyCharm 会使用自动生成的类型为 JavaScript Debug 的 调试应用程序 配置启动调试会话。

   

   如果您是在 New Terminal 中以开发模式启动应用，您可以直接点击链接旁的 在浏览器中启动调试 按钮。