@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