组件Angular和WebStorm的自定义前缀

Question

我最初几个月前使用Visual Studio Code编辑器在Angular中启动了一个项目。

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

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

  

TSLint：组件的选择器＆＃34; ConnectionStatusComponent＆＃34;   应该有前缀＆＃34; app＆＃34; （   https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-07）（组件选择器）

根据该链接，我意识到将组件选择器的自定义前缀添加到prevent name collisions with components in other apps and with native HTML elements

是一个很好的做法

我理解。我的问题是为什么我被迫使用app前缀而不是其他前缀？如果我将其他前缀添加到app，则WebStorm会将该行标记为错误。

根据该链接的风格指南：

  

对组件选择器使用自定义前缀。例如，   前缀toh表示来自英雄之旅和前缀admin   代表管理功能区。

我可以使用我想要的任何前缀。前缀名称是否有规则？

Answer 1

据我所知，前缀名称没有严格的规定。如果您使用的是CLI，则可以编辑prefix中apps下的angular-cli.json节点。这将使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或者camelCase的联合类型 $this->batchInsert('category', ['name'], [['category1'], ['category2'], ['category3']]); 。