eslint not identifying prettier issues in jsx files

Question

Following a tutorial on youtube, I have integrated eslint and prettier to my reactjs project. I have then defined a lint command in my package.json file.

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "react-app",
    "react-app/jest",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

.prettierrc.json

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.6.9",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "ag-grid-community": "^28.1.1",
    "ag-grid-react": "^28.1.1",
    "antd": "^4.22.7",
    "graphql": "^16.6.0",
    "lodash": "^4.17.21",
    "mobx": "^6.6.1",
    "mobx-react-lite": "^3.4.0",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.36.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.7.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.8.4"
  }
}

Test1.jsx

function Test1() {
  return (
    <div
      style={{
        padding: "20px",
      }}
    >
      Test 1
    </div>
  );
}

export default Test1;

• As you can see, there are double quotes in the file.
• When I run npm run lint, no errors are being reported even though the file has double quotes.
• Also, I have changed the tabWidth to 4 in prettierrc and run this command again.
• Even tabWidth is not being reported as an error for the Test1.jsx file.
• What I have observed is errors in only js files are begin reported.

Need help in identifying why? Thanks

Answer 1

The problem is that eslint is not affecting .jsx files by default. You can fix that by using the ext flag:

eslint . --ext .js,.jsx