akveo / styleguide

5 stars 5 forks source link

[Rules | TS]: Add rule 'naming-convention' #14

Closed malashkevich closed 2 years ago

malashkevich commented 2 years ago

Rules: https://github.com/akveo/styleguide/blob/master/typescript.md#naming-style-

It was proposed the following setting:

{
  '@typescript-eslint/naming-convention': [
    'error',
    {
      selector: [ 'class', 'interface', 'enum', 'typeParameter', 'typeAlias' ],
      format: [ 'PascalCase' ],
    },
    {
      selector: [
        'classMethod',
        'classProperty',
        'typeProperty',
        'typeMethod',
        'enumMember',
        'typeAlias',
        'parameter',
      ],
      format: [ 'camelCase' ],
    },
    {
      selector: 'function',
      format: [ 'camelCase' ],
    },
    {
      selector: 'variable',
      format: [ 'camelCase', 'UPPER_CASE' ],
    },
  ],
}

But it should support also UPPER_CASE enums. Also, there is a question regarding type alias: it could be both camelCase and PascalCase (@sashaqred please provide an example)

sashaqred commented 2 years ago

question regarding type alias: it could be both camelCase and PascalCase

1) PascalCase for type alias is a good thing, for sure. For example, you have interface MyResponse for some HTTP method, but after some refactoring, you split it into 2 different interfaces:

interface MyResponseSuccess {}
interface MyResponseError {}
type MyResponse = MyResponseSuccess | MyResponseError;

2) We use camelCase for type alias, but I have mixed feelings about it. In our ngrx actions we use it like that:

export const loadFancyAction = createAction('[Module] Load Fancy', props<{a: string, b: number}>());
export type loadFancyAction = ActionType<typeof loadFancyAction>;

And in the effects file, it could be like that

export class FancyEffects {

  loadFancy$ = createEffect(() => this.actions$.pipe(
    ofType(loadFancyAction), // ⬅️ Used as value here
    switchMap(({a, b}: loadFancyAction) => this.fancyService.load(a, b),
    // Used as type here ⬆️
   ...
  );

  ...
}

Looks valid and useful, but also a bit weird for me.

sashaqred commented 2 years ago
{
  selector: 'function',
  format: [ 'camelCase' ],
},

Also, I'd like to add PascalCase to function. At least all angular decorators have such style https://angular.io/api/core/Component

sashaqred commented 2 years ago

Is it possible to make enumMember like variable with format: ['camelCase', 'UPPER_CASE']?

malashkevich commented 2 years ago

I'm still thinking that PascalCase is more suitable than camelCase:

enum Color {
  Red,
  Green,
  Blue
}
sashaqred commented 2 years ago

I'm still thinking that PascalCase is more suitable than camelCase

Yeah, kind of typo about camelCase. PascalCase is better)