Skip to main content

dot-notation

Enforce dot notation whenever possible.

🎨

Extending "plugin:@typescript-eslint/stylistic-type-checked" in an ESLint configuration enables this rule.

🔧

Some problems reported by this rule are automatically fixable by the --fix ESLint command line option.

💭

This rule requires type information to run.

This rule extends the base eslint/dot-notation rule. It adds:

  • Support for optionally ignoring computed private and/or protected member access.
  • Compatibility with TypeScript's noPropertyAccessFromIndexSignature option.

How to Use​

.eslintrc.cjs
module.exports = {
  "rules": {
    // Note: you must disable the base rule as it can report incorrect errors
    "dot-notation": "off",
    "@typescript-eslint/dot-notation": "error"
  }
};

Try this rule in the playground ↗

Options​

See eslint/dot-notation options.

This rule adds the following options:

interface Options extends BaseDotNotationOptions {
  allowPrivateClassPropertyAccess?: boolean;
  allowProtectedClassPropertyAccess?: boolean;
  allowIndexSignaturePropertyAccess?: boolean;
}

const defaultOptions: Options = {
  ...baseDotNotationDefaultOptions,
  allowPrivateClassPropertyAccess: false,
  allowProtectedClassPropertyAccess: false,
  allowIndexSignaturePropertyAccess: false,
};

If the TypeScript compiler option noPropertyAccessFromIndexSignature is set to true, then this rule always allows the use of square bracket notation to access properties of types that have a string index signature, even if allowIndexSignaturePropertyAccess is false.

allowPrivateClassPropertyAccess​

Example of a correct code when allowPrivateClassPropertyAccess is set to true:

class X {
  private priv_prop = 123;
}

const x = new X();
x['priv_prop'] = 123;
Open in Playground

allowProtectedClassPropertyAccess​

Example of a correct code when allowProtectedClassPropertyAccess is set to true:

class X {
  protected protected_prop = 123;
}

const x = new X();
x['protected_prop'] = 123;
Open in Playground

allowIndexSignaturePropertyAccess​

Example of correct code when allowIndexSignaturePropertyAccess is set to true:

class X {
  [key: string]: number;
}

const x = new X();
x['hello'] = 123;
Open in Playground

If the TypeScript compiler option noPropertyAccessFromIndexSignature is set to true, then the above code is always allowed, even if allowIndexSignaturePropertyAccess is false.

When Not To Use It​

If you specifically want to use both member access kinds for stylistic reasons, or don't wish to enforce one style over the other, you can avoid this rule.

However, keep in mind that inconsistent style can harm readability in a project. We recommend picking a single option for this rule that works best for your project.

Type checked lint rules are more powerful than traditional lint rules, but also require configuring type checked linting. See Troubleshooting > Linting with Type Information > Performance if you experience performance degredations after enabling type checked rules.

Resources​

Taken with ❤️ from ESLint core.