Configurations

.eslintrc.cjs

module.exports = {
    root: true,
    env: {
      browser: true,
    },
    parserOptions: {
      parser: '@typescript-eslint/parser',
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: ['tsconfig.json'],
      extraFileExtensions: ['.vue'],
    },
    ignorePatterns: [
      'rollup.config.js',
      'closurify.js',
    ],
    plugins: ['@typescript-eslint'],
    extends: [
      // @see https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base
      'airbnb-base',
      // @see https://github.com/typescript-eslint/typescript-eslint
      'plugin:@typescript-eslint/strict',
      // @see https://github.com/vuejs/eslint-plugin-vue
      'plugin:vue/vue3-recommended',
    ],
    rules: {
        "indent": "off",
        "@typescript-eslint/indent": ["error", 2],
      // Enums viewed as unused
      // @see https://stackoverflow.com/questions/57802057/eslint-configuring-no-unused-vars-for-typescript
      'no-unused-vars': [
        'error',
        {
          varsIgnorePattern: '^[A-Z|_]',
          argsIgnorePattern: '^_',
        },
      ],
      // Enums causing no shadow issue
      // @see https://github.com/typescript-eslint/typescript-eslint/issues/2483
      'no-shadow': 'off',
      '@typescript-eslint/no-shadow': 'error',
      // Disable line break style due to working on windows.
      'linebreak-style': 0,
      // This is to force a space before annotations
      // @see https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/type-annotation-spacing.md
      '@typescript-eslint/type-annotation-spacing': ['warn', {
        before: true,
        after: true,
      }],
      // This is to be able to import .ts files without warnings
      // @see https://github.com/microsoft/TypeScript/issues/27481
      'import/extensions': 'off',
      'import/no-extraneous-dependencies': [
        'error',
        {
          devDependencies: ['tests/**', 'vite.config.ts'],
        },
      ],
      // Disallow the use of console.
      // @see https://eslint.org/docs/rules/no-console
      'no-console': process.env.NODE_ENV === 'production' ? ['error', { allow: ['warn', 'error'] }] : 'off',
  
      // Disallow the use of debugger.
      // @see https://eslint.org/docs/rules/no-debugger
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  
      // Disallow reassignment of function parameters.
      // @see https://eslint.org/docs/rules/no-param-reassign
      //   https://github.com/vuejs/eslint-config-airbnb/blob/master/index.js
      'no-param-reassign': [
        'error',
        {
          props: true,
          ignorePropertyModificationsFor: [
            'state', // for vuex state.
            'acc', // for reduce accumulators.
            'e', // for e.returnvalue.
          ],
        },
      ],
  
      // /////////////////////////////////////////////////////////////////////////
      // `airbnb-base`: Overwrites
      // @see https://github.com/vuejs/eslint-config-airbnb,
      //   https://github.com/airbnb/javascript
      // /////////////////////////////////////////////////////////////////////////
  
      // Disable `import/no-unresolved`, a peer dependency of `airbnb-base`.
      // @see https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
      'import/no-unresolved': 'off',
  
      // Enforce maximum line length.
      // NOTE: Please keep in sync with the `vue/max-len` rule.
      // @see https://eslint.org/docs/rules/max-len
      'max-len': [
        'error',
        120,
        2,
        {
          ignoreUrls: true,
          ignoreComments: false,
          ignoreRegExpLiterals: true,
          ignoreStrings: true,
          ignoreTemplateLiterals: true,
        },
      ],
  
      // Disallow specified syntax.
      // @see https://eslint.org/docs/latest/rules/no-restricted-syntax
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/no-restricted-syntax
      'no-restricted-syntax': [
        'error',
        {
          selector: 'ForInStatement',
          message:
            'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.',
        },
        // {
        //   selector: 'ForOfStatement',
        //   message:
        //     'iterators/generators require regenerator-runtime, which is too heavyweight for this guide to allow them.
        //      Separately,loops should be avoided in favor of array iterations.',
        // },
        {
          selector: 'LabeledStatement',
          message:
            'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.',
        },
        {
          selector: 'WithStatement',
          message:
            '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.',
        },
      ],
      // Enforce the consistent use of either backticks, double, or single quotes.
      // @see https://eslint.org/docs/rules/quotes,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js
      //   quotes: ["error", "double"],
  
      // /////////////////////////////////////////////////////////////////////////
      // `vue/vue3-recommended`: Overwrites
      // @see https://eslint.vuejs.org/rules/
      // /////////////////////////////////////////////////////////////////////////
  
      // Enforce specific casing for component definition name.
      // @see https://eslint.vuejs.org/rules/component-definition-name-casing
      'vue/component-definition-name-casing': ['error', 'kebab-case'],
  
      // Enforce consistent indentation in `<template>`.
      // @see https://eslint.vuejs.org/rules/html-indent
      'vue/html-indent': [
        'error',
        2,
        //   {
        //     attribute: 1,
        //     baseIndent: 0,
        //     closeBracket: 0,
        //     alignAttributesVertically: true,
        //     ignores: [],
        //   },
      ],
  
      // Enforce self-closing style.
      // @see https://eslint.vuejs.org/rules/html-self-closing
      'vue/html-self-closing': [
        'error',
        {
          html: {
            void: 'never',
            normal: 'never',
            component: 'any',
          },
          svg: 'never',
          math: 'never',
        },
      ],
  
      // /////////////////////////////////////////////////////////////////////////
      // `vue/vue3-recommended`: Optional (Uncategorized) Rules
      // @see https://eslint.vuejs.org/rules/#uncategorized
      // /////////////////////////////////////////////////////////////////////////
  
      // Enforce specific casing for the component naming style in template.
      // @see https://eslint.vuejs.org/rules/component-name-in-template-casing
      'vue/component-name-in-template-casing': [
        'error',
        'kebab-case',
        {
          registeredComponentsOnly: true,
          ignores: [],
        },
      ],
  
      // Enforce unified line brake in HTML comments.
      // @see https://eslint.vuejs.org/rules/html-comment-content-newline
      'vue/html-comment-content-newline': 'error',
  
      // Enforce unified spacing in HTML comments.
      // @see https://eslint.vuejs.org/rules/html-comment-content-spacing
      'vue/html-comment-content-spacing': 'error',
  
      // Enforce consistent indentation in HTML comments.
      // @see https://eslint.vuejs.org/rules/html-comment-indent
      'vue/html-comment-indent': 'error',
  
      // Disallow boolean defaults.
      // @see https://eslint.vuejs.org/rules/no-boolean-default
      'vue/no-boolean-default': 'error',
  
      // Enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`.
      // @see https://eslint.vuejs.org/rules/no-duplicate-attr-inheritance
      'vue/no-duplicate-attr-inheritance': 'error',
  
      // Disallow to pass multiple objects into array to class.
      // @see https://eslint.vuejs.org/rules/no-multiple-objects-in-class
      'vue/no-multiple-objects-in-class': 'error',
  
      // Disallow the use of reserved names in component definitions
      // @see https://eslint.vuejs.org/rules/no-reserved-component-names
      'vue/no-reserved-component-names': 'error',
  
      // Disallow static inline style attributes.
      // @see https://eslint.vuejs.org/rules/no-static-inline-styles
      'vue/no-static-inline-styles': 'error',
  
      // Disallow `target="_blank"` attribute without `rel="noopener noreferrer`".
      // @see https://eslint.vuejs.org/rules/no-template-target-blank
      'vue/no-template-target-blank': 'error',
  
      // Disallow unused properties.
      // @see https://eslint.vuejs.org/rules/no-unused-properties
      'vue/no-unused-properties': 'error',
  
      // Disallow unnecessary mustache interpolations.
      // @see https://eslint.vuejs.org/rules/no-useless-mustaches
      'vue/no-useless-mustaches': 'error',
  
      // Disallow unnecessary `v-bind` directives.
      // @see https://eslint.vuejs.org/rules/no-useless-v-bind
      'vue/no-useless-v-bind': 'error',
  
      // Require or disallow padding lines between blocks.
      // @see https://eslint.vuejs.org/rules/padding-line-between-blocks
      'vue/padding-line-between-blocks': 'error',
  
      // Require the component to be directly exported.
      // @see https://eslint.vuejs.org/rules/require-direct-export
      'vue/require-direct-export': 'error',
  
      // Require a name property in Vue components.
      // @see https://eslint.vuejs.org/rules/require-name-property
      'vue/require-name-property': 'error',
  
      // Enforce `v-for` directive's delimiter style.
      // @see https://eslint.vuejs.org/rules/v-for-delimiter-style
      'vue/v-for-delimiter-style': 'error',
  
      // Enforce or forbid parentheses after method calls without arguments in
      // `v-on` directives.
      // @see https://eslint.vuejs.org/rules/v-on-function-call
      'vue/v-on-function-call': ['error', 'always'],
  
      // /////////////////////////////////////////////////////////////////////////
      // `vue/vue3-recommended`: Extension Rules
      //
      // The following rules extend the rules provided by ESLint and applies them
      // to the expressions within the `<template>` block of Vue Single File
      // Components (SFC). The rules' values should match that of `@vue/airbnb`.
      //
      //  @see https://eslint.vuejs.org/rules/#extension-rules
      // /////////////////////////////////////////////////////////////////////////
  
      // Disallow or enforce spaces inside of brackets.
      // @see https://eslint.vuejs.org/rules/array-bracket-spacing,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/array-bracket-spacing
      'vue/array-bracket-spacing': 'error',
  
      // Require space before/after arrow function's arrow.
      // @see https://eslint.vuejs.org/rules/arrow-spacing,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js,
      //   https://eslint.org/docs/rules/arrow-spacing
      'vue/arrow-spacing': 'error',
  
      // Disallow or enforce spaces inside of blocks after opening block and
      // before closing block.
      // @see https://eslint.vuejs.org/rules/block-spacing,
      //   https://eslint.org/docs/rules/block-spacing
      'vue/block-spacing': 'error',
  
      // Require Brace Style.
      // @see https://eslint.vuejs.org/rules/brace-style,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/brace-style
      'vue/brace-style': ['error', '1tbs', { allowSingleLine: true }],
  
      // Require CamelCase.
      // @see https://eslint.vuejs.org/rules/camelcase.html#vue-camelcase
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/camelcase
      'vue/camelcase': [
        'error',
        { properties: 'never', ignoreDestructuring: false },
      ],
  
      // Require or disallow trailing commas.
      // @see https://eslint.vuejs.org/rules/comma-dangle,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/comma-dangle
      'vue/comma-dangle': [
        'error',
        {
          arrays: 'always-multiline',
          objects: 'always-multiline',
          imports: 'always-multiline',
          exports: 'always-multiline',
          functions: 'always-multiline',
        },
      ],
  
      // Enforces spacing around commas.
      // @see https://eslint.vuejs.org/rules/comma-spacing,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/comma-spacing
      'vue/comma-spacing': 'error',
  
      // Comma style.
      // @see https://eslint.vuejs.org/rules/comma-style,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/comma-style
      'vue/comma-style': [
        'error',
        'last',
        {
          exceptions: {
            ArrayExpression: false,
            ArrayPattern: false,
            ArrowFunctionExpression: false,
            CallExpression: false,
            FunctionDeclaration: false,
            FunctionExpression: false,
            ImportDeclaration: false,
            ObjectExpression: false,
            ObjectPattern: false,
            VariableDeclaration: false,
            NewExpression: false,
          },
        },
      ],
  
      // Enforce newline before and after dot.
      // @see https://eslint.vuejs.org/rules/dot-location,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/best-practices.js,
      //   https://eslint.org/docs/rules/dot-location
      'vue/dot-location': ['error', 'property'],
  
      // Require Dot Notation.
      // @see https://eslint.vuejs.org/rules/dot-notation,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/best-practices.js,
      //   https://eslint.org/docs/rules/dot-notation
      'vue/dot-notation': 'error',
  
      // Require `===` and `!==`.
      // @see https://eslint.vuejs.org/rules/eqeqeq,
      //   https://eslint.org/docs/rules/eqeqeq
      'vue/eqeqeq': ['error', 'always', { null: 'ignore' }],
  
      // Require or disallow spacing between function identifiers and their
      // invocations.
      // @see https://eslint.vuejs.org/rules/func-call-spacing,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/func-call-spacing
      'vue/func-call-spacing': 'error',
  
      // Enforce consistent spacing between keys and values in object literal
      // properties.
      // @see https://eslint.vuejs.org/rules/key-spacing,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/key-spacing
      'vue/key-spacing': 'error',
  
      // Enforce consistent spacing before and after keywords.
      // @see https://eslint.vuejs.org/rules/keyword-spacing,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/keyword-spacing
      'vue/keyword-spacing': [
        'error',
        {
          before: true,
          after: true,
          overrides: {
            return: { after: true },
            throw: { after: true },
            case: { after: true },
          },
        },
      ],
  
      // Enforce a maximum line length.
      // NOTE: Please keep in sync with the `max-len` rule.
      // @see https://eslint.vuejs.org/rules/max-len,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/max-len
      'vue/max-len': [
        'error',
        120,
        2,
        {
          ignoreUrls: true,
          ignoreComments: false,
          ignoreRegExpLiterals: true,
          ignoreStrings: true,
          ignoreTemplateLiterals: true,
        },
      ],
  
      // Disallow empty destructuring patterns.
      // @see https://eslint.vuejs.org/rules/no-empty-pattern,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/best-practices.js,
      //   https://eslint.org/docs/rules/no-empty-pattern
      'vue/no-empty-pattern': 'error',
  
      // Disallow unnecessary parentheses.
      // @see https://eslint.vuejs.org/rules/no-extra-parens,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/errors.js,
      //   https://eslint.org/docs/rules/no-extra-parens
      'vue/no-extra-parens': [
        'off',
        'all',
        {
          conditionalAssign: true,
          nestedBinaryExpressions: false,
          returnAssign: false,
          ignoreJSX: 'all',
          enforceForArrowConditionals: false,
        },
      ],
  
      // Disallow irregular whitespace.
      // @see https://eslint.vuejs.org/rules/no-irregular-whitespace,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/errors.js,
      //   https://eslint.org/docs/rules/no-irregular-whitespace
      'vue/no-irregular-whitespace': 'error',
  
      // Disallow sparse arrays.
      // @see https://eslint.vuejs.org/rules/no-sparse-arrays,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/errors.js,
      //   https://eslint.org/docs/rules/no-sparse-arrays
      'vue/no-sparse-arrays': 'error',
  
      // Disallow unnecessary concatenation of strings.
      // @see https://eslint.vuejs.org/rules/no-useless-concat,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/best-practices.js,
      //   https://eslint.org/docs/rules/no-useless-concat
      'vue/no-useless-concat': 'error',
  
      // Enforce consistent line breaks inside braces.
      // @see https://eslint.vuejs.org/rules/object-curly-newline,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/object-curly-newline
      'vue/object-curly-newline': [
        'error',
        {
          ObjectExpression: {
            minProperties: 4,
            multiline: true,
            consistent: true,
          },
          ObjectPattern: {
            minProperties: 4,
            multiline: true,
            consistent: true,
          },
          ImportDeclaration: {
            minProperties: 4,
            multiline: true,
            consistent: true,
          },
          ExportDeclaration: {
            minProperties: 4,
            multiline: true,
            consistent: true,
          },
        },
      ],
  
      // Enforce consistent spacing inside braces.
      // @see https://eslint.vuejs.org/rules/object-curly-spacing,
      //   https://eslint.org/docs/rules/object-curly-spacing
      'vue/object-curly-spacing': ['error', 'always'],
  
      // Enforce placing object properties on separate lines.
      // @see https://eslint.vuejs.org/rules/object-property-newline,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/object-property-newline
      'vue/object-property-newline': [
        'error',
        {
          allowAllPropertiesOnSameLine: true,
        },
      ],
  
      // Enforce consistent linebreak style for operators.
      // @see https://eslint.vuejs.org/rules/operator-linebreak,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/operator-linebreak
      'vue/operator-linebreak': [
        'error',
        'before',
        {
          overrides: {
            '=': 'none',
          },
        },
      ],
  
      // Suggest using template literals instead of string concatenation.
      // @see https://eslint.vuejs.org/rules/prefer-template,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js,
      //   https://eslint.org/docs/rules/prefer-template
      'vue/prefer-template': 'error',
  
      // Disallow or enforce spaces inside of parentheses.
      // @see https://eslint.vuejs.org/rules/space-in-parens,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/space-in-parens
      'vue/space-in-parens': 'error',
  
      // Require spacing around infix operators.
      // @see https://eslint.vuejs.org/rules/space-infix-ops,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/space-infix-ops
      'vue/space-infix-ops': 'error',
  
      // Require or disallow spaces before/after unary operators.
      // @see https://eslint.vuejs.org/rules/space-unary-ops,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/style.js,
      //   https://eslint.org/docs/rules/space-unary-ops
      'vue/space-unary-ops': [
        'error',
        {
          words: true,
          nonwords: false,
          overrides: {},
        },
      ],
  
      // Enforce Usage of Spacing in Template Strings.
      // @see https://eslint.vuejs.org/rules/template-curly-spacing,
      //   https://github.com/airbnb/javascript/blob/master/packages/eslint-config-airbnb-base/rules/es6.js,
      //   https://eslint.org/docs/rules/template-curly-spacing
      'vue/template-curly-spacing': 'error',
  
      // Enforce consistant delimters for interfaces
      // @see https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/member-delimiter-style.md
      '@typescript-eslint/member-delimiter-style': ['error', {
        multiline: {
          delimiter: 'semi',
          requireLast: true,
        },
        singleline: {
          delimiter: 'semi',
          requireLast: false,
        },
      }],
    },
  };

npm install

npm install eslint -g
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev