Home

Awesome

eslint-plugin-decorator-position

NPM version NPM downloads

An ESlint plugin that provides set of rules enforcing consistent decorator positions

❗️Requirements

🚀 Usage

1. Install plugin

pnpm add -D eslint-plugin-decorator-position

Or

yarn add --dev eslint-plugin-decorator-position

Or

npm install --save-dev eslint-plugin-decorator-position

2. Modify your eslint config

For modern 'flat config', append the eslint-plugin-decorator-position config to your eslint.config.js file:

module.exports = [
+ ...require('eslint-plugin-decorator-position/config/recommended'),
  {
    languageOptions: {
      parser: require('@babel/eslint-parser'),
      parserOptions: {
        requireConfigFile: false,
        babelOptions: {
          plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
        },
      },
    },
  },
];

Or for the legacy eslint config format, extend the base config provided by eslint-plugin-decorator-position:

// .eslintrc.js
module.exports = {
  parser: '@babel/eslint-parser',
  // parser: '@typescript-eslint/parser',
  plugins: ['decorator-position'],
  extends: [
    'plugin:decorator-position/ember' // or other configuration
  ],
  rules: {
    // override rule settings from extends config here
    // 'decorator-position/decorator-position': ['error', { /* your config */ }]
  }
};

3. Using with Prettier

Since eslint 8, the printWidth option must be specified to be compatible with the eslint-plugin-prettier rule prettier/prettier

// eslint.config.js
module.exports = [
  ...require('eslint-plugin-decorator-position/config/recommended'),
  {
    languageOptions: {
      parser: require('@babel/eslint-parser'),
      parserOptions: {
        requireConfigFile: false,
        babelOptions: {
          plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
        },
      },
    },
  },
+ rules: {
+   'decorator-position/decorator-position': ['error', { printWidth: 100 }],
+   'prettier/prettier': ['error', { printWidth: 100 }]
+ }
]

or

// .eslintrc.js
module.exports = {
  parser: '@babel/eslint-parser',
  plugins: ['decorator-position'],
  extends: [
    'plugin:decorator-position/ember' // or other configuration
  ],
  rules: {
    'decorator-position/decorator-position': ['error', { printWidth: 100 }],
    'prettier/prettier': ['error', { printWidth: 100 }]
  }
};

If there is a .prettierrc.js file, that will be read instead, and printwidth is not needed.

🧰 Configurations

'Flat' configurations:

NameDescription
/config/baseOnly installs the plugin. You can use it to configure rules as you wish.
/config/rulesOnly configures the rules. Expects the plugin to be installed.
/config/recommendedInstalls the plugin and configures the rules

Legacy configurations:

NameDescription
basecontains no rules settings, but the basic eslint configuration suitable for any project. You can use it to configure rules as you wish.
:hamster:emberextends the base configuration by enabling the recommended rules for ember projects.

Manual plugin installation

If you prefer to manage the config yourself, the plugin can be installed like this:

// eslint.config.js
module.exports = [
  // ... your existing config
  plugins: {
+   "decorator-position": require("eslint-plugin-decorator-position"),
  },
  rules: {
+   'decorator-position/decorator-position': 'error',
  }
]

🍟 Rules

Rules are grouped by category to help you understand their purpose. Each rule has emojis denoting:

<!--RULES_TABLE_START-->

Style

Rule IDDescription
:white_check_mark::wrench:decorator-positionenforce consistent decorator position on properties and methods
<!--RULES_TABLE_END-->

For the simplified list of rules, go here.

🍻 Contribution Guide

If you have any suggestions, ideas, or problems, feel free to create an issue, but first please make sure your question does not repeat previous ones.

Creating a New Rule

Note that new rules should not immediately be added to the recommended configuration, as we only consider such breaking changes during major version updates.

Running smoke tests and creating reproductions

To run smoke tests:

./scripts/smoke-test.sh

it will prompt you with which test to run.

To create a reproduction,

  1. first make sure there is an open issue describing the problem your encountering.
  2. then create a folder in smoke-tests/issue-reproductions/ named ofter the issue number. example: smoke-tests/issue-reproductions/196/
  3. The minimum required files are:
    • package.json - for declaring which dependencies are being tested (or * if it doesn't matter for your particular test)
    • a js or ts file to demonstrate the "correct" state. After a smoke-test runs, a git diff is checked to ensure 0 changes.
    • .eslintrc.js - to define what configuration / rules / plugins / etc may be relevant.

SemVer Policy

How does this project interpret patch / minor / breaking changes?

🔓 License

See the LICENSE file for license rights and limitations (MIT).