ESLint InterlaceESLint Interlace

Configuration

Configure ESLint Interlace plugins for your project

Plugin-Based Configuration

ESLint Interlace is a collection of independent plugins. Each plugin provides its own recommended and strict configs. The examples below show eslint-plugin-browser-security but apply to all Interlace plugins.

Configuration Presets

Each Interlace plugin provides preset configurations:

Recommended

Balanced rules for most projects. Security errors, quality warnings.

Strict

Maximum security. All rules as errors. For high-security applications.

Using Presets

eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';
import secureCoding from 'eslint-plugin-secure-coding';

export default [
  // Use recommended preset from each plugin
  browserSecurity.configs.recommended,
  secureCoding.configs.recommended,

  // Or use strict preset for maximum security
  // browserSecurity.configs.strict,
  // secureCoding.configs.strict,
];

Custom Configuration

Multi-Plugin Configuration

Combine multiple plugins for comprehensive coverage:

eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';
import jwt from 'eslint-plugin-jwt';
import secureCoding from 'eslint-plugin-secure-coding';
import conventions from 'eslint-plugin-conventions';

export default [
  // Security plugins
  browserSecurity.configs.recommended,
  jwt.configs.recommended,
  secureCoding.configs.recommended,

  // Quality plugins
  conventions.configs.recommended,

  // Custom rule overrides
  {
    rules: {
      'browser-security/no-insecure-url': 'error',
      'jwt/no-hardcoded-secret': 'error',
    },
  },
];

Rule Severity Levels

SeverityMeaningWhen to Use
'off'DisabledRule not applicable to your project
'warn'WarningReview needed, doesn't fail CI
'error'ErrorMust be fixed before merge

File-Specific Rules

Apply different rules to different file types:

eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';
import secureCoding from 'eslint-plugin-secure-coding';
import jwt from 'eslint-plugin-jwt';

export default [
  browserSecurity.configs.recommended,
  secureCoding.configs.recommended,
  jwt.configs.recommended,

  // Stricter rules for API routes
  {
    files: ['**/api/**/*.ts', '**/routes/**/*.ts'],
    rules: {
      'secure-coding/no-sql-injection': 'error',
      'jwt/no-algorithm-none': 'error',
    },
  },

  // Relaxed rules for tests
  {
    files: ['**/*.test.ts', '**/*.spec.ts'],
    rules: {
      'browser-security/no-insecure-url': 'off',
    },
  },
];

Ignoring Files

Using ignores Property

eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';

export default [
  {
    ignores: [
      'node_modules/**',
      'dist/**',
      'build/**',
      '.next/**',
      'coverage/**',
    ],
  },
  browserSecurity.configs.recommended,
];

Inline Ignore Comments

// eslint-disable-next-line browser-security/no-insecure-url
const legacyUrl = 'http://legacy-internal-service.local';

/* eslint-disable jwt/no-hardcoded-secret */
// This is a test fixture, not a real secret
const testToken = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...';
/* eslint-enable jwt/no-hardcoded-secret */

Use Sparingly

Disable comments should be rare. If you're disabling rules frequently, consider adjusting your configuration instead.

TypeScript Configuration

Type-Aware Linting

Some rules can use TypeScript type information for more accurate detection:

eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';
import tseslint from 'typescript-eslint';

export default tseslint.config(browserSecurity.configs.recommended, {
  languageOptions: {
    parserOptions: {
      project: './tsconfig.json',
    },
  },
});

Monorepo TypeScript

For monorepos with multiple tsconfig.json files:

eslint.config.js
import browserSecurity from 'eslint-plugin-browser-security';
import secureCoding from 'eslint-plugin-secure-coding';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  browserSecurity.configs.recommended,
  secureCoding.configs.recommended,
  {
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.json', './packages/*/tsconfig.json'],
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);

Shared Team Configuration

Create a Shared Package

packages/eslint-config-mycompany/index.js
import browserSecurity from 'eslint-plugin-browser-security';
import secureCoding from 'eslint-plugin-secure-coding';
import jwt from 'eslint-plugin-jwt';
import conventions from 'eslint-plugin-conventions';

export default [
  // Security plugins
  browserSecurity.configs.strict,
  secureCoding.configs.strict,
  jwt.configs.strict,

  // Quality plugins
  conventions.configs.recommended,

  {
    rules: {
      // Company-wide overrides
      'jwt/no-algorithm-none': 'error',
      'browser-security/no-insecure-url': 'error',
    },
  },
];

Use in Projects

apps/my-app/eslint.config.js
import companyConfig from 'eslint-config-mycompany';

export default [
  ...companyConfig,
  {
    // Project-specific additions
  },
];

Next Steps

On this page