ESLint: Flat Config

Kyle Coberly

eslint

eslintrc

module.exports = {
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { "project": ["./tsconfig.json"] },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    },
    "ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"]
}

Flat Config

import jsdoc from "eslint-plugin-jsdoc";
import customConfig from "eslint-config-custom";

export default [
    {
        files: ["**/*.js"],
        ignores: ["**/*.test.js"],
        plugins: {
            jsdoc
        },
        languageOptions: {
            ecmaVersion: 6
        },
        rules: {
            "jsdoc/require-description": "error",
            "jsdoc/check-values": "error",
        }  
    },
    customConfig,
    {
        files: ["**/*.cjs"],
        rules: {
            "no-undef": "error",
            "semi": "warn",
        }  
    }
];

What's Different?

  • .eslintrc, .eslintrc.yml, etc.
  • Complex top-level object
  • String-based plugins, etc.
  • CommonJS
  • Rules and plugins
  • .eslint.config.js
  • Array of config objects
  • Module-based plugins, etc.
  • ESM
  • Rules and plugins

kylecoberly.com

Made with Slides.com