#atom

Code formatting rules integrated directly into ESLint

Core Idea: ESLint Stylistic is a collection of formatting rules that handle code style directly within ESLint, providing an alternative to separate formatting tools like Prettier by embedding stylistic consistency enforcement in the linting process.

Key Elements

• Key Features:

  • Integrated formatting within the linting workflow
  • Fine-grained control over stylistic preferences
  • Automatic fixing capabilities
  • Configurable rules for personal or team preferences
  • No need for separate formatting tools

• Core Rule Categories:

  • Whitespace: Indentation, spaces, line breaks
  • Punctuation: Semicolons, commas, quotes
  • Syntax: Brackets, parentheses, braces
  • Layout: Line length, wrapping, alignment
  • Naming: Casing conventions, prefixing

• Advantages Over Separate Formatters:

  • Single tool for both logical and stylistic rules
  • More granular control over formatting decisions
  • Reduced configuration conflicts
  • Context-aware formatting
  • Ability to disable specific rules for certain code sections

• Implementation Example:

  // .eslintrc.js with stylistic rules
  module.exports = {
    extends: [
      'eslint:recommended',
      '@eslint/js',
      'plugin:@stylistic/recommended-extends'
    ],
    plugins: [
      '@stylistic'
    ],
    rules: {
      // Stylistic rules
      '@stylistic/indent': ['error', 2],
      '@stylistic/quotes': ['error', 'single'],
      '@stylistic/semi': ['error', 'always'],
      '@stylistic/comma-dangle': ['error', 'never'],
      '@stylistic/object-curly-spacing': ['error', 'always'],
      '@stylistic/arrow-parens': ['error', 'as-needed'],
      '@stylistic/max-len': ['warn', { 'code': 100 }]
    }
  };
  

- **Common Rule Configurations**:
    - **Indentation**: Spaces vs. tabs, size (2 or 4 spaces)
    - **Quotes**: Single vs. double quotes
    - **Semicolons**: Required vs. omitted
    - **Commas**: Trailing commas in multiline
    - **Spacing**: Around braces, brackets, operators
    - **Line length**: Maximum characters per line
    - **Line breaks**: Where to enforce line breaks

## Connections

- **Related Concepts**: ESLint (the parent tool), ESLint Rules (general concept of linting rules)
- **Broader Context**: Code Formatters (alternative approach to code styling)
- **Applications**: Code Quality Automation Workflow (part of automated styling)
- **Components**: ESLint Configurations (how stylistic rules are applied)

## References

1. ESLint Stylistic Plugin: https://eslint.style/
2. "Why I Don't Use Prettier" by Anthony Fu
3. "Linting vs. Formatting: Finding the Right Balance" by Nicholas C. Zakas

#eslint #code-style #formatting #javascript #typescript

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