ESLint Config Recommended

ESLint Config Recommended is a comprehensive package that provides pluggable ESLint configurations for ECMAScript Next, Node.js and React Native applications. It offers a collection of opinionated, safety-focused ESLint configurations that err on the side of more rules rather than fewer, providing developers with comprehensive linting coverage across different JavaScript environments.

Package Information

• Package Name: eslint-config-recommended
• Package Type: npm
• Language: JavaScript (ESLint Configuration)
• Installation: npm install --save-dev eslint-config-recommended

Core Imports

This package provides ESLint shareable configurations that are referenced in ESLint configuration files, not imported as JavaScript modules.

Usage in .eslintrc.yaml

extends:
  - recommended/esnext
  - recommended/node
  - recommended/react-native

Usage in .eslintrc.json

{
  "extends": [
    "recommended/esnext",
    "recommended/node", 
    "recommended/react-native"
  ]
}

Usage in .eslintrc.js

module.exports = {
  extends: [
    "recommended/esnext",
    "recommended/node",
    "recommended/react-native"
  ]
};

Basic Usage

# Install the recommended configuration package
npm install --save-dev eslint-config-recommended

# Create .eslintrc.yaml with desired configs
cat > .eslintrc.yaml << EOF
extends:
  - recommended/esnext
  - recommended/node
EOF

# Run ESLint on your project
npx eslint .

For style guide enforcement:

extends:
  - recommended/esnext/style-guide
  - recommended/node/style-guide
  - recommended/react-native/style-guide

Architecture

This package is structured as a monorepo containing multiple specialized ESLint configurations:

• Base Configuration: esnext provides modern JavaScript/ES6+ linting foundation
• Environment Extensions: node and react-native extend the base with environment-specific rules
• Style Guides: Each configuration has an optional style guide variant for code formatting
• Unified Access: The recommended package provides convenient access to all configurations
• Individual Packages: Each configuration is also available as a standalone npm package

Capabilities

ESNext Configuration

Modern JavaScript/ES6+ configuration providing safety checks and best practices for ECMAScript Next features.

# Configuration: "recommended/esnext"
env:
  es6: true
  commonjs: true

parser: babel-eslint

extends:
  - eslint:recommended
  - plugin:import/errors
  - plugin:import/warnings

ESNext Configuration

Node.js Configuration

Node.js-specific configuration that extends ESNext with server-side JavaScript rules and Node.js environment settings.

# Configuration: "recommended/node"
env:
  node: true

extends: esnext

rules:
  no-path-concat: 2
  no-process-exit: 2
  no-sync: 1
  import/no-nodejs-modules: 0

Node.js Configuration

React Native Configuration

React Native configuration extending ESNext with React and React Native specific linting rules.

# Configuration: "recommended/react-native"
env:
  browser: true

plugins:
  - react
  - react-native

extends:
  - esnext
  - plugin:react/recommended

React Native Configuration

Style Guide Configurations

Enhanced configurations that include comprehensive style and formatting rules for consistent code appearance.

# Style Guide Configurations
extends:
  - recommended/esnext/style-guide     # Base style rules
  - recommended/node/style-guide       # Node.js style rules  
  - recommended/react-native/style-guide # React Native style rules

Style Guide Configurations

Configuration Hierarchy

The configurations build upon each other in this hierarchy:

1. eslint:recommended - Base ESLint rules
2. esnext - Adds ES6+ and import rules
3. node - Extends esnext + Node.js rules
4. react-native - Extends esnext + React/React Native rules
5. style-guide variants - Add formatting rules to any base config

Installation Options

Complete Package (Recommended)

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

Provides access to all configurations via recommended/ prefix.

Individual Packages

If you only need specific configurations:

# Individual installation
npm install --save-dev eslint-config-esnext
npm install --save-dev eslint-config-node  
npm install --save-dev eslint-config-react-native

Configuration Examples

Full Stack JavaScript Project

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

overrides:
  - files: ['src/client/**/*.js']
    extends:
      - recommended/react-native/style-guide

Node.js API Server

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

rules:
  no-console: warn
  no-sync: error

React Native Mobile App

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

rules:
  react-native/no-inline-styles: error

Mixed Configuration

# .eslintrc.yaml
extends:
  - recommended/esnext
  - recommended/node

# Override for specific file patterns
overrides:
  - files: ['**/*.test.js']
    env:
      jest: true
    rules:
      no-unused-expressions: off

Dependencies

Runtime Dependencies:

• eslint-config-esnext: ^4.1.0
• eslint-config-node: ^4.1.0
• eslint-config-react-native: ^4.1.0
• eslint: ^6.8.0

Peer Dependencies:

• eslint: ^6.0.0

Git Hooks Integration

Recommended setup with husky for automatic linting:

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

{
  "scripts": {
    "precommit": "eslint ."
  }
}