I initially started a few months ago a project in Angular using Visual Studio Code editor.
Today I made the switch to WebStorm and I also upgraded my project to Angular 4.0.
While my project is running nice without any errors, I receive the following error in 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)
Following that link I realized that is a good practice to add a custom prefix to component selector to prevent name collisions with components in other apps and with native HTML elements
I understand that. My question is why am I forced to use the app prefix and not other prefix? If I put other prefix then app, WebStorm will mark the line as error.
According to the style guide from that 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.
I can use whatever prefix I want. Is there a rule on the prefix name?
As far as I know, there are no strict rules on prefix name. If you are using the CLI, you can edit the prefix node under apps in the angular-cli.json. This will make the cli create new components with whatever prefix you decide. For tslint.json you can set both component and directive rules:
"directive-selector": [true, "attribute", "app", "camelCase"],
"component-selector": [true, "element", "app", "kebab-case"],
Hope this helps.
EDIT
If you want to use more than one prefix, you can specify them in an array like this(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 or
element.kebab-case or
camelCase.