Style Guide Configurations

/**
 * ESNext Style Guide ESLint configuration
 * Accessible as: "esnext/style-guide" or "recommended/esnext/style-guide"
 */
plugins:
  - babel                 # Babel-specific style rules

rules:
  # Array formatting
  array-bracket-spacing: [error, always]           # Require spaces inside array brackets
  
  # Arrow function formatting  
  arrow-parens: [error, as-needed]                  # Require parens around arrow function params as needed
  arrow-spacing: error                              # Require spaces around arrow function arrows
  
  # Block formatting
  babel/generator-star-spacing: error               # Enforce spacing around generator function asterisk
  block-spacing: error                              # Require spaces inside single-line blocks
  brace-style: error                               # Enforce one true brace style
  
  # Variable naming
  camelcase: [error, { properties: never }]        # Require camelCase, ignore properties
  
  # Comma formatting
  comma-dangle: [error, always-multiline]          # Require trailing commas in multiline
  comma-spacing: error                             # Require spaces after commas
  comma-style: error                               # Enforce comma placement
  
  # Property access
  computed-property-spacing: error                 # Disallow spaces inside computed properties
  consistent-this: error                           # Enforce consistent naming for 'this'
  
  # Control statements
  curly: [error, multi]                           # Require braces for multi-line blocks
  dot-location: [error, property]                 # Require dot on same line as property
  
  # Function calls
  func-call-spacing: error                        # Disallow spacing between function name and parens
  
  # Import formatting
  import/extensions: error                        # Require file extensions in imports
  import/imports-first: error                     # Require imports at top of file
  import/newline-after-import: error              # Require newline after imports
  
  # Indentation  
  indent: [error, tab, { SwitchCase: 1 }]         # Require tab indentation with switch case indent
  
  # Object formatting
  key-spacing: error                              # Require consistent spacing around object keys
  keyword-spacing: error                          # Require spaces around keywords
  
  # Line formatting
  linebreak-style: error                          # Enforce consistent line breaks
  newline-per-chained-call: error                 # Require newlines for chained calls
  
  # Spacing rules
  no-extra-parens: warn                           # Warn on unnecessary parentheses
  no-multi-spaces: error                          # Disallow multiple consecutive spaces
  no-trailing-spaces: error                       # Disallow trailing whitespace
  no-whitespace-before-property: error            # Disallow whitespace before properties
  
  # Object formatting
  object-curly-newline: error                     # Enforce consistent line breaks inside braces
  object-curly-spacing: [error, always]          # Require spaces inside object braces
  object-property-newline: warn                   # Warn on object properties on same line
  
  # Variable declarations
  one-var-declaration-per-line: error             # Require newlines for variable declarations
  
  # Operators
  operator-linebreak: [error, before]            # Require operators at beginning of line
  
  # Property names
  quote-props: [error, as-needed]                 # Require quotes around properties as needed
  quotes: [error, single, {                      # Require single quotes
    avoidEscape: true,                            # Allow double quotes to avoid escaping
    allowTemplateLiterals: true                   # Allow template literals
  }]
  
  # Spacing
  rest-spread-spacing: error                      # Disallow spaces in rest/spread operators
  
  # Semicolons
  semi: [error, never]                           # Disallow semicolons
  semi-spacing: error                            # Require consistent semicolon spacing
  
  # Import sorting
  sort-imports: error                            # Require sorted imports
  
  # Block spacing  
  space-before-blocks: error                     # Require space before blocks
  space-before-function-paren: error             # Require space before function parentheses
  space-in-parens: error                         # Disallow spaces inside parentheses
  space-infix-ops: error                         # Require spaces around infix operators
  space-unary-ops: error                         # Require spaces around unary operators
  
  # Comments
  spaced-comment: error                          # Require spaces in comments
  
  # Template literals
  template-curly-spacing: [error, always]       # Require spaces inside template literal braces
  
  # JSDoc
  valid-jsdoc: warn                              # Warn on invalid JSDoc comments

/**
 * Node.js Style Guide ESLint configuration
 * Accessible as: "node/style-guide" or "recommended/node/style-guide"
 */
extends: esnext/style-guide    # Inherit all ESNext style guide rules

/**
 * React Native Style Guide ESLint configuration  
 * Accessible as: "react-native/style-guide" or "recommended/react-native/style-guide"
 */
extends: esnext/style-guide    # Inherit all ESNext style guide rules

# .eslintrc.yaml
extends:
  - esnext/style-guide

# Optional customizations
rules:
  # Use spaces instead of tabs
  indent: [error, 2]
  
  # Allow semicolons
  semi: [error, always]

# .eslintrc.yaml
extends:
  - node/style-guide

# Project-specific style preferences
rules:
  # Allow console in server apps
  no-console: off
  
  # Prefer double quotes for Node.js
  quotes: [error, double]

# .eslintrc.yaml
extends:
  - react-native/style-guide

# React Native specific style preferences  
rules:
  # Allow longer lines for JSX
  max-len: [error, { code: 120 }]
  
  # Prefer spaces for JSX  
  indent: [error, 2]

# .eslintrc.yaml
extends:
  - esnext/style-guide

overrides:
  # Node.js files
  - files: ['server/**/*.js', 'scripts/**/*.js']
    extends:
      - node/style-guide
      
  # React Native files  
  - files: ['mobile/**/*.{js,jsx}']
    extends:
      - react-native/style-guide

// ❌ Error: Missing spaces in array brackets
const items = [1, 2, 3];
const mixed = ['a', 1, true];

// ✅ Correct: Spaces inside array brackets
const items = [ 1, 2, 3 ];
const mixed = [ 'a', 1, true ];

// ❌ Error: Unnecessary parentheses
const single = (x) => x * 2;
const noArgs = () => console.log('hello');

// ✅ Correct: Parentheses as needed
const single = x => x * 2;
const noArgs = () => console.log('hello');
const multiple = (x, y) => x + y;

// ❌ Error: Missing trailing comma
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
};

const items = [
  'first',
  'second',
  'third'
];

// ✅ Correct: Trailing commas in multiline
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
};

const items = [
  'first',
  'second', 
  'third',
];

// ❌ Error: Space indentation
function example() {
  if (condition) {
    return value;
  }
}

// ✅ Correct: Tab indentation
function example() {
→if (condition) {
→→return value;
→}
}

// ✅ Switch case indentation
switch (value) {
→case 'a':
→→return 1;
→case 'b':  
→→return 2;
→default:
→→return 0;
}

// ❌ Error: Missing spaces in object braces
const obj = {key: 'value', other: 123};
const {name, age} = person;

// ✅ Correct: Spaces inside object braces  
const obj = { key: 'value', other: 123 };
const { name, age } = person;

// ❌ Error: Double quotes when single quotes would work
const message = "Hello world";
const key = "user_id";

// ✅ Correct: Single quotes preferred
const message = 'Hello world';  
const key = 'user_id';

// ✅ Correct: Double quotes to avoid escaping
const text = "Don't use single quotes here";
const html = "<div class='container'>Content</div>";

// ✅ Correct: Template literals allowed
const greeting = `Hello ${name}!`;
const multiline = `
  This is a multiline
  template literal
`;

// ❌ Error: Unnecessary semicolons
const name = 'John';
const age = 30;
function greet() {
  return 'Hello';
}

// ✅ Correct: No semicolons (ASI)
const name = 'John'
const age = 30
function greet() {
  return 'Hello'
}

// ✅ Correct: Semicolons when needed to prevent ASI issues
;[ 1, 2, 3 ].forEach(item => console.log(item))
;(function() {
  console.log('IIFE')
})()

// ❌ Error: Missing spaces in template literal braces
const message = `Hello ${name}, you are ${age} years old`;
const computation = `Result: ${calculate(x,y)}`;

// ✅ Correct: Spaces inside template literal braces
const message = `Hello ${ name }, you are ${ age } years old`;
const computation = `Result: ${ calculate(x, y) }`;

// ❌ Error: Missing file extensions and newlines
import helper from './helper'
import config from './config'
import { validateInput } from './validator'
const express = require('express');

// ✅ Correct: File extensions and proper formatting
import { validateInput } from './validator.js'
import config from './config.js'
import helper from './helper.js'

const express = require('express')

// ✅ Recommended object formatting
const config = {
  // Single line objects: spaces inside braces
  simple: { key: 'value' },
  
  // Multi-line objects: proper spacing and trailing commas
  complex: {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3,
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    },
  },
}

// ✅ Recommended function formatting
const utilities = {
  // Arrow functions: consistent spacing
  map: (array, fn) => array.map(fn),
  
  // Multi-line functions: proper brace style
  processData(data) {
    if (!data) {
      return null
    }
    
    return data
      .filter(item => item.active)
      .map(item => ({
        id: item.id,
        name: item.name.trim(),
      }))
  },
}

// ✅ Recommended import organization
// External dependencies first
import React from 'react'
import { StyleSheet, View } from 'react-native'
import PropTypes from 'prop-types'

// Local imports after newline
import { Colors } from '../constants/Colors.js'
import { validateInput } from '../utils/validator.js'
import CustomButton from './CustomButton.js'

// Component implementation follows

npm install --save-dev eslint-config-recommended

# .eslintrc.yaml
extends:
  - recommended/esnext/style-guide
  - recommended/node/style-guide
  - recommended/react-native/style-guide

npm install --save-dev eslint-config-esnext
npm install --save-dev eslint-config-node
npm install --save-dev eslint-config-react-native

# .eslintrc.yaml
extends:
  - esnext/style-guide
  - node/style-guide  
  - react-native/style-guide