组件 Angular 和 WebStorm 的自定义前缀

Question

几个月前，我最初使用 Visual Studio 代码编辑器在 Angular 开始了一个项目。

今天我切换到 WebStorm，并将我的项目升级到 Angular 4.0。

虽然我的项目运行很好，没有任何错误，但我在 WebStorm 中收到以下错误：

TSLint: The selector of the component "ConnectionStatusComponent" should have prefix "app" ( https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-07) (component-selector)

之后 link 我意识到将组件选择器的自定义前缀添加到 prevent name collisions with components in other apps and with native HTML elements

是一个很好的做法

我明白了。我的问题是为什么我被迫使用 app 前缀而不是其他前缀？如果我加上其他前缀 app，WebStorm 会将此行标记为错误。

根据 link 的风格指南：

Do use a custom prefix for a component selector. For example, the prefix toh represents from Tour of Heroes and the prefix admin represents an admin feature area.

我可以使用任何我想要的前缀。前缀名有规定吗？

Answer 1

据我所知，前缀名没有严格的规定。如果您使用的是 CLI，则可以在 angular-cli.json 中编辑 apps 下的 prefix 节点。这将使 cli 创建具有您决定的任何前缀的新组件。对于 tslint.json，您可以同时设置组件和指令规则：

"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],

希望这对您有所帮助。

编辑

如果你想使用多个前缀，你可以像这样在一个数组中指定它们(example from here):

//RULES: [ENABLED, "attribute" | "element", "selectorPrefix" | ["listOfPrefixes"], "camelCase" | "kebab-case"]
  "directive-selector": [true, "attribute", ["dir-prefix1", "dir-prefix2"], "camelCase"],
  "component-selector": [true, "element", ["cmp-prefix1", "cmp-prefix2"], "kebab-case"],

在数组中，第一个参数是布尔值，表示是否是否启用。
第二个参数是联合类型，可选择 attribute 或 element.
第三个参数是单个前缀的字符串或数组获取前缀列表。
第四个参数是 kebab-case 或 kebab-case 的联合类型 camelCase.

组件 Angular 和 WebStorm 的自定义前缀

Custom prefix for components Angular and WebStorm

webstorm

typescript

angular