Traditional ESLint configuration presets for backward compatibility with existing ESLint setups using .eslintrc.js format. These configurations provide the same rule sets as modern configs but in the traditional ESLint configuration format.
The primary recommended configuration containing essential Ember linting rules.
/**
* Standard recommended configuration for Ember applications
* Contains core rules for Ember best practices
*/
'plugin:ember/recommended': ESLintConfig;
interface RecommendedConfig {
/** Base configuration settings */
...baseConfig: BaseConfig;
/** Recommended rule configurations */
rules: {
'ember/avoid-leaking-state-in-ember-objects': 'error';
'ember/closure-actions': 'error';
'ember/new-module-imports': 'error';
'ember/no-actions-hash': 'error';
'ember/no-classic-classes': 'error';
'ember/no-classic-components': 'error';
'ember/no-component-lifecycle-hooks': 'error';
'ember/no-computed-properties-in-native-classes': 'error';
'ember/no-get': 'error';
'ember/no-jquery': 'error';
'ember/no-mixins': 'error';
'ember/no-observers': 'error';
// ... additional recommended rules
};
}Usage Example:
// .eslintrc.js
module.exports = {
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended'
],
rules: {
// Override specific rules if needed
'ember/no-jquery': 'warn'
}
};Foundation configuration with minimal essential rules.
/**
* Base configuration with core Ember rules
* Minimal set of essential linting rules
*/
'plugin:ember/base': ESLintConfig;
interface BaseConfig {
/** Environment settings */
env: {
browser: true;
es6: true;
};
/** Parser options */
parserOptions: {
ecmaVersion: 2018;
sourceType: 'module';
};
/** Base rules */
rules: {
// Core Ember rules only
};
}Usage Example:
// .eslintrc.js - Minimal setup
module.exports = {
plugins: ['ember'],
extends: ['plugin:ember/base'],
rules: {
// Add specific rules as needed
'ember/no-actions-hash': 'error'
}
};Configuration for .gjs files (Glimmer JavaScript files with template syntax).
/**
* Configuration for .gjs template files
* Specialized rules for first-class component templates
*/
'plugin:ember/recommended-gjs': ESLintConfig;
interface GJSConfig extends RecommendedConfig {
/** Additional GJS-specific rules */
rules: {
...RecommendedConfig.rules;
// GJS-specific rule overrides
'ember/template-indent': 'error';
'ember/template-no-let-reference': 'error';
};
}Usage Example:
// .eslintrc.js - with GJS support
module.exports = {
overrides: [
{
files: ['**/*.{js,ts}'],
plugins: ['ember'],
extends: ['plugin:ember/recommended']
},
{
files: ['**/*.gjs'],
parser: 'ember-eslint-parser',
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended',
'plugin:ember/recommended-gjs'
]
}
]
};Configuration for .gts files (Glimmer TypeScript files with template syntax).
/**
* Configuration for .gts template files
* TypeScript + template syntax support
*/
'plugin:ember/recommended-gts': ESLintConfig;
interface GTSConfig extends RecommendedConfig {
/** Additional GTS-specific rules */
rules: {
...RecommendedConfig.rules;
// GTS-specific rule overrides
'ember/template-indent': 'error';
'ember/template-no-let-reference': 'error';
// TypeScript-compatible rule adjustments
};
}Usage Example:
// .eslintrc.js - with GTS support
module.exports = {
overrides: [
{
files: ['**/*.{js,ts}'],
parser: '@typescript-eslint/parser',
plugins: ['ember'],
extends: ['plugin:ember/recommended']
},
{
files: ['**/*.gts'],
parser: 'ember-eslint-parser',
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:ember/recommended',
'plugin:ember/recommended-gts'
]
}
]
};Direct access to configuration objects for custom setups.
/**
* Direct access to legacy configuration objects
*/
interface LegacyConfigAccess {
/** Access via plugin configs */
configs: {
base: BaseConfig;
recommended: RecommendedConfig;
'recommended-gjs': GJSConfig;
'recommended-gts': GTSConfig;
};
}
/**
* Individual configuration file imports
*/
const baseConfig: BaseConfig = require('eslint-plugin-ember/configs/base');
const recommendedConfig: RecommendedConfig = require('eslint-plugin-ember/configs/recommended');
const gjsConfig: GJSConfig = require('eslint-plugin-ember/configs/recommended-gjs');
const gtsConfig: GTSConfig = require('eslint-plugin-ember/configs/recommended-gts');Usage Example:
// Direct configuration access
const plugin = require('eslint-plugin-ember');
const recommendedConfig = plugin.configs.recommended;
// Or direct file access
const baseConfig = require('eslint-plugin-ember/configs/base');
// Custom configuration merging
module.exports = {
...baseConfig,
rules: {
...baseConfig.rules,
'ember/no-jquery': 'off' // Custom override
}
};Comprehensive examples for different Ember application setups.
/**
* Complete legacy configuration for standard Ember app
*/
interface StandardEmberConfig {
plugins: ['ember'];
extends: ['eslint:recommended', 'plugin:ember/recommended'];
rules: Record<string, ESLintRuleConfig>;
}
/**
* Complete legacy configuration with TypeScript support
*/
interface TypeScriptEmberConfig {
overrides: [
{
files: ['**/*.{js,ts}'];
parser: '@typescript-eslint/parser';
plugins: ['ember', '@typescript-eslint'];
extends: ['plugin:ember/recommended', 'plugin:@typescript-eslint/recommended'];
}
];
}
/**
* Complete legacy configuration with template support
*/
interface TemplateEmberConfig {
overrides: [
{
files: ['**/*.{js,ts}'];
plugins: ['ember'];
extends: ['plugin:ember/recommended'];
},
{
files: ['**/*.gjs'];
parser: 'ember-eslint-parser';
plugins: ['ember'];
extends: ['plugin:ember/recommended', 'plugin:ember/recommended-gjs'];
},
{
files: ['**/*.gts'];
parser: 'ember-eslint-parser';
plugins: ['ember'];
extends: ['plugin:ember/recommended', 'plugin:ember/recommended-gts'];
}
];
}Complete Setup Examples:
// Standard Ember app
// .eslintrc.js
module.exports = {
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended'
],
rules: {
'ember/no-replace-test-comments': 'error'
}
};
// TypeScript Ember app
// .eslintrc.js
module.exports = {
overrides: [
{
files: ['**/*.{js,ts}'],
parser: '@typescript-eslint/parser',
plugins: ['ember', '@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:ember/recommended',
'plugin:@typescript-eslint/recommended'
]
}
]
};
// Ember app with template support
// .eslintrc.js
module.exports = {
overrides: [
{
files: ['**/*.{js,ts}'],
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended'
]
},
{
files: ['**/*.gjs'],
parser: 'ember-eslint-parser',
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:ember/recommended',
'plugin:ember/recommended-gjs'
]
},
{
files: ['**/*.gts'],
parser: 'ember-eslint-parser',
plugins: ['ember'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:ember/recommended',
'plugin:ember/recommended-gts'
]
}
]
};Guidance for migrating from legacy to modern flat config.
/**
* Legacy to modern configuration mapping
*/
interface ConfigMigration {
legacy: {
extends: ['plugin:ember/recommended'];
};
modern: {
import: "const eslintPluginEmberRecommended = require('eslint-plugin-ember/configs/recommended');";
config: "...eslintPluginEmberRecommended";
};
}Migration Example:
// Legacy (.eslintrc.js)
module.exports = {
plugins: ['ember'],
extends: ['plugin:ember/recommended']
};
// Modern (eslint.config.js)
const eslintPluginEmberRecommended = require('eslint-plugin-ember/configs/recommended');
module.exports = [
...eslintPluginEmberRecommended
];