eslint-plugin-clubdrei

ESLint plugin with default rule configurations and custom rules for clubdrei.com projects

If you want to add a rule or update the packages use the developerGuide

Installation

You'll first need to install ESLint:

npm i eslint --save-dev

Next, install @clubdrei/eslint-plugin-clubdrei:

npm install @clubdrei/eslint-plugin-clubdrei --save-dev

Next, install peerDependencies

Usage

Add clubdrei to the extends section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix.
With /vanilla and /vue you can select the right config.

{
  "extends": [
    "plugin:@clubdrei/clubdrei/vanilla"
  ]
}

{
  "extends": [
    "plugin:@clubdrei/clubdrei/vue"
  ]
}

When you want to overwrite a plugin rule add clubdrei to the plugin section of your .eslintrc configuration file.

{
  "plugins": [
    "@clubdrei/clubdrei"
  ]
}

Currently settings and parserOption are not included in the configs. So add our defaults:

module.exports = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    //only needed on vanilla-js projects
    parser: '@babel/eslint-parser',
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [
          ['@', './src'],
          ['@ssr', './ssr'],
          ['@tests', './tests'],
        ],
        extensions: ['.js', '.scss', '.vue'],
      },
    },
    'import/extensions': ['error', 'ignorePackages', { vue: 'always', js: 'always' }],
  },
}

Custom Rules

| Rule | Options | Short Description | Type | |--------------------------------------------------------------------------------------------------------|---------------------------------------------------|---------------------------------------------------------------------------------------|---------| | length-condition | none | Forces conditions with .length, to use a comparison | Vanilla | | force-trim-length-on-empty-string-checks | none | Forces to use .trim().lengthto check if an string is Empty | Vanilla | | vue-watch-order | none | Forces Order in watch: immediate, deep, handler | Vue | | vue-force-handler-in-watch | none | Forces to use handler() in watch | Vue | | vue-no-complex-keys-in-watch | 'allowedPropertyLevel': number | Not allow test.foo in watch | Vue | | filename-convention | 'expect': string[], 'extensions': string[] | defines naming of files | Vanilla | | vue-force-trim-length-on-empty-string-checks | none | Expand force-trim-length-on-empty-string-checks rule, to check the types of vue props | Vue | | force-equal-zero | none | not allow foo < 1 for zero checks | Vanilla | | vue-no-multiple-quotes-in-component-props | none | forbids double quotes in vue attributes | Vue | | vue-no-arrow-functions-in-html-events | none | forbids unnecessary arrow functions in html | Vue | | vue-avoid-paranthesis-in-events | none | Prevents the use of parenthesis in events | Vue | | force-typeof-with-undefined-checks | none | Prevent undefined conditions without typeof | Vanilla | | vue-prevent-empty-line-between-properties | none | Prevents empty lines between properties | Vue | | force-usage-of-hasown.md | none | Forces the use of Object.hasOwn instead of hasOwnProperty | Vanilla |