npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

eslint-plugin-decorator-position

v6.0.0

Published

ESLint plugin for enforcing decorator position

Downloads

144,623

Readme

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: | | Name | Description | |:---|:-----|:------------| | | /config/base | Only installs the plugin. You can use it to configure rules as you wish. | | | /config/rules | Only configures the rules. Expects the plugin to be installed. | | | /config/recommended | Installs the plugin and configures the rules |

Legacy configurations: | | Name | Description | |:---|:-----|:------------| | | base | contains no rules settings, but the basic eslint configuration suitable for any project. You can use it to configure rules as you wish. | | :hamster: | ember | extends 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:

  • What configuration it belongs to
  • :wrench: if some problems reported by the rule are automatically fixable by the --fix command line option

Style

| | Rule ID | Description | |:---|:--------|:------------| | :white_check_mark::wrench: | decorator-position | enforce consistent decorator position on properties and methods |

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

  • Create an issue with a description of the proposed rule
  • Create files for the new rule:
    • lib/rules/new-rule.js (implementation, see no-proxies for an example)
    • docs/rules/new-rule.md (documentation, start from the template -- raw, rendered)
    • tests/lib/rules/new-rule.js (tests, see no-proxies for an example)
  • Run yarn update to automatically update the README and other files (and re-run this if you change the rule name or description)
  • Make sure your changes will pass CI by running:
    • yarn test
    • yarn lint (yarn lint:js --fix can fix many errors)
  • Create a PR and link the created issue in the description

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?

  • patch: a change that fixes currently broken behavior. Does not cause formatting to change when people update unless a previous patch/feature accidentally broke formatting in a breaking way.
  • minor: a change that does not impact formatting
  • breaking: a major change that is not backwards compatible and would intentionally cause formatting changes to occur

🔓 License

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