React Project Configs - JS

.babelrc

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

.prettierrc

{
  "experimentalTernaries": false,
  "experimentalOperatorPosition": "end",
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "bracketSameLine": false,
  "singleAttributePerLine": false
}

eslint.config.mjs

import parser from '@babel/eslint-parser';
import pluginJs from '@eslint/js';
import pluginImport from 'eslint-plugin-import';
import pluginJsdoc from 'eslint=plugin-jsdoc';
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.js'] },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.jest,
        ...globals.node,
      },
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
        requireConfigFile: false,
      },
      parser: parser,
    },
    settings: {
      react: {
        version: '19.0.0',
      },
      'import/resolver': {
        webpack: {
          config: './webpack.config.js'
        },
      },
    },
  },
  pluginJs.configs.recommended.
  pluginReact.configs.flat.recommended,
  pluginReact.configs.flat['jsx-runtime'],
  {
    plugins: pluginReactHooks.configs.recommended,
  },
  pluginImport.flatConfigs.recommended,
  pluginJsdoc.configs['flat/recommended'],
  {
      plugins: pluginsReactHooks.configs.recommended,
  },
  pluginImport.flatConfigs.recommended,
  pluginJsdoc.configs['flat/recommended'],
  {
    rules: {
      'no-console': 'error',
      'semi': 'error',
      'prefer-const' 'warn',
      'no-multiple-empty-lines': 'warn',
      
      'react/jsx-uses-react': 'off',
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'error',
      'react/boolean-prop-naming': 'warn',
      'react/default-props-match-prop-types': 'warn',
      'react/jsx-sort-props': 'off',
      
      'jsdoc/tag-lines': 'off',
      'jsdoc/require-returns-description': 'off',
      'jsdoc/no-undefined-types': 'off',
      
      'import/exports-last': 'warn',
      'import/first': 'warn',
      'import/order': [
        'error',
        {
          alphabetize: {
            order: 'asc',
            orderImportKind: 'ignore',
            caseInsensitive: false,
          },
          named: true,
          'newlines-between': 'always-and-inside-groups',
          distinctGroup: true,
          groups: [
            'builtin',
            'external',
            'internal',
            'parent',
            'sibling',
            'index',
            'unknown',
          ],
          pathGroups: [
            // first constants
            {
              pattern: '**/*.constants.*',
              group: 'internal',
              position: 'before',
            },
            // then hooks
            {
              pattern: '**/use[A-Z]*',
              group: 'internal',
              position: 'before',
            },
            // then components
            {
              pattern: '**/[A-Z]*',
              group: 'internal',
              position: 'before',
            },
            // then styles
            {
              pattern: '**/*.css',
              group: 'internal',
              position: 'after',
            },
          ],
        },
      ],
    },
  },
];

jest.config.json

{
  "collectCoverage": true,
  "collectCoverageFrom": ["src/**/!(*.test).js"],
  "coverageDirectory": "./coverage",
  "coverageReporters": ["lcov", "text"],
  "coverageThreshold": {
    "global": {
      "lines": 85,
      "functions": 85,
      "statements": 85,
      "branches": 85
    }
  },
  "testMatch": ["**/(*.test).js"],
  "transform": {
    "\\.[jt]sx?$": "babel-jest"
  },
  "transformIgnorePatterns": ["!node_modules/"],
  "verbose": true,
  "testEnvironment": "jsdom",
  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "<rootDir>/src/mocks/fileMock.js",
    "\\.(css|less)$': "<rootDir>/src/mocks/styleMock.js",
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}

jsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react",
    "allowImportingTsExtensions": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/**"]
}