ESLint comes with support to require or disallow trailing commas. This option is also known as “comma-dangle”. Trailing commas are supported in JavaScript by ECMAScript v5. Here’s a simple example:

const futurestudio = {  
  team: ['Marcus', 'Norman', 'Christian'],
}

The comma after team: ['Marcus', 'Norman', 'Christian'], is a trailing comma.

This tutorial shows you how to configure ESLint supporting comma-dangle in TypeScript.

TypeScript Series Overview

Support Comma-Dangle in TypeScript-ESLint

ESLint works nicely in combination with TypeScript. You can lint your TypeScript code and also require formatting rules using the ESLint config file. This config file is typically a .eslintrc file. You may have a .eslintrc.js or .eslintrc.json file in your project.

Supporting comma-dangle in your project is useful to reduce the number of changes in git diffs. For example, imagine an object where the last key-value pair has a trailing comma. When adding another key-value pair to that object, you only see changes for the newly added key-value pair and not the added comma on the previous key-value pair.

We can extend the example from above and extend the futurestudio object with another key-value pair. The git diff may then only show the newly added line as a difference because it’s the only change:

const futurestudio = {  
  team: ['Marcus', 'Norman', 'Christian'],
  is: 'great',
}

Allowing comma-dangle in TypeScript requires two configurations in your ESLint setup. At first, you must turn off ESLint’s default comma-dangle rule and then replace it with the @typescript-eslint/comma-dangle rule from the @typescript-eslint package.

Allowing but Not Forcing Comma Dangle

You may turn off the comma-dangle rule to tell ESLint that trailing commas are fine. You can do that by disabling the rule using the value "off" (which is the same as 0):

.eslintrc.json

{
  "rules": {
    "comma-dangle": "off",
    "@typescript-eslint/comma-dangle": "off"
  }
}

Requiring Comma-Dangle in TypeScript

You may require trailing commas in all places of your code. Or you can require comma-dangle in multiline statements. For example, the "only-multiline" option is useful when enforcing trailing commas in code that spreads across multiple lines, like when defining objects with many key-value pairs.

Here’s a sample ESLint setup for "only-multiline" comma-dangle.

.eslintrc.json

{
  "rules": {
    "comma-dangle": "off",
    "@typescript-eslint/comma-dangle": ["error", "only-multiline"]
  }
}

Comma-Dangle Configuration Options

ESLint comes with detailed comma-dangle support for arrays, objects, imports, exports, and functions.

Concrete configurations are off, never, ignore, only-multiline, and always-multiline.

Adjust the configuration to your needs for each type. You may also configure different formatting options for each type. Like, always requiring trailing commas in objects but never on functions.

.eslintrc.json

{
  "rules": {
    "comma-dangle": "off",
    "@typescript-eslint/comma-dangle": ["error", {
        "arrays": "never",
        "objects": "always-multiline",
        "imports": "never",
        "exports": "never",
        "functions": "never"
    }]
  }
}

Enjoy trailing commas in your TypeScript projects!