VS Code ESLint

For ESLint v9 and later, or ESLint v8.57+ using flat config, you must provide an ESLint configuration file. Common filenames include:

• eslint.config.js (most common)
• eslint.config.mjs
• eslint.config.cjs
• eslint.config.ts
• eslint.config.mts

You can automatically generate a starter configuration by running the following command in your terminal:

npx eslint --init

To validate TypeScript files using ESLint, you must explicitly add the typescript language identifier to the eslint.validate setting.

It is also recommended to disable TSLint to avoid conflicts by setting "tslint.enable": false.

To enable TypeScript validation with auto-fix:

"eslint.validate": [
  { "language": "typescript", "autoFix": true }
]

To use ESLint with TypeScript, it is recommended to follow the TypeScript - ESLint guide and ensure you can run eslint successfully in your terminal first.

Important steps:

• Disable TSLint: To prevent conflicts, disable TSLint by setting "tslint.enable": false in your settings.
• Monorepo Setup: In a monorepo, you must specify the working directories so the extension can locate the correct configurations. Use the eslint.workingDirectories setting.

Example configuration for a project with client and server directories:

"eslint.workingDirectories": [ "./client", "./server" ]

The extension provides a migration path for the deprecated eslint.autoFixOnSave setting to the modern VS Code editor.codeActionsOnSave format.

If eslint.autoFixOnSave is set to true, you will be prompted to convert it. You can manage this migration via the dialog or manually:

• Manual Trigger: Run the command ESLint: Migrate Settings from the Command Palette.
• Avoid Migration: Select Not now in the prompt, or set the user setting eslint.migration.2_x to off to disable future migration prompts.

By default, the extension only lints the individual file you are currently typing in. To lint the entire workspace, enable the lint task in your settings:

1. Set eslint.lintTask.enable to true.
2. The extension will automatically contribute an eslint: lint whole folder task. You do not need to manually define this in tasks.json.

ESLint auto-fixing is now integrated with VS Code's codeActionsOnSave infrastructure. You can enable it for all providers or specifically for ESLint.

To enable auto-fix for all providers:

"editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
}

To enable auto-fix only for ESLint:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
}

To disable ESLint auto-fix while keeping other providers enabled:

"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "never"
}

Tip: If large files are not being fixed, increase the time budget using the editor.codeActionsOnSaveTimeout setting. The default budget is 750ms.

You can control how ESLint automatically fixes problems when you save a file using editor.codeActionsOnSave with the source.fixAll.eslint entry.

To enable auto-fixing for all files, add this to your VS Code settings:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

You can also disable it for specific languages (e.g., HTML):

"[html]": {
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  }
}

Advanced Control:

• eslint.codeActionsOnSave.mode:
  • all (Default): Fixes all possible problems by revalidating the file.
  • problems: Only fixes currently known fixable problems (faster, but may only fix parts of the issues).
• eslint.codeActionsOnSave.rules: Allows you to specify which rules are considered during the save action. Use glob patterns or negation (e.g., "!@typescript-eslint/*").

The VS Code ESLint extension requires an ESLint installation to function. It first attempts to use the ESLint library installed in your opened workspace folder (recommended). If no local installation is found, it looks for a global installation.

To use the extension, you must install eslint using one of the following package managers.

### Local install (recommended):

# npm
npm install --save-dev eslint

# yarn
yarn add --dev eslint

# pnpm
pnpm add --save-dev eslint

# bun
bun add --dev eslint

### Global install:

# npm
npm install -g eslint

# yarn
yarn global add eslint

# pnpm
pnpm add -g eslint

# bun
bun add -g eslint

You can enable ESLint as a formatter for validated files using eslint.format.enable. To ensure it works correctly and doesn't conflict with other formatters, it is recommended to set it as the default formatter for specific languages using the editor.defaultFormatter setting.

Example for JavaScript and TypeScript:

"[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
"[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }

Note: If you use ESLint as your default formatter, you should turn off editor.formatOnSave when editor.codeActionsOnSave is enabled to avoid unnecessary double-fixing.

To protect against unauthorized code execution, the extension requires user approval to load an ESLint library. If execution is blocked, the ESLint status bar item will change to a blocked icon.

You can approve or deny execution via:

1. Clicking the status bar icon.
2. Using the Quick Fix for a corresponding ESLint problem.
3. Running the command ESLint: Manage Library Execution from the Command Palette.

Available actions:

• Allow: Prefixes status bar with a check mark.
• Allow Everywhere: Prefixes status bar with a double check mark.
• Deny / Disable: Prefixes status bar with a blocked sign.

Commands:

• ESLint: Manage Library Execution: Reopens the approval dialog.
• ESLint: Reset Library Decisions: Resets all previous execution decisions.