@xwtec/eslint-config-vue

ESLint Configuration for xwtec vue projects

Install

# with yarn
yarn add --dev eslint @xwtec/eslint-config-vue

# with npm
npm install --save-dev eslint @xwtec/eslint-config-vue

Configuration

Add the following code to your eslint.config.mjs.

import xwtecEslintConfigVue from '@xwtec/eslint-config-vue';

export default [
  xwtecEslintConfigVue,
  {
    rules: {
      'unicorn/no-array-for-each': 'error',
    },
  },
].flat();

Rules

Error

| # | Type | Rule | Description | | :-: | :---: | :----------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------- | | 1 | error | vue/no-arrow-functions-in-watch | disallow using arrow functions to define watcher | | 2 | error | vue/no-async-in-computed-properties | disallow asynchronous actions in computed properties | | 3 | error | vue/no-child-content | disallow element's child contents which would be overwritten by a directive like v-html or v-text | | 4 | error | vue/no-computed-properties-in-data | disallow accessing computed properties in data. | | 5 | error | vue/no-deprecated-dollar-listeners-api | disallow using deprecated $listeners (in Vue.js 3.0.0+) | | 6 | error | vue/no-deprecated-events-api | disallow using deprecated events api (in Vue.js 3.0.0+) | | 7 | error | vue/no-deprecated-filter | disallow using deprecated filters syntax (in Vue.js 3.0.0+) | | 8 | error | vue/no-deprecated-functional-template | disallow using deprecated the functional template (in Vue.js 3.0.0+) | | 9 | error | vue/no-deprecated-html-element-is | disallow using deprecated the is attribute on HTML elements (in Vue.js 3.0.0+) | | 10 | error | vue/no-deprecated-inline-template | disallow using deprecated inline-template attribute (in Vue.js 3.0.0+) | | 11 | error | vue/no-deprecated-props-default-this | disallow deprecated this access in props default function (in Vue.js 3.0.0+) | | 12 | error | vue/no-deprecated-router-link-tag-prop | disallow using deprecated tag property on RouterLink (in Vue.js 3.0.0+) | | 13 | error | vue/no-deprecated-v-is | disallow deprecated v-is directive (in Vue.js 3.1.0+) | | 14 | error | vue/no-deprecated-v-on-native-modifier | disallow using deprecated .native modifiers (in Vue.js 3.0.0+) | | 15 | error | vue/no-deprecated-vue-config-keycodes | disallow using deprecated Vue.config.keyCodes (in Vue.js 3.0.0+) | | 16 | error | vue/no-dupe-keys | disallow duplication of field names | | 17 | error | vue/no-dupe-v-else-if | disallow duplicate conditions in v-if / v-else-if chains | | 18 | error | vue/no-duplicate-attributes | disallow duplication of attributes | | 19 | error | vue/no-export-in-script-setup | disallow export in <script setup> | | 20 | error | vue/no-expose-after-await | disallow asynchronously registered expose | | 21 | error | vue/no-lifecycle-after-await | disallow asynchronously registered lifecycle hooks | | 22 | error | vue/no-parsing-error | disallow parsing errors in <template> | | 23 | error | vue/no-reserved-keys | disallow overwriting reserved keys | | 24 | error | vue/no-reserved-props | disallow reserved names in props | | 25 | error | vue/no-side-effects-in-computed-properties | disallow side effects in computed properties | | 26 | error | vue/no-template-key | disallow key attribute on <template> | | 27 | error | vue/no-textarea-mustache | disallow mustaches in <textarea> | | 28 | error | vue/no-use-computed-property-like-method | disallow use computed property like method | | 29 | error | vue/no-useless-template-attributes | disallow useless attribute on <template> | | 30 | error | vue/no-v-for-template-key-on-child | disallow key of <template v-for> placed on child elements | | 31 | error | vue/no-v-text-v-html-on-component | disallow v-text / v-html on component | | 32 | error | vue/no-watch-after-await | disallow asynchronously registered watch | | 33 | error | vue/require-slots-as-functions | enforce properties of $slots to be used as a function | | 34 | error | vue/require-toggle-inside-transition | require control the display of the content inside <transition> | | 35 | error | vue/return-in-emits-validator | enforce that a return statement is present in emits validator | | 36 | error | vue/valid-attribute-name | require valid attribute names | | 37 | error | vue/valid-define-emits | enforce valid defineEmits compiler macro | | 38 | error | vue/valid-define-props | enforce valid defineProps compiler macro | | 39 | error | vue/valid-v-bind | enforce valid v-bind directives | | 40 | error | vue/valid-v-cloak | enforce valid v-cloak directives | | 41 | error | vue/valid-v-else | enforce valid v-else directives | | 42 | error | vue/valid-v-else-if | enforce valid v-else-if directives | | 43 | error | vue/valid-v-for | enforce valid v-for directives | | 44 | error | vue/valid-v-html | enforce valid v-html directives | | 45 | error | vue/valid-v-if | enforce valid v-if directives | | 46 | error | vue/valid-v-is | enforce valid v-is directives | | 47 | error | vue/valid-v-memo | enforce valid v-memo directives | | 48 | error | vue/valid-v-model | enforce valid v-model directives | | 49 | error | vue/valid-v-on | enforce valid v-on directives | | 50 | error | vue/valid-v-once | enforce valid v-once directives | | 51 | error | vue/valid-v-pre | enforce valid v-pre directives | | 52 | error | vue/valid-v-show | enforce valid v-show directives | | 53 | error | vue/valid-v-slot | enforce valid v-slot directives | | 54 | error | vue/valid-v-text | enforce valid v-text directives |

Warn

| # | Type | Rule | Description | | :-: | :--: | :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | | 1 | warn | vue/no-mutating-props | disallow mutation of component props | | 2 | warn | vue/no-reserved-component-names | disallow the use of reserved names in component definitions | | 3 | warn | vue/no-unused-vars | disallow unused variable definitions of v-for directives or scope attributes | | 4 | warn | vue/prop-name-casing | enforce specific casing for the Prop name in Vue components | | 5 | warn | vue/require-default-prop | require default value for props | | 6 | warn | vue/require-render-return | enforce render function to always return value | | 7 | warn | vue/require-valid-default-prop | enforce props default values to be valid | | 8 | warn | vue/return-in-computed-property | enforce that a return statement is present in computed property | | 9 | warn | vue/valid-template-root | enforce valid template root | | 10 | warn | vue/valid-v-bind-sync | enforce valid .sync modifier on v-bind directives |

Fixable

| # | Type | Rule | Description | | :-: | :---: | :--------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------- | | 1 | warn | vue/attribute-hyphenation | enforce attribute naming style on custom components in template | | 2 | warn | vue/attributes-order | enforce order of attributes | | 3 | warn | vue/block-order | enforce order of component top-level elements | | 4 | warn | vue/component-name-in-template-casing | enforce specific casing for the component naming style in template | | 5 | warn | vue/define-macros-order | enforce order of defineEmits and defineProps compiler macros | | 6 | warn | vue/dot-notation | Enforce dot notation whenever possible in <template> | | 7 | error | vue/eqeqeq | Require the use of === and !== in <template> | | 8 | warn | vue/html-comment-content-spacing | enforce unified spacing in HTML comments | | 9 | warn | vue/html-self-closing | enforce self-closing style | | 10 | warn | vue/next-tick-style | enforce Promise or callback style in nextTick | | 11 | warn | vue/no-deprecated-data-object-declaration | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | | 12 | warn | vue/no-deprecated-dollar-scopedslots-api | disallow using deprecated $scopedSlots (in Vue.js 3.0.0+) | | 13 | warn | vue/no-deprecated-scope-attribute | disallow deprecated scope attribute (in Vue.js 2.5.0+) | | 14 | warn | vue/no-deprecated-slot-scope-attribute | disallow deprecated slot-scope attribute (in Vue.js 2.6.0+) | | 15 | warn | vue/no-deprecated-v-on-number-modifiers | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | | 16 | warn | vue/no-ref-as-operand | disallow use of value wrapped by ref() (Composition API) as an operand | | 17 | warn | vue/no-required-prop-with-default | enforce props with default values to be optional | | 18 | warn | vue/no-shared-component-data | enforce component's data property to be a function | | 19 | warn | vue/no-unsupported-features | disallow unsupported Vue.js syntax on the specified version | | 20 | warn | vue/no-useless-mustaches | disallow unnecessary mustache interpolations | | 21 | warn | vue/no-useless-v-bind | disallow unnecessary v-bind directives | | 22 | warn | vue/object-shorthand | Require or disallow method and property shorthand syntax for object literals in <template> | | 23 | warn | vue/order-in-components | enforce order of properties in components | | 24 | warn | vue/padding-line-between-blocks | require or disallow padding lines between blocks | | 25 | warn | vue/prefer-define-options | enforce use of defineOptions instead of default export. | | 26 | warn | vue/prefer-import-from-vue | enforce import from 'vue' instead of import from '@vue/*' | | 27 | warn | vue/prefer-separate-static-class | require static class names in template to be in a separate class attribute | | 28 | warn | vue/prefer-template | Require template literals instead of string concatenation in <template> | | 29 | warn | vue/require-prop-type-constructor | require prop type to be a constructor | | 30 | error | vue/this-in-template | disallow usage of this in template | | 31 | warn | vue/v-bind-style | enforce v-bind directive style | | 32 | warn | vue/v-for-delimiter-style | enforce v-for directive's delimiter style | | 33 | warn | vue/v-if-else-key | require key attribute for conditionally rendered repeated components | | 34 | warn | vue/v-on-event-hyphenation | enforce v-on event naming style on custom components in template | | 35 | warn | vue/v-on-style | enforce v-on directive style | | 36 | warn | vue/v-slot-style | enforce v-slot directive style | | 37 | warn | vue/valid-next-tick | enforce valid nextTick function calls |

Relative

• @xwtec/eslint-config
• @xwtec/eslint-config-legacy

Links

• ESLint
• Prettier

License

MIT © xwtec