#atom

Shareable and customizable rule sets for JavaScript and TypeScript linting

Core Idea: ESLint configurations are collections of rules and settings that define code style and quality standards, which can be shared, extended, and customized across projects to ensure consistent development practices.

Key Elements

• Configuration Formats:

  • JavaScript file (.eslintrc.js)
  • JSON file (.eslintrc.json)
  • YAML file (.eslintrc.yml)
  • package.json "eslintConfig" property
  • Inline comments for file-specific rules

• Key Components:

  • env: Define global variables from environments
  • extends: Use shared configurations
  • plugins: Add third-party rule sets
  • parser: Specify code parsing options
  • rules: Define individual rule settings
  • overrides: Apply different rules to specific files

• Popular Shareable Configs:

  • eslint:recommended: ESLint's built-in recommended rules
  • plugin:react/recommended: React-specific rules
  • airbnb: Airbnb's strict JavaScript style guide
  • standard: StandardJS ruleset
  • @typescript-eslint/recommended: TypeScript-specific rules
  • prettier: Integration with Prettier formatter

• Custom Configuration Examples:

// Comprehensive .eslintrc.js example
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es2022: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: [
    'react',
    '@typescript-eslint',
    'import',
  ],
  rules: {
    'no-console': 'warn',
    'react/prop-types': 'off',
    'import/order': ['error', {
      'groups': ['builtin', 'external', 'internal'],
      'newlines-between': 'always',
      'alphabetize': { 'order': 'asc', 'caseInsensitive': true }
    }]
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
  overrides: [
    {
      files: ['*.test.js', '*.spec.js'],
      env: {
        jest: true,
      },
      rules: {
        'no-console': 'off',
      }
    }
  ]
};

• Advanced Features:
  • Rule severity levels (off/0, warn/1, error/2)
  • Custom rule options with array syntax
  • File-specific configurations with overrides
  • Processor configurations for non-JavaScript files
  • Cascading configurations across directories

Repositories

• https://github.com/antfu/eslint-config

Connections

• Related Concepts: ESLint (the tool that uses these configurations), antfu/eslint-config (popular shareable config)
• Broader Context: Code Style Guides (formalized as ESLint configurations)
• Applications: Continuous Integration (enforcing standards in CI pipelines)
• Components: ESLint Rules (individual linting checks), ESLint Plugins (extensions to core functionality)

References

1. ESLint Configuration Documentation: https://eslint.org/docs/latest/use/configure/
2. "Mastering ESLint" by Nicholas C. Zakas
3. "JavaScript Style Guides and ESLint" by Airbnb Engineering

#eslint #javascript #typescript #code-style #configuration

Connections:

Sources:

• From: Syntax - Lint como un desarrollador senior con eslint + husky + lint staged + acciones de github