### Install ESLint Config and Run Postinstall Script

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Installs the Skyscanner ESLint configuration package. Upon installation, a postinstall script automatically creates `.eslintrc.json` and `.prettierrc` files and suggests relevant npm scripts for linting and formatting.

```bash
npm install @skyscanner/eslint-config-skyscanner

# Output:
# We created `.eslintrc.json` for you.
# We created `.prettierrc` for you.
# All done, we suggest you add the following npm scripts to your package.json:
#   "lint:js": "eslint . --ext js,jsx",
#   "lint:js:fix": "eslint . --ext js,jsx --fix",
#   "prettier": "prettier --config .prettierrc --write \"**/*.{js,jsx}\""
```

--------------------------------

### Install ESLint Config

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/README.md

Installs the shareable ESLint configuration for Skyscanner as a development dependency using npm. After installation, extend this configuration in your `.eslintrc` file.

```bash
npm install --save-dev @skyscanner/eslint-config-skyscanner
```

--------------------------------

### Browser Compatibility Validation using Fetch API

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Demonstrates correct usage of the Fetch API, validated against the project's 'browserslist' configuration. The 'compat' ESLint plugin will flag incorrect usage of browser APIs. This example shows a safe way to fetch data. Incorrect usage example is commented out.

```javascript
// api.js - Browser compatibility validation
// The compat plugin validates APIs against browserslist

// ✗ Incorrect: May fail if target browsers don't support fetch
// fetch('/api/data').then(res => res.json());

// ✓ Correct: Using supported APIs based on browserslist
export const fetchData = async () => {
  try {
    const response = await fetch('/api/data');
    return await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    return null;
  }
};

// If server-side only, disable compat entirely

```

--------------------------------

### Generated ESLint Configuration (.eslintrc.json)

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Example of the `.eslintrc.json` file automatically generated by the postinstall script. It specifies `babel-eslint` as the parser and extends the Skyscanner ESLint configuration.

```json
// Generated .eslintrc.json
{
  "parser": "babel-eslint",
  "extends": [
    "@skyscanner/eslint-config-skyscanner"
  ]
}
```

--------------------------------

### Install and Configure ESLint for JavaScript Projects

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Installs the ESLint configuration package as a dev dependency and sets up basic linting scripts in package.json for JavaScript and JSX files. It also shows how to run and fix linting issues.

```bash
# Install as a dev dependency
npm install --save-dev @skyscanner/eslint-config-skyscanner
```

```json
// .eslintrc.json
{
  "extends": ["@skyscanner/eslint-config-skyscanner"]
}
```

```json
// package.json - Add linting scripts
{
  "scripts": {
    "lint:js": "eslint . --ext js,jsx",
    "lint:js:fix": "eslint . --ext js,jsx --fix"
  }
}
```

```bash
# Run linting
npm run lint:js

# Auto-fix issues
npm run lint:js:fix
```

--------------------------------

### Configure Jest Version in ESLint (.eslintrc)

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-7-to-8.md

Manually configure the Jest version in your .eslintrc file if it's not automatically detected or installed alongside eslint-config-skyscanner. This ensures correct linting rules for your Jest setup.

```json
{
  "settings": {
    "jest": {
      "version": "VERSION"
    }
  }
}
```

--------------------------------

### Disable Postinstall Script During Installation

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Provides a method to install the ESLint configuration package without executing the postinstall script, which is useful for environments where automatic file generation is not desired.

```bash
DISABLE_SKYSCANNER_ESLINT_WITH_PRETTIER_INSTALL_SCRIPT=1 npm install
```

--------------------------------

### Generated Prettier Configuration (.prettierrc)

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Example of the `.prettierrc` file generated by the postinstall script. This configuration defines formatting rules for Prettier, including semicolons, trailing commas, and single quotes.

```yaml
# Generated .prettierrc
semi: true
trailingComma: all
singleQuote: true
```

--------------------------------

### Configure React Version in ESLint Settings

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-5-to-6.md

Manually set the React version in your .eslintrc file if the project does not use React or if it's not installed in the same package.json. This ensures ESLint correctly analyzes React code.

```json
{
  "settings": {
    "react": {
      "version": "16.4"
    }
  }
}
```

--------------------------------

### Configure ESLint for Vitest Testing Framework

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Configures ESLint to work with the Vitest testing framework by extending the appropriate configuration. It includes an example of a Vitest test file that adheres to the enforced rules, such as disallowing focused tests.

```json
// .eslintrc.json
{
  "extends": ["@skyscanner/eslint-config-skyscanner"],
  "overrides": [
    {
      "files": ["**/*.test.ts?(x)"],
      "extends": ["@skyscanner/eslint-config-skyscanner/vitest"]
    }
  ]
}
```

```typescript
// component.test.tsx - Vitest test file
import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';

import { UserCard } from './component';

describe('UserCard', () => {
  it('renders user information', () => {
    const mockUser = { id: 1, name: 'John Doe' };

    render(
      <UserCard user={mockUser} status="active">
        <span>Content</span>
      </UserCard>
    );

    expect(screen.getByText('Content')).toBeInTheDocument();
  });

  it('handles focused tests with vitest rules', () => {
    // @vitest/no-focused-tests will catch it.only usage
    const mockFn = vi.fn();
    mockFn();
    expect(mockFn).toHaveBeenCalled();
  });
});

```

--------------------------------

### Configure ESLint to Extend Skyscanner Config

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/README.md

Configures your ESLint setup to use the Skyscanner shared configuration. This involves adding the package to the 'extends' field in your .eslintrc file.

```json
// .eslintrc
{
  "extends": "@skyscanner/eslint-config-skyscanner"
}
```

--------------------------------

### ESLint Rule for Padded Blocks Configuration

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-5-to-6.md

The 'padded-blocks' ESLint rule is configured to allow single-line blocks. This provides flexibility in code formatting while maintaining a consistent style for block padding.

```json
{
  "rules": {
    "padded-blocks": ["error", "never", {"allowSingleLineBlocks": true}]
  }
}
```

--------------------------------

### React Component with Skyscanner Best Practices

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Example of a React component adhering to Skyscanner's enforced patterns, including destructured imports and specific import order. It uses Backpack UI components and PropTypes for validation. Dependencies include 'react', 'prop-types', '@skyscanner/backpack-web', and custom API functions.

```jsx
// component.jsx - React component following enforced patterns
import { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

import { BpkButton } from '@skyscanner/backpack-web/bpk-component-button';

import { fetchUserData } from '../api/users';

import styles from './component.scss';

// ✓ Correct: Destructured React imports (enforced by no-restricted-imports)
// ✗ Incorrect: import React from 'react';

// ✓ Correct: Import order follows the configured pathGroups
// 1. React/core libraries
// 2. Backpack components
// 3. Parent/sibling imports
// 4. Style files last

export const UserProfile = ({ userId, defaultName = 'Guest' }) => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUserData(userId)
      .then(setUser)
      .catch((error) => console.error(error));
  }, [userId]);

  return (
    <div className={styles.container}>
      <h1>{user?.name ?? defaultName}</h1>
      <BpkButton onClick={() => console.log('Clicked')}>
        View Profile
      </BpkButton>
    </div>
  );
};

// ✓ Correct: Using defaultArguments instead of defaultProps
UserProfile.propTypes = {
  userId: PropTypes.string.isRequired,
  defaultName: PropTypes.string,
};
```

--------------------------------

### ESLint Rule: Enforce JSDoc Validation (valid-jsdoc)

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Example of the `valid-jsdoc` rule, which enforces proper JSDoc comments for functions, including parameter types, descriptions, and return types, promoting code documentation.

```javascript
// valid-jsdoc - Enforce JSDoc validation
/**
 * Calculates the total price
 * @param {number} basePrice - The base price
 * @param {number} taxRate - The tax rate (0-1)
 * @returns {number} The total price including tax
 */
export const calculateTotal = (basePrice, taxRate) => {
  return basePrice * (1 + taxRate);
};
```

--------------------------------

### Manually Set React Version in ESLint

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/README.md

Manually specifies the React version in your .eslintrc configuration when the automatic detection fails or React is not installed in the same package.json. This ensures correct linting rules for React projects.

```json
"settings": {
  "react": {
    "version": "16.4"
  }
}
```

--------------------------------

### Enforced Import Ordering with Path Groups in TypeScript

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

An example of a TypeScript file demonstrating the enforced import order based on configured 'pathGroups'. Imports are categorized from Node built-ins, React core, external libraries, Backpack components, common packages, parent/sibling files, index files, type imports, and finally style files. Uses various libraries like 'react', 'prop-types', 'axios', 'date-fns', and Backpack components.

```typescript
// organized-imports.tsx - Correctly ordered imports
// 1. Node built-ins
import { readFile } from 'fs';
import path from 'path';

// 2. React core (external, position: before)
import { useState, useCallback } from 'react';
import PropTypes from 'prop-types';

// 3. Other external libraries
import axios from 'axios';
import { format } from 'date-fns';

// 4. Backpack components (external, position: after)
import { BpkButton } from '@skyscanner/backpack-web/bpk-component-button';
import BpkCard from 'bpk-component-card';

// 5. Common package (shared between client/server)
import { formatCurrency } from 'common/utils/currency';
import { API_BASE_URL } from 'common/config';

// 6. Parent directories
import { UserContext } from '../../context/UserContext';

// 7. Sibling files
import { Header } from './Header';
import { Footer } from './Footer';

// 8. Index (same folder)
import { config } from '.';

// 9. Type imports
import type { User, Config } from './types';

// 10. Style files (always last)
import './styles.css';
import styles from './component.scss';

export const MyComponent = () => {
  return <div>Component</div>;
};

```

--------------------------------

### ESLint Rule for Multiple Empty Lines Configuration

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-5-to-6.md

This configuration restricts the number of multiple empty lines allowed in files. It enforces a single newline at the end of files and prevents newlines at the beginning, promoting cleaner code.

```json
{
  "rules": {
    "no-multiple-empty-lines": ["error", {"max": 1, "maxEOF": 1, "maxBOF": 0}]
  }
}
```

--------------------------------

### Max Classes Per File Rule Configuration in ESLint

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-5-to-6.md

The 'max-classes-per-file' rule has been adjusted from a maximum of 1 to 3. This change acknowledges that files can contain multiple classes while still adhering to the single responsibility principle, offering more flexibility.

```json
{
  "rules": {
    "max-classes-per-file": ["error", 3]
  }
}
```

--------------------------------

### Arrow Function Parentheses Rule in ESLint

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-5-to-6.md

This rule, 'arrow-parens', enforces the use of parentheses around arrow function arguments. It is now enabled by default in config-base and can be auto-fixed. The rationale is to minimize diff churn when arguments change.

```json
{
  "rules": {
    "arrow-parens": ["error", "always"]
  }
}
```

--------------------------------

### Disable Jest Rules for Specific Files in ESLint (JSON)

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-4-to-5.md

Shows how to disable Jest-specific ESLint rules for particular files or directories using the 'overrides' property in an ESLint configuration. This allows for more granular control over rule enforcement.

```json
{
  "overrides": [{
    "files": ["test/**/*.test.js"],
    "rules": {
      "jest/valid-expect": "off"
    }
  }]
}
```

--------------------------------

### Disable Jest Rules in ESLint Configuration (JSON)

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/migration-from-4-to-5.md

Demonstrates how to disable Jest-specific ESLint rules globally within an ESLint configuration file. This is useful when using a different testing framework and wanting to avoid false positives from Jest rules.

```json
{
  "rules": {
    "jest/valid-expect": "off"
  }
}
```

--------------------------------

### Apache 2.0 License Header for New Files

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/CONTRIBUTING.md

This is a standard header required for all new files added to the repository, specifying the Apache 2.0 license. It includes copyright information and the terms of use as defined by the Apache License, Version 2.0. This ensures compliance with the project's licensing.

```javascript
/*
 Copyright 2021 Skyscanner
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 you may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
```

--------------------------------

### Publish Alpha/Beta Release using npm

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/docs/releasing.md

This process allows for testing changes before a stable release. It involves updating the version in package.json with an alpha or beta tag and then publishing to the npm registry with the appropriate tag.

```bash
npm version <provide a custom version with the alpha or beta name e.g. 10.0.0-beta.1>
npm publish --registry=https://registry.npmjs.org/ --tag alpha|beta
```

--------------------------------

### Configure ESLint for Vitest Projects

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/README.md

Sets up ESLint to use the Skyscanner configuration with specific overrides for Vitest test files. This ensures correct linting for projects utilizing Vitest.

```json
// .eslintrc
{
  "extends": ["@skyscanner/eslint-config-skyscanner"],
  "overrides": [
    {
      "files": ["**/*.test.ts?(x)"],
      "extends": ["@skyscanner/eslint-config-skyscanner/vitest"]
    }
  ]
}
```

--------------------------------

### Custom Skyscanner ESLint Rule: Use Design Tokens

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Illustrates the `backpack/use-tokens` rule, which mandates the use of design tokens (e.g., `colorSkyBlue`) from `@skyscanner/bpk-foundations-web` for consistent styling, rather than hardcoded color values.

```javascript
// backpack/use-tokens - Must use design tokens
// ✗ Incorrect
const styles = { color: '#0062E3' };

// ✓ Correct
import { colorSkyBlue } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
const styles = { color: colorSkyBlue };
```

--------------------------------

### Configure Browser Compatibility with Browserslist

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Sets up browser compatibility checks by extending the Skyscanner browserslist configuration in 'package.json'. This ensures that the 'compat' ESLint plugin validates API usage against the defined target browsers. Dependencies include 'browserslist-config-skyscanner' and '@skyscanner/eslint-config-skyscanner'.

```json
// package.json - Define browserslist for compat plugin
{
  "name": "my-app",
  "browserslist": [
    "extends browserslist-config-skyscanner"
  ],
  "devDependencies": {
    "@skyscanner/eslint-config-skyscanner": "^15.0.0",
    "browserslist-config-skyscanner": "^5.0.0"
  }
}
```

--------------------------------

### Configure ESLint for TypeScript Projects

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Extends the base ESLint configuration for TypeScript projects, including .ts and .tsx file extensions. The configuration enforces TypeScript best practices, such as using type imports and disallowing enums, promoting cleaner and more robust code.

```json
// .eslintrc.json
{
  "extends": ["@skyscanner/eslint-config-skyscanner"]
}
```

```json
// package.json
{
  "scripts": {
    "lint:js": "eslint . --ext js,jsx,ts,tsx",
    "lint:js:fix": "eslint . --ext js,jsx,ts,tsx --fix"
  }
}
```

```typescript
// example.ts - The config enforces TypeScript best practices
import type { ReactNode } from 'react';

// ✓ Correct: Using type imports (enforced by @typescript-eslint/consistent-type-imports)
import type { User } from './types';

// ✗ Incorrect: Enums are disallowed (enforced by @skyscanner/rules/no-enum)
// enum Status { Active, Inactive }

// ✓ Correct: Use const objects or union types instead
const Status = {
  Active: 'active',
  Inactive: 'inactive',
} as const;

type StatusType = typeof Status[keyof typeof Status];

interface Props {
  user: User;
  status: StatusType;
  children: ReactNode;
}

export const UserCard = ({ user, status, children }: Props) => {
  return <div>{children}</div>;
};

```

--------------------------------

### ESLint Rule: Sort Destructured Keys Alphabetically

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Demonstrates the `sort-destructure-keys` rule, which enforces alphabetical sorting of keys within object destructuring assignments for improved readability and consistency.

```javascript
// sort-destructure-keys - Alphabetically sort destructured keys
const { age, email, name, userId } = user; // ✓ Correct order
```

--------------------------------

### Configure Browser Compatibility with Skyscanner Browserslist

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/README.md

Configures browser compatibility for client-side code by extending the 'browserslist-config-skyscanner' in your package.json. This ensures your project adheres to Skyscanner's defined browser support standards.

```json
// package.json
{
  ...
  "browserslist": [
    "extends browserslist-config-skyscanner"
  ],
  ...
  "devDependencies": {
    ...
    "browserslist-config-skyscanner": "^5.0.0"
  }
}
```

--------------------------------

### Disable Browser Compatibility Plugin in ESLint

Source: https://github.com/jronald01/eslint-config-skyscanner/blob/main/README.md

Disables the 'compat/compat' rule within ESLint for projects that do not require browser compatibility checks, such as server-side only applications. This prevents irrelevant compatibility warnings.

```json
// .eslintrc
{
  extends: ['@skyscanner/eslint-config-skyscanner'],
  ...
  rules: {
    ...
    'compat/compat': 'off'
  }
}
```

--------------------------------

### Custom Rule Overrides and Disabling Rules in ESLint

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Shows how to override or disable specific ESLint rules globally or per file using '.eslintrc.json' and inline comments. This includes setting max classes per file, disallowing JSX props spreading, configuring Prettier rules, and disabling TypeScript-specific rules for test files. It also demonstrates inline disabling for specific lines or blocks.

```json
// .eslintrc.json
{
  "extends": ["@skyscanner/eslint-config-skyscanner"],
  "rules": {
    "max-classes-per-file": ["error", 5],
    "react/jsx-props-no-spreading": ["error"],
    "prettier/prettier": ["error", {
      "semi": false,
      "singleQuote": false
    }]
  },
  "overrides": [
    {
      "files": ["**/*.test.ts"],
      "rules": {
        "@typescript-eslint/no-explicit-any": "off"
      }
    }
  ]
}
```

```javascript
// disable-per-file.js - Disabling rules inline
/* eslint-disable react/jsx-props-no-spreading */
export const FormField = (props) => {
  return <input {...props} />;
};
/* eslint-enable react/jsx-props-no-spreading */

// Disable for a single line
const data = { ...oldData, ...newData }; // eslint-disable-line react/jsx-props-no-spreading

// Disable specific rule for entire file
/* eslint-disable @skyscanner/rules/no-axios */
import axios from 'axios';
export const api = axios.create({ baseURL: '/api' });

```

--------------------------------

### Custom Skyscanner ESLint Rule: No Axios Usage

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Demonstrates the Skyscanner-specific rule `no-axios`, which enforces the use of an approved HTTP client (`@skyscanner/http-client`) instead of direct `axios` imports to maintain consistency.

```javascript
// no-axios.js - Custom Skyscanner rule
// ✗ Incorrect: Direct axios usage is disallowed
// import axios from 'axios';

// ✓ Correct: Use approved HTTP client
import { httpClient } from '@skyscanner/http-client';
```

--------------------------------

### Disable Browser Compatibility Rule in ESLint

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Disables the 'compat/compat' ESLint rule for server-side code. This is done by adding an 'overrides' section to the '.eslintrc.json' file, specifically targeting files that do not require browser compatibility checks. Extends the base Skyscanner ESLint configuration.

```json
// .eslintrc.json - Disable compat for server-side code
{
  "extends": ["@skyscanner/eslint-config-skyscanner"],
  "rules": {
    "compat/compat": "off"
  }
}
```

--------------------------------

### ESLint Rule: Prevent Default React Import

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Shows the `no-restricted-imports` rule in action, preventing the default import of React (`import React from 'react'`) and enforcing named imports for React hooks and components (`import { useEffect, useState } from 'react'`).

```javascript
// no-restricted-imports - Prevent default React import
import { useEffect, useState } from 'react'; // ✓ Correct
```

--------------------------------

### Configure React Version in ESLint

Source: https://context7.com/jronald01/eslint-config-skyscanner/llms.txt

Manually set the React version for ESLint to use. This is useful when the auto-detection might be incorrect or for specific project needs. It requires the '@skyscanner/eslint-config-skyscanner' package to be extended.

```json
// .eslintrc.json - Manual React version setting
{
  "extends": ["@skyscanner/eslint-config-skyscanner"],
  "settings": {
    "react": {
      "version": "18.2"
    }
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.