react/jsx-pascal-case is not enforcing components name

[nageshwari17]

Hi ,

I am building a react app with v16.13.1

I am trying to enforce that component name should in pascal case . To do that I have added react/jsx-pascal-case . even adding this rule also its not validating it. I can do component naming convention like camelCase, PascalCase, and snake-case ,all lower case. please find below config for .eslintrc and package.json

.eslintrc.json { "env": { "browser": true, "jest": true, "es6": true, "node": true }, "parser": "babel-eslint", "extends": ["airbnb", "prettier"], "plugins": ["prettier", "unicorn"], "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }], "import/order": ["error", { "groups": ["builtin", "external", "parent", "sibling", "index"] }], "camelcase": 0, "react/jsx-pascal-case": [2, {"allowAllCaps": true, "allowNamespace": true}] }, "parserOptions": { "ecmaFeatures": { "jsx": true } } }

package.json

{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@babel/core": "7.9.0", "@date-io/date-fns": "^1.3.13", "@hookform/resolvers": "^1.0.0", "@loadable/component": "^5.13.2", "@svgr/webpack": "4.3.3", "aws-amplify": "^3.3.2", "aws-amplify-react": "^4.2.6", "babel-eslint": "10.1.0", "babel-jest": "^24.9.0", "babel-loader": "8.1.0", "babel-plugin-named-asset-import": "^0.3.6", "babel-plugin-transform-require-context": "^0.1.1", "babel-preset-react-app": "^9.1.2", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", "css-loader": "3.4.2", "eslint-config-react-app": "^5.2.1", "eslint-loader": "3.0.3", "eslint-plugin-flowtype": "4.6.0", "react": "^16.13.1", "react-dev-utils": "^10.2.1", "react-dom": "^16.13.1", "react-hook-form": "^7.0.7", "react-router-dom": "^5.2.0",, "resolve": "1.15.0" }, "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "lint": "eslint src", }, "babel": { "presets": [ "react-app" ] }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/parser": "^2.10.0", "eslint": "^7.10.0", "eslint-config-airbnb": "^18.2.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "^7.21.3", "eslint-plugin-react-hooks": "^4.1.2", "eslint-plugin-unicorn": "^32.0.1" } }

and My folder structed as below:

src/components/header/index.js.

Please help me with this .

[ljharb]

What code is being warned on?

[nageshwari17]

@ljharb I am not getting any warning / error with related this rule

[ljharb]

OK, what code is not being warned on that should be? I need code :-)

[nageshwari17]

@ljharb Sorry for delay

please find below code

components/header/index.js

const header_nav = () => {
  return (
    <div>
      hello header
    </div>
  );
};

and importing into App.js

import header_nav from './components/header';

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <header_nav />
      </header>
    </div>
  );
};

with above code its not giving any warning/error with pascal-case rule.

[ljharb]

That's because header_nav is an invalid tag name - the pascal-case rule only checks custom components, and something that starts with a lowercase letter is an HTML element. React itself will warn you when you try to render this.

The eslint no-unused-vars rule should be warning you here that header_nav is unused.

[nageshwari17]

@ljharb How can I make React warning into error. I mean without fixing this server should not run . Please help me with this .

[ljharb]

That's what unit tests are for.

However, as I said, you can enable the no-unused-vars eslint rule. If you use https://npmjs.com/eslint-config-airbnb it'll already be enabled for you.

[ljharb]

This seems answered.