ESLint Configuration Guide for Clean Code

1. Destructuring

• Prefer Destructuring: Always destructure objects and arrays when accessing multiple properties or elements to improve readability and reduce redundancy.

  // Bad
  const name = person.name;
  const age = person.age;
  
  // Good
  const { name, age } = person;

2. Spacing and Style

• Arrow Function Spacing: Ensure there's space before and after the arrow in arrow functions for readability.

  // Bad
  const add=(a, b)=>a+b;
  
  // Good
  const add = (a, b) => a + b;

• Arrow Body Style: Always include braces around the body of arrow functions for clarity, even if it's a single expression.

  // Bad
  const greet = name => `Hello, ${name}`;
  
  // Good
  const greet = name => {
    return `Hello, ${name}`;
  };

• Curly Braces: Use curly braces for all control statements (if, else, for, while, etc.), even if the body contains only a single statement.

  // Bad
  if (isValid) console.log('Valid');
  
  // Good
  if (isValid) {
    console.log('Valid');
  }

3. Code Structure

• No Else Return: Avoid using else when an if block contains a return statement.

  // Bad
  function getResult(score) {
    if (score > 50) {
      return 'Pass';
    } else {
      return 'Fail';
    }
  }
  
  // Good
  function getResult(score) {
    if (score > 50) {
      return 'Pass';
    }
    return 'Fail';
  }

4. Imports and Exports

• Sort Imports: Keep imports sorted and separated by newline based on the type and source. Use the specified groups and ordering to maintain consistency and improve readability.

• No Duplicates: Ensure there are no duplicate imports. Combine imports from the same module into a single statement.

• Newline After Import: Always have a newline after the last import statement to separate imports from the rest of the code logically.

5. React Specific

• Rules of Hooks: Only call Hooks at the top level of your React function components or custom hooks. Don’t call Hooks inside loops, conditions, or nested functions.

• Key Prop in Lists: Always provide a unique key prop to each component in a list to help React identify which items have changed, are added, or are removed.

• No Constructed Context Values: Avoid passing objects or arrays directly as values in Context Providers to prevent unnecessary re-renders.

6. TypeScript Specific

• Consistent Type Imports: Use consistent type imports (import type). This helps in distinguishing types from regular imports and can aid in optimizing the build process.

• No Unused Variables: Ensure there are no variables, functions, or imports that are declared but not used within your code to keep the codebase clean and efficient.

7. Miscellaneous

• No Multiple Empty Lines: Limit the use of multiple empty lines to improve code readability and maintain a clean codebase.

• Prefer const Over let and var: Use const for all of your references; avoid using var. If you must reassign references, use let instead of var.

Best Practices

• Regularly Run ESLint: Integrate ESLint into your development workflow to catch and fix issues early. Consider setting up pre-commit hooks using tools like Husky to lint your code automatically before committing.

• Review ESLint Warnings and Errors: Regularly review and address warnings and errors identified by ESLint. This practice helps in maintaining a high code quality and adheres to best practices consistently.

• Update ESLint Configuration as Needed: As your project evolves, so might your coding standards. Regularly review and update your ESLint configuration to reflect the current best practices and project requirements.

Adhering to these guidelines will help in maintaining a consistent and clean codebase, making it easier to read, maintain, and scale your project.