ESLint InterlaceESLint Interlace

Editor Integration

Set up ESLint Interlace with VS Code, Cursor AI, and other editors

VS Code

Install ESLint Extension

Install the official ESLint extension for VS Code.

Configure Settings

Add to your .vscode/settings.json:

.vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.useFlatConfig": true,
  "eslint.workingDirectories": [{ "mode": "auto" }]
}

For the best experience, also install:

  • Error Lens — Inline error display
  • ESLint — Core linting
  • Prettier — Code formatting (configure to not conflict)
.vscode/extensions.json
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "usernamehw.errorlens",
    "esbenp.prettier-vscode"
  ]
}

Cursor AI

Cursor AI has built-in ESLint support and leverages Interlace's structured metadata for accurate fixes.

AI-Native Advantage

ESLint Interlace provides CWE, OWASP, and CVSS metadata that Cursor AI uses to generate precise security fixes—no hallucinations.

Enable ESLint

  1. Open Settings (⌘ + ,)
  2. Search for "ESLint"
  3. Ensure ESLint: Enable is checked
  4. Set ESLint: Use Flat Config to true

AI Fix Workflow

When Cursor detects an Interlace security violation:

  1. Hover over the error to see structured metadata (CWE, OWASP)
  2. Press ⌘ + K to open AI chat
  3. Ask "Fix this security vulnerability" — Cursor uses Interlace metadata
  4. Review the suggested fix and apply

Settings

.cursor/settings.json
{
  "eslint.enable": true,
  "eslint.useFlatConfig": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Antigravity IDE

Antigravity natively integrates with ESLint Interlace for autonomous security fixes.

Configuration

Antigravity automatically detects your eslint.config.js and applies Interlace rules. No additional configuration needed.

Agent Workflow

When working with Antigravity:

  1. Antigravity reads ESLint diagnostics including Interlace metadata
  2. Security violations are prioritized in the agent's context
  3. Fixes are applied using the structured remediation suggestions
  4. The agent verifies fixes pass linting before committing

Structured Metadata

Interlace provides structured JSON metadata (CWE ID, OWASP category, CVSS score) that AI agents use to understand vulnerability context and generate accurate fixes.

WebStorm / JetBrains IDEs

WebStorm, IntelliJ IDEA, and other JetBrains IDEs have built-in ESLint support.

Enable ESLint

  1. Go to SettingsLanguages & FrameworksJavaScriptCode Quality ToolsESLint
  2. Select Automatic ESLint configuration
  3. Check Run eslint --fix on save

Flat Config Support

JetBrains IDEs automatically detect eslint.config.js files. Ensure you're using a recent IDE version (2024.1+) for full flat config support.

File → Settings → Languages & Frameworks → JavaScript → Code Quality Tools → ESLint
✓ Automatic ESLint configuration
✓ Run eslint --fix on save

Neovim

Using nvim-lspconfig

init.lua
require('lspconfig').eslint.setup({
  on_attach = function(client, bufnr)
    vim.api.nvim_create_autocmd("BufWritePre", {
      buffer = bufnr,
      command = "EslintFixAll",
    })
  end,
  settings = {
    workingDirectories = { mode = "auto" },
    experimental = {
      useFlatConfig = true,
    },
  },
})

Using none-ls (null-ls successor)

init.lua
local null_ls = require("null-ls")

null_ls.setup({
  sources = {
    null_ls.builtins.diagnostics.eslint_d,
    null_ls.builtins.code_actions.eslint_d,
  },
})

Using conform.nvim for Formatting

init.lua
require("conform").setup({
  formatters_by_ft = {
    javascript = { "eslint_d" },
    typescript = { "eslint_d" },
    javascriptreact = { "eslint_d" },
    typescriptreact = { "eslint_d" },
  },
  format_on_save = {
    timeout_ms = 500,
    lsp_fallback = true,
  },
})

GitHub Codespaces

devcontainer Configuration

.devcontainer/devcontainer.json
{
  "name": "Node.js & ESLint Interlace",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint", "usernamehw.errorlens"],
      "settings": {
        "eslint.useFlatConfig": true,
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": "explicit"
        }
      }
    }
  },
  "postCreateCommand": "npm install"
}

Pre-commit Hooks

Using Husky + lint-staged

npm install husky lint-staged --save-dev
npx husky init
package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "git add"]
  }
}
.husky/pre-commit
npx lint-staged

Using lefthook

lefthook.yml
pre-commit:
  parallel: true
  commands:
    eslint:
      glob: '*.{js,jsx,ts,tsx}'
      run: npx eslint --fix {staged_files}
      stage_fixed: true

Troubleshooting Editor Issues

Next Steps

On this page