How do you allow PascalCase functions not to be linted by eslint?

[sauldeleon]

Hi!

First of all, this is not an issue. Mark as question.

I have cloned your repo and tried to apply the same eslint configuration, which is awesome.

The problem I am facing is my PascalCase functions are being marked as errors by eslint, due to the following rule

      {
        selector: 'variable',
        format: ['camelCase'],
        leadingUnderscore: 'allow',
      },
      {
        selector: ['function'],
        format: ['camelCase'],
      },

So I had to add this in each project configuration:

    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": ["function"],
        "format": ["camelCase", "PascalCase"]
      }
    ]

But you dont have anything like this. I was wondering... how did you make this work??

thanks in advance!

[belgattitude]

Haha, yes it's unclear for me too.

Basically, on packages and apps I extend from a root base ./eslintrc.base.js. We don't have to, but that's how I felt as a first step.

A bit like this.

.
├── apps
│   └── web-app
│       └── .eslintrc.js   (extends eslint.base: adds react, nextjs, rtl...)
├── .eslint.base.js        (base config to extend: just typescript and jest)
├── .prettierignore        (prettier ignored files)
└── .prettierrc.js         (prettier global configuration)

This base includes generic rules and plugins that are valid for typescript typescript+jest project on which each extended config adds plugins for react, storybook, nextjs.

So you can make the change there.

Note that I added a similar exception for .tsx (I use tsx rather than ts, it allows to disambiguate if it's just plain ts or react).

See here for example:

nextjs-monorepo-example/.eslintrc.base.js

Lines 172 to 192 in 33e9d72

	{
	files: ['*.tsx'],
	rules: {
	'@typescript-eslint/naming-convention': [
	'warn',
	{
	selector: 'variable',
	format: ['camelCase', 'PascalCase'],
	},
	{
	selector: ['function'],
	format: ['camelCase', 'PascalCase'],
	},
	{
	selector: 'parameter',
	format: ['camelCase', 'PascalCase'],
	leadingUnderscore: 'allow',
	},
	],
	},
	},

The comment is not totally accurate in this file. Just realized :)

You can find some initial doc here about the eslint setup: https://github.com/belgattitude/nextjs-monorepo-example/blob/main/docs/about-linters.md

Let me know if it clears up the weird stuffs :)

[belgattitude]

Just a afterward thought ?

The problem I am facing is my PascalCase functions are being marked as errors by eslint, due to the following rule

You mean react functional components ?

[sauldeleon]

YEs! that is exactly where I am facing the issues. For example, defining a simple Button component

export const Button = () => <button>Button Text</ button>

Button is marked as error by eslint, because it is not camelCase

I think the problem is the code snippet you places about the .tsx exception, which makes total sense...

I will try again later in my code!

[sauldeleon]

@belgattitude just in case, I think I can close this as it is fixed and more than solved.

Also, I have an initial configuration for VScode environment, but on a separate repo with a ton of modifications.

I want to clone your last version and add my configuration to check everything is working as expected

Thanks again!