pd-eslint-config

pd-eslint-config is a shared ESLint configuration designed for React projects, including commonly used plugins and rule sets.

Features

• Supports ECMAScript 2020 and JSX syntax
• Automatically detects React version
• Supports module alias resolution
• Includes React, React Hooks, Import, and JSX Accessibility (a11y) plugins
• A carefully crafted set of rules to improve code quality and consistency

Installation

Ensure the following dependencies are installed:

npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y --save-dev

Then clone or download the pd-eslint-config repository into your project.

Usage

1. Import the pd-eslint-config configuration file into your project.
2. Ensure your project's ESLint configuration file uses pd-eslint-config/eslint.config.js.

Configuration Example

In your project's ESLint configuration file, use the following code:

// eslint.config.js

import sharedConfig from 'pd-eslint-config/eslint.config.js';

export default sharedConfig;

Customizing Module Aliases

pd-eslint-config supports module aliases by default. You can customize them in the settings section as needed. For example:

settings: {
  'import/resolver': { // 匹配你需要的縮寫
    alias: {
      map: [
        ['Api', './src/api'],
        ['Assets', './src/assets'],
        ['Components', './src/components'],
        ['Commons', './src/components/commons'],
        ['Contexts', './src/contexts'],
        ['Features', './src/features'],
        ['Pages', './src/pages'],
        ['Router', './src/router'],
        ['Store', './src/store'],
        ['Hooks', './src/hooks'],
      ],
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
  },
},

ESLint Rules Overview

Here are some of the key rules included in this configuration:

• Basic JavaScript Rules

  • Disallow var: 'no-var': 'error'
  • Suggest using const: 'prefer-const': 'error'
  • Enforce semicolons: semi: ['error', 'always']
  • Use single quotes: quotes: ['warn', 'single']

• React Rules

  • Only allow JSX in .jsx or .tsx files: 'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }]
  • Explicitly declare boolean properties: 'react/jsx-boolean-value': ['error', 'always']
  • Warn against using strings as refs: 'react/no-string-refs': 'warn'

• Import Rules

  • Disallow unresolved modules: 'import/no-unresolved': ['error', { caseSensitive: false }]
  • Enforce grouped import order: 'import/order': ['error', { groups: ['builtin', 'external', 'internal'] }]

• Accessibility Rules

  • Require alt attributes on images: 'jsx-a11y/alt-text': 'error'
  • Warn against autofocus: 'jsx-a11y/no-autofocus': 'warn'

Contribution

If you have suggestions or feedback, feel free to submit an issue or a pull request.

License

This project is licensed under the MIT License.