ESLint Config Package

This package provides a predefined ESLint configuration for TypeScript projects, along with a set of related packages. It helps enforce code style, best practices, and error detection in your TypeScript codebase. The configuration is based on popular packages such as eslint-config-airbnb, eslint-plugin-react, and eslint-plugin-prettier.

How to Install

To use this ESLint configuration in your project, follow these steps:

1. Make sure you have Node.js installed on your system.
2. Install the npm package by running the following command:

$ yarn add eslint-config-slay-react

3. Install the npm package peer dependencies by running:

$ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unused-imports

4. Create an .eslintrc.json file in your project's root directory.

5. Copy and paste the following configuration into the .eslintrc.json file:

{
  "extends": [
    "eslint-config-slay-react"
  ],
  // ...add other custom configurations
}

Rule Explanation

• @typescript-eslint/no-shadow: This rule ensures that variables and parameters in TypeScript do not have the same name as variables in outer scopes. It prevents shadowing of variables, which can lead to confusion and bugs. For example:

// Bad
const x = 5;
function foo(x: number) {
  // 'x' shadows the outer variable
}

// Good
const outerX = 5;
function foo(innerX: number) {
  // Use a different name for the parameter
}

import/no-unresolved: This rule disables the check for unresolved imports. It allows imports that may not have corresponding files or modules. For example:

// No error thrown even if the module is unresolved
import { SomeComponent } from 'some-module';

• import/extensions: This rule enforces the file extensions to be specified or omitted for different types of imports. In the provided configuration, it throws an error for imports without specified extensions, except for json, svg, and png file types. For example:

// Error: Extension '.tsx' is required
import MyComponent from './MyComponent';

// No error thrown for JSON files
import data from './data.json';

• unused-imports/no-unused-imports: This rule warns about unused imports in the code. It helps keep the code clean and ensures that all imported dependencies are actually used. For example:

// Warning: 'unusedVar' is imported but not used
import { unusedVar } from './utils';

// No warning if the import is used
import { usedVar } from './utils';
console.log(usedVar);

• react/jsx-filename-extension: This rule enforces the file extensions for JSX files in React components. In the provided configuration, it allows JSX syntax in files with .ts and .tsx extensions. For example:

// Valid file extension for JSX syntax
function MyComponent() {
  return <div>Hello, JSX!</div>;
}

• react/prop-types: This rule disables the requirement of defining prop types in React components. It allows the usage of TypeScript or other type systems for prop type checking instead. For example:

// No error thrown for missing prop types
interface MyComponentProps {
  name: string;
}

function MyComponent(props: MyComponentProps) {
  return <div>Hello, {props.name}!</div>;
}

• no-shadow:: This rule is disabled in the configuration ("off"). It allows variables to be redeclared in inner scopes, potentially shadowing variables from outer scopes. For example:

// No error thrown, 'x' in the inner scope shadows the outer 'x'
const x = 5;
function foo() {
  const x = 10;
  console.log(x); // Prints 10
}

• space-before-blocks: This rule enforces a space before the opening brace of blocks. It improves readability and consistency in the code. For example:

// Error: Missing space before the opening brace
if (condition){
  // ...
}

// Corrected code with a space before the opening brace
if (condition) {
  // ...
}

• react/require-default-props: This rule disables the requirement of default props in React components. It allows components without default values for props. For example:

// No error thrown for missing default prop
interface MyComponentProps {
  name: string;
  age?: number;
}

function MyComponent(props: MyComponentProps) {
  // ...
}

• no-void: This rule disables the use of the void operator. It allows the usage of void for its intended purpose of discarding the return value of an expression. For example:

// No error thrown for using 'void' to discard the return value
void doSomething();

• react-hooks/exhaustive-deps: This rule disables the requirement to list all dependencies in the dependency array of React useEffect and useCallback hooks. It allows omitting dependencies, which can lead to less optimal performance or stale closures. For example:

// No error thrown for not listing all dependencies
useEffect(() => {
  // ...
}, []);

// Warning: Dependency 'name' should be listed
useEffect(() => {
  // ...
}, [name]);

• @typescript-eslint/no-use-before-define: This rule warns about using variables before they are defined. It helps catch potential reference errors and promotes code readability. For example:

// Warning: 'x' is used before it is defined
console.log(x);
var x = 5;

• import/prefer-default-export: This rule warns when a module exports a single named export instead of a default export. It encourages the use of default exports for clarity and consistency. For example:

// Warning: Prefer using 'export default' for a single export
export const myFunction = () => {
  // ...
};

• global-require: This rule warns against using the require function globally. It encourages the use of ES modules and import syntax instead. For example:

// Warning: Avoid using 'require' globally
const module = require('some-module');

• default-param-last: This rule is disabled in the configuration ("off"). It allows default parameters to be defined anywhere in the parameter list. For example:

// No error thrown, default parameter defined before a required parameter
function greet(name = 'Guest', age) {
  // ...
}

• no-underscore-dangle: This rule disables the prohibition of dangling underscores (_) in variable and function names. It allows the use of underscores as part of the identifier. For example:

// No error thrown for using underscores in variable names
const _privateVariable = 5;

// No error thrown for using underscores in function names
function _privateFunction() {
  // ...
}

• unused-imports/no-unused-vars: This rule warns about unused variables and arguments, including those prefixed with an underscore (_). It helps identify unused code and promotes code cleanliness. For example:

// Warning: 'unusedVar' is declared but not used
const unusedVar = 5;

// No warning for using underscore-prefixed variable
const _unusedVar = 5;

• @typescript-eslint/no-unused-vars: This rule warns about unused variables in TypeScript code. It complements the no-unused-vars rule by providing additional checks specific to TypeScript. For example:

// Warning: 'unusedVar' is declared but not used
const unusedVar: number = 5;

// No warning for using 'unusedVar'
console.log(unusedVar);

• no-unused-vars: This rule warns about unused variables in JavaScript code. It helps identify unused variables and encourages code cleanup. For example:

// Warning: 'unusedVar' is defined but never used
const unusedVar = 5;

// No warning for using 'unusedVar'
console.log(unusedVar);

• react/jsx-no-bind: This rule warns against using arrow function bindings (() =>) in JSX props. It encourages using inline arrow functions only when necessary to avoid unnecessary re-rendering of components. For example:

// Warning: Avoid using arrow function bindings in JSX props
<button onClick={() => console.log('Clicked!')}>Click Me</button>