Need help converting this .eslintrc to eslint.config.js
I’m in the process of upgrading my ESLint configuration from a .eslintrc file to a eslint.config.js file to take advantage of the newer ESLint configuration format. My existing .eslintrc configuration is quite extensive, involving various environments, globals, and a range of plugins and rules. Below is the content of my .eslintrc:
{
"env": {
"browser": true,
"es2020": true,
"jquery": true
},
"globals": {
"process": "readonly",
"React": "readonly",
"JSX": "readonly",
"JQuery": "readonly",
"JQueryStatic": "readonly",
"SP": "readonly",
"_spPageContextInfo": "readonly",
"ExecuteOrDelayUntilScriptLoaded": "readonly",
"RegisterSod": "readonly",
"GetCurrentCtx": "readonly",
"DeepPartial": "readonly",
"IDisposable": "readonly",
"Plumsail": "readonly",
"SPClientPeoplePicker": "readonly"
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"project": "*/tsconfig.json",
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "import", "sort-imports-es6-autofix", "autofix"],
"rules": {
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/naming-convention": [
"warn",
{
"selector": "interface",
"format": ["PascalCase"],
"custom": {
"regex": "^I[A-Z]",
"match": true
}
}
],
"@typescript-eslint/no-inferrable-types": [
"warn",
{
"ignoreParameters": true
}
],
"@typescript-eslint/unbound-method": "error",
"autofix/padding-line-between-statements": [
"warn",
{
"blankLine": "always",
"next": [
"block",
"block-like",
"cjs-export",
"class",
"continue",
"debugger",
"directive",
"do",
"for",
"function",
"if",
"iife",
"return",
"switch",
"throw",
"try",
"while",
"with"
],
"prev": "*"
},
{
"blankLine": "always",
"next": ["case", "default"],
"prev": "break"
}
],
"dot-notation": "error",
"eqeqeq": "error",
"import/default": "off",
"import/extensions": [
"error",
{
"extension": "never"
}
],
"import/no-extraneous-dependencies": [
"off",
{
"devDependencies": true
}
],
"import/no-named-as-default-member": "off",
"import/no-unresolved": "off",
"import/no-useless-path-segments": "error",
"import/order": "off",
"import/prefer-default-export": "off",
"lines-between-class-members": ["error", "always"],
"new-cap": [
"error",
{
"capIsNew": false
}
],
"no-case-declarations": "warn",
"no-empty": ["error", { "allowEmptyCatch": true }],
"no-empty-pattern": "warn",
"no-fallthrough": "warn",
"no-inner-declarations": "warn",
"no-prototype-builtins": "warn",
"no-restricted-globals": "warn",
"no-return-assign": "warn",
"no-return-await": "warn",
"no-undef": "warn",
"no-unmodified-loop-condition": "warn",
"no-unused-expressions": "off",
"no-unused-vars": "off",
"no-useless-constructor": "warn",
"no-void": "off",
"no-console": "warn",
"prefer-promise-reject-errors": "warn",
"prettier/prettier": "warn",
"react/display-name": "off",
"react/prop-types": "off",
"require-await": "warn",
"sort-imports-es6-autofix/sort-imports-es6": "off"
},
"settings": {
"react": {
"version": "detect"
}
}
}
errors related to importing plugins and upgrading packages but no luck, using import for some reasons doesn’t work and there are issues using prettier. Here is my attempt:
const { FlatCompat } = require('@eslint/eslintrc');
const tsParser = require('@typescript-eslint/parser');
const reactPlugin = require('eslint-plugin-react');
const typescriptPlugin = require('@typescript-eslint/eslint-plugin');
const importPlugin = require('eslint-plugin-import');
const prettierPlugin = require('eslint-plugin-prettier');
const autofixPlugin = require('eslint-plugin-autofix');
const sortImportsPlugin = require('eslint-plugin-sort-imports-es6-autofix');
const { resolve } = require('path');
const js = require('@eslint/js');
const compat = new FlatCompat({
baseDirectory: __dirname,
resolvePluginsRelativeTo: __dirname, // optional
recommendedConfig: js.configs.recommended, // optional unless using "eslint:recommended"
allConfig: js.configs.all
});
module.exports = [
...compat.config(),
{
files: ['**/*.ts', '**/*.tsx'],
languageOptions: {
parser: typescriptParser,
sourceType: 'module',
parserOptions: {
ecmaFeatures: {
jsx: true
},
project: ['./tsconfig.json']
},
globals: {
...globals.browser,
...globals.es2020,
...globals.JSX,
...globals.process,
...globals.React,
...globals.JQuery,
...globals.JQueryStatic,
...globals.SP,
...globals._spPageContextInfo,
...globals.ExecuteOrDelayUntilScriptLoaded,
...globals.RegisterSod,
...globals.GetCurrentCtx,
...globals.DeepPartial,
...globals.IDisposable,
...globals.Plumsail,
...globals.SPClientPeoplePicker
}
},
plugins: {
react: reactPlugin,
'@typescript-eslint': typescriptEslintPlugin,
import: importPlugin,
'sort-imports-es6-autofix': sortImportsEs6AutofixPlugin,
autofix: autofixPlugin,
prettier: prettierPlugin
},
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/naming-convention': [
'warn',
{
selector: 'interface',
format: ['PascalCase'],
custom: {
regex: '^I[A-Z]',
match: true
}
}
],
'@typescript-eslint/no-inferrable-types': [
'warn',
{
ignoreParameters: true
}
],
'@typescript-eslint/unbound-method': 'error',
'autofix/padding-line-between-statements': [
'warn',
{
blankLine: 'always',
next: [
'block',
'block-like',
'cjs-export',
'class',
'continue',
'debugger',
'directive',
'do',
'for',
'function',
'if',
'iife',
'return',
'switch',
'throw',
'try',
'while',
'with'
],
prev: '*'
},
{
blankLine: 'always',
next: ['case', 'default'],
prev: 'break'
}
],
'dot-notation': 'error',
eqeqeq: 'error',
'import/default': 'off',
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never'
}
],
'import/no-extraneous-dependencies': [
'off',
{
devDependencies: true
}
],
'import/no-named-as-default-member': 'off',
'import/no-unresolved': 'off',
'import/no-useless-path-segments': 'error',
'import/order': 'off',
'import/prefer-default-export': 'off',
'lines-between-class-members': ['error', 'always'],
'new-cap': [
'error',
{
capIsNew: false
}
],
'no-case-declarations': 'warn',
'no-empty': ['error', { allowEmptyCatch: true }],
'no-empty-pattern': 'warn',
'no-fallthrough': 'warn',
'no-inner-declarations': 'warn',
'no-prototype-builtins': 'warn',
'no-restricted-globals': 'warn',
'no-return-assign': 'warn',
'no-return-await': 'warn',
'no-undef': 'warn',
'no-unmodified-loop-condition': 'warn',
'no-unused-expressions': 'off',
'no-unused-vars': 'off',
'no-useless-constructor': 'warn',
'no-void': 'off',
'no-console': 'warn',
'prefer-promise-reject-errors': 'warn',
'react/display-name': 'off',
'react/prop-types': 'off',
'require-await': 'warn',
'sort-imports-es6-autofix/sort-imports-es6': 'off'
},
settings: {
react: {
version: 'detect'
}
}
},
...compat.extends('eslint:recommended'),
...compat.extends('plugin:@typescript-eslint/recommended'),
...compat.extends('plugin:react/recommended'),
...compat.extends('plugin:react-hooks/recommended'),
...compat.extends('plugin:import/recommended'),
...compat.extends('plugin:import/typescript'),
...compat.extends('plugin:prettier/recommended')
];
New contributor
Aiko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.