ember-cli / ember-cli/eslint-plugin-ember

New rule proposal: require-components-imports-pascal-case

Open
#1,961 2 comments 0 reactions 0 assignees View on GitHub
New Rule
Dominant language
JavaScript
Stars
263
Forks
214
Avg merge
30m
Merged PRs (30d)
5

Description

In alignment with the "[no-arguments-for-html-elements](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-arguments-for-html-elements.md)." rule, we shall mandate that component imports in .gjs/.gts files follow PascalCase, instead of camelCase or any other casing. By following this approach, we can guarantee that we won't come across the error caused by casing at a later time.

Basically, by employing camelCase for component imports, we might encounter an error, ex:
![image](https://github.com/ember-cli/eslint-plugin-ember/assets/47329950/5508db1a-7c6c-4de2-a152-5228f7969111)
![image](https://github.com/ember-cli/eslint-plugin-ember/assets/47329950/ff362a1b-0a05-4ad1-ad57-733502155912)
![image](https://github.com/ember-cli/eslint-plugin-ember/assets/47329950/95d214a0-c7ec-4bed-bf04-9c7b6c3a643a)

// bad
```
import imageComponent from 'image/components/image-component';
import toggleButtonV2 from 'Buttons/components/toggles'
import something from 'x/components/y/z';
```

// good
```
import ImageComponent from 'image/components/image-component';
import { generateToken } from 'xxx/utils/tracking'; // not a component
```

The new rule will inspect whether the import pertains to a component. If it does, it will verify that the import is in PascalCase. Any component import in camel case or other casings will trigger an error.

Basically, the `ImportDeclaration` will be utilized to determine if an import comes from components (contains "components" in `node.source.value`) and subsequently assess whether the import (something like `specifier.local.name `)adheres to PascalCase.

Additional consideration: we have the option to allow configuration of the import path, with the default set to 'components.'
` rules: {
'ensure-components-imports-pascal-case': [
'error',
{
importPaths:['**/components/**', 'xxx']
},
],
}`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.