PhpStorm 2021.3 Help

代码风格。打字稿

使用此页面配置 TypeScript 文件的格式选项。当您更改这些设置时,“预览”窗格会显示这将如何影响您的代码。

制表符和缩进

使用制表符

  • 如果选中此复选框,则使用制表符:

    • 按键Tab

    • 用于缩进

    • 用于重新格式化代码

  • 如果清除该复选框,PhpStorm 将使用空格而不是制表符。

智能标签

缩进由两部分组成。一部分是嵌套代码块的结果,另一部分是由对齐决定的。

  • 如果选中此复选框,则嵌套生成的部分包含制表符和空格(如果需要),而对齐定义的部分仅包含空格。

  • 如果清除此复选框,则仅使用选项卡。这意味着在重新格式化适合指定制表符大小的一组空格后,会自动将其替换为制表符,这可能会导致精细对齐中断。

标签大小

在此字段中,指定适合制表符的空格数。

缩进

在此字段中,指定要为每个缩进级别插入的空格数。

继续缩进

在此字段中,指定要在数组元素之间、表达式、方法声明和方法调用中插入的空格数。

在空行上保留缩进

如果选中此复选框,PhpStorm 会在空行上保留缩进,就好像它们包含一些代码一样。如果清除该复选框,PhpStorm 将删除空行上的制表符和空格。

缩进链式方法

在函数声明中,链中的第二个和更多方法显示在单独的行上。

  • 当复选框被选中时,链中的第二个和更多方法与第一个调用对齐。

  • 当复选框被清除时,链中的第二个和更多方法将与调用它们的对象对齐。

缩进组中的所有链接调用

只有在选择缩进链接方法复选框时,才可使用复选框。

空间

使用此选项卡指定您希望 PhpStorm 自动插入空格的位置。选中相关位置描述旁边的复选框,然后在“预览”窗格中检查结果。

包装和大括号

在此选项卡中,自定义 PhpStorm 在重新格式化源代码时将应用于各种代码结构的异常、大括号放置和对齐选项 。检查“预览”窗格中的结果。

硬包装在

在此字段中,指定元素右侧所需的空格数。如果您接受默认选项,则使用全局设置中的值。

打字时换行

在此字段中,指定编辑后的文本如何适合指定的Hard wrap at字段。

  • 默认值:选择此选项以使用全局设置中的“键入时换行”值。

  • :选择此选项以使用右边距字段中的值。

  • :如果您选择此选项,则一行可以超过右边距中指定的值。

视觉指南

在此字段中,指定多个右边距。您可以保留默认值或输入边距的空格数。如果要指定多个边距,请输入以逗号分隔的数字。

重新格式化时保留

使用复选框来配置 PhpStorm 在重新格式化源代码时将产生的异常。例如,默认情况下,换行复选框处于选中状态。

如果您的代码包含比标准约定短的行,您可以在重新格式化之前通过禁用换行符复选框来转换它们。

包装选项

包装样式适用于左侧窗格中指定的各种代码结构(例如,方法调用参数或赋值语句)。

  • 不换行 - 选择此选项时,不应用特殊换行样式,嵌套对齐和大括号设置将被忽略。

  • 时换行 - 选择此选项以使用适当的缩进换行超出右边距的行。

  • Wrap always - 选择此选项以将所有元素包装在列表中,以便每行有一个元素具有适当的缩进。

  • Chop down if long - 选择此选项以将元素包裹在超出右边距的列表中,以便每行有一个元素具有适当的缩进。

对齐选项

  • 多行时对齐- 如果选中此复选框,则代码构造从下一行的同一列开始。否则,代码结构的位置由当前缩进级别决定。

  • <character(s)> on next line - 选中此复选框可在换行时将指定的一个或多个字符移动到下一行。

  • 'else' on new line - 使用此复选框将相应的语句或字符移动到下一行。

  • <character> 之后的新行- 选中此复选框可将指定字符之后的代码移动到新行。

  • Special else if treatment - 如果选中此复选框,则else if语句位于同一行。

    否则,else if语句将移至相应缩进级别的下一行。

  • 缩进 case 分支- 如果选中此复选框,则case语句位于相应的缩进级别。否则,case语句将与 . 放在同一缩进级别switch

  • 对象- 从列表中选择如何对齐对象:

    • 不对齐:连续行中的属性将不对齐。

    • 在冒号上:连续行中的属性将与冒号对齐。

    • On value:连续行中的属性将与该值对齐。

  • 变量声明- 选择以下选项之一来配置等号的对齐方式:

    • 不对齐:等号不对齐。

    • 多行时对齐var:多行语句中的等号通过插入额外的空格来对齐。

    • 分组时对齐var:多个语句中的等号通过插入额外的空格来对齐。

  • ES6导入/导出对齐'来自'子句:复选框被选中,PHPSTORM在ECMAScript 6import代码中对齐和export语句自动使您的代码更容易阅读和维护。在“预览”窗格中比较代码片段的外观是否对齐。

    ws_align_import_export_es6.png

    启用此选项后,PhpStorm 将动态对齐新代码。按 重新格式化代码后,现有importexport语句将对齐,有关详细信息Ctrl+Alt+L,请参阅 重新格式化源代码部分。

大括号放置选项

大括号放置方式

使用此列表来指定左大括号在类声明方法声明函数声明和其他类型的声明中的位置。可用的选项有:

  • 行尾:选择此选项可将左大括号放置在声明行的末尾。

  • Next line if Wrapped:选择此选项可将左大括号放置在多行声明行之后的行首。

  • 下一行:选择此选项可将左大括号放置在声明行之后的行首。

  • Next line shift:选择此选项以将左大括号放置在声明行移动到相应缩进级别之后的行。

  • Next line each shift:选择此选项以将左大括号放置在声明行移动到相应缩进级别之后的行,并将下一行也移动到下一个缩进级别。

强制大括号

从此列表中,为ifforwhiledo () while语句选择大括号引入方法。可用的选项有:

  • 不要强制:选择此选项以禁止自动引入大括号。

  • 当多行时:选择此选项以在语句占用多行时自动插入大括号。请注意,PhpStorm 分析整个语句中的行数,而不仅仅是它的条件。

    例如,如果代码是

    如果(真)返回假;

    PhpStorm 会自动插入大括号:

    如果(真){返回假;}
  • Always:选中此复选框时,PhpStorm 总是自动插入大括号。

空行

使用此选项卡来定义您希望 PhpStorm 在重新格式化后保留和插入代码的位置和数量。结果显示在“预览”窗格中。

保留最大空白行

在此区域中,指定重新格式化后要保留的额外空白行数。

最少空行

import在此区域中,配置语句块之后以及类、字段、方法或函数周围是否有额外的空行。在每个选项旁边的字段中,指定要留下的最少额外空行数。

标点

使用此选项卡中的列表来形成自动插入终止分号、单引号和双引号以及尾随逗号的指令。

分号终止语句

  • 使用分号终止新代码中的语句

  • 始终使用分号终止语句

  • 不要使用分号来终止新代码中的语句

  • 不要总是使用分号来终止语句

引号

  • 在新代码中使用引号

  • 始终使用引号

  • 在新代码中使用引号

  • 始终使用引号

尾随逗号

使用此列表配置是否要在对象、数组以及方法定义和调用中的参数中使用尾随逗号。可用的选项有:

  • 保持

  • 消除

  • 多行时添加

代码生成

在此选项卡上,配置生成代码的代码样式。

使用“公共”修饰符

使用此复选框可在生成的代码中插入或省略公共访问修饰符。

例如,在从以下生成公共方法期间:

类测试 { public test():void { var x = 1; } }
  • 如果选中该复选框,则公共访问修饰符会自动插入到生成的代码中:

    类测试 { public test():void { this.extracted(); } 公共提取() { var x = 1; } }
  • 如果清除该复选框,则在代码生成期间将省略公共访问修饰符:

    类测试 { public test():void { this.extracted(); } 提取() { var x = 1; } }

请参阅TypeScript 语言手册,私有/公共修饰符一章。

命名约定

在这个领域:

  • 配置或接受将自动添加到生成的字段和属性名称的默认前缀。

  • 选择生成文件名称的样式。例如,当 PhpStorm 建议将一个类移动到一个新的自动生成的文件时,该文件的建议名称是根据所选样式从类名生成的。从保持类的名称和包含文件的合规性中了解更多信息

评论代码

在此区域中,为生成的注释配置代码样式。

  • 在 JSDoc 中包含类型:选中此复选框可自动添加@param@return和其他标签的类型。请注意,类型信息对于 TypeScript 来说是无关紧要的,因为类型是从代码本身中检索的。因此,默认情况下清除该复选框。

  • 第一列的行注释:选中此复选框可在第一列开始行注释。当复选框被清除时,行注释在代码中对齐。

  • 在行注释开始处添加空格:选中此复选框时,将在行注释字符和注释行的第一个字符之间插入一个空格。

    行注释开始处没有空格
    添加行注释处的空格
  • 在块注释周围添加空格:选中此复选框可在块注释中添加前导和尾随空格。

    默认情况下,当您将代码片段包含在块注释中时,文本会在开始/*字符之后开始,没有任何空格。在结束*/字符之前也没有插入空格。此默认代码样式可能与某些 linter 的规则冲突,例如 ESLint。

    块注释开始处没有空格
    添加了块注释处的空格
    添加了块注释处的空格

进口

合并来自同一模块的成员的导入

  • 选中此复选框时,来自同一模块的导入符号将在一个导入语句中列出,并以逗号作为分隔符。成员按导入顺序列出。要按字母顺序排列它们,请选中排序导入的成员复选框并运行代码 | 优化导入

  • 清除此复选框后,将为每个导入的符号生成单独的导入语句。

使用相对于 tsconfig.json 的路径

选中此复选框后,PhpStorm 使用tsconfig.json文件作为根来计算导入路径。清除此复选框后,PhpStorm 会计算相对于项目根目录的导入路径。

例如,如果您的项目结构如下:

ws ts 导入示例

选中复选框后,PhpStorm 会生成以下导入语句:

从 'directory_2/file_2' 导入 {ClassName}

如果清除该复选框,则会生成以下导入语句:

从“../directory_2/file_2”导入 {ClassName}

当index.js可用时使用目录导入(节点式模块解析)

假设您有一个具有以下结构的项目:

目录导入:项目结构
  • 当此复选框被清除时,例如,文件src/lib/index.js将被导入为./src/lib/index.js.

  • 如果选中该复选框,文件src/lib/index.js将被导入为./src/lib.

从TypeScript 官网了解更多关于 TypeScript 模块解析的信息。

使用文件扩展名

选中此复选框后,PhpStorm 会自动将.js扩展名添加到 import 语句中的 ES6 模块的名称中。当您在需要完整文件名的浏览器(例如,在 Chrome 中)中使用 ES6 模块时,这一点很重要。PhpStorm 在自动生成导入语句、代码完成时或使用Alt+Enter.

使用来自tsconfig.json的路径映射

在此字段中,配置import语句中路径的样式。

  • 始终- 使用此选项,PhpStorm 始终使用来自tsconfig.json的路径映射

  • 从不- 使用此选项,PhpStorm 始终在生成的导入中使用相对路径。

  • 仅在指定路径之外的文件中- 使用此选项,PhpStorm 在定义相同路径映射的文件之间生成导入时使用相对路径。在所有其他文件中,将使用路径映射。

在下面的示例中,文件animal.tsbird.ts存储在动画文件夹下的文件夹中,在tsconfig.json中为其指定了路径映射。文件dog.ts在路径映射之外。

TypeScript:示例项目结构

路径映射@Lib配置如下:

"baseUrl": ".", "paths": { "@lib/*": ["./lib/objects/earth/animated/*"] }

因此,AlwaysNever选项中的每一个都以相同的方式应用于bird.tsdog.ts。选择Only in files outside specified paths选项后,PhpStorm 会生成不同样式的语句:在bird.tsimport中具有相对路径,在dog.ts中具有路径映射。

导入语句使用@Lib路径映射。

始终选项:使用路径映射

导入语句使用相对路径。

选项从不:使用相对路径

PhpStorm 生成不同样式的语句:在bird.tsimport中使用相对路径,在dog.ts中使用@Lib路径映射。

导入语句:使用的相对路径

不要完全从

在此字段中,指定 PhpStorm 在自动导入符号期间应跳过的确切路径。相反,PhpStorm 将寻找替代路径来导入符号。

这对于允许导入其子模块而不是整个模块的模块特别有用。例如,要更喜欢import {Observable} from 'rxjs/Observable'更一般的导入import {Observable} from 'rxjs',请添加rxjs到列表中。

要管理要跳过的模块列表:

  1. 单击图标一般展开组件该字段的右侧。

  2. 在打开的更改模块对话框中,单击并在添加模块对话框中添加图标指定模块名称。要从列表中删除一个模块,选择它并单击。图标一般删除

对导入的成员进行排序

  • 选中此复选框后,PhpStorm 会按字母顺序在合并的导入语句中列出导入的成员。请注意,只有在运行Code |时,成员才会按照导入和重新排序的顺序以逗号分隔列出。优化导入

  • 清除此复选框后,合并导入语句中的成员始终按导入顺序以逗号分隔列出。

按模块对导入进行排序

  • 选中此复选框后,当您运行Code |时,导入语句将按模块名称的字母顺序重新排序。优化导入

  • 清除此复选框后,导入语句始终按照它们生成的顺序显示,并且在运行Code |后此顺序不会更改。优化导入

安排

在此选项卡中,定义一组规则以根据您的偏好重新排列您的 TypeScript 代码。

分组规则

使用该区域设置分组规则。

  • 将被覆盖的方法放在一起

    选中此复选框可按类和接口将覆盖的方法组合在一起。在订单列表中,选择保持订单按名称排序选项。

匹配规则

使用此区域将元素顺序定义为规则列表,其中每个规则都有一组匹配项,例如修饰符或类型。

  • 添加按钮:使用此按钮添加规则。空白规则区域打开。

  • 删除按钮:使用此按钮从列表中删除规则。

  • 编辑按钮:使用此按钮编辑现有规则。要查看此按钮,请导航到要编辑的规则并单击该按钮。在打开的弹出窗口中,修改规则字段。

  • 上移按钮 下移按钮:使用这些按钮向上或向下移动选定的规则。

空规则

使用此区域创建新的匹配规则或编辑现有的匹配规则。您可以从以下过滤器中进行选择:

  • Type:使用此过滤器为您的规则选择构造函数、方法或属性。

    请注意,单击类型关键字两次会否定该条件。

  • 修饰符:使用此过滤器选择规则的修饰符类型。

    请注意,单击修饰符关键字两次会否定该条件。

  • 名称:使用此字段指定规则中的条目名称。此过滤器仅匹配条目名称,例如字段名称、方法名称、类名称等。该过滤器支持正则表达式并使用标准语法。匹配是针对整个名称执行的。

  • 顺序:使用此列表选择规则的排序顺序。当多个元素使用相同的匹配规则时,此选项很有用。在这种情况下,选择Keep order将保持与重新排列之前设置的顺序相同,选择Order by Name将按照名称对具有相同匹配规则的元素进行排序。

  • 别名:此选项显示在“规则别名定义”对话框中定义的别名。您可以删除不需要的那些。

按字母顺序排序按钮

当您从Order列表中选择Order by Name时,会出现此图标。图标表示此规则中的项目按字母顺序排序。

设置自

如果适用,该链接将显示在页面的右上角。单击此链接并选择要用作当前语言代码样式的基础的语言。

要返回到初始代码样式设置集并放弃更改,请单击重置

最后修改时间:2021 年 11 月 4 日