@xwtec/eslint-config-vue NPM

@xwtec/eslint-config-vue

ESLint Configuration for xwtec vue projects

Install

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

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

Configuration

.eslintrc.cjs format is recommended

module.exports = {
  extends: ['@xwtec/vue'],
};

Rules

Error

#	Type	Rule	Description
1	error	vue/comment-directive	support comment-directives in `<template>`
2	error	vue/jsx-uses-vars	prevent variables used in JSX to be marked as unused
3	error	vue/no-arrow-functions-in-watch	disallow using arrow functions to define watcher
4	error	vue/no-async-in-computed-properties	disallow asynchronous actions in computed properties
5	error	vue/no-child-content	disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
6	error	vue/no-computed-properties-in-data	disallow accessing computed properties in `data`.
7	error	vue/no-deprecated-dollar-listeners-api	disallow using deprecated `$listeners` (in Vue.js 3.0.0+)
8	error	vue/no-deprecated-events-api	disallow using deprecated events api (in Vue.js 3.0.0+)
9	error	vue/no-deprecated-filter	disallow using deprecated filters syntax (in Vue.js 3.0.0+)
10	error	vue/no-deprecated-functional-template	disallow using deprecated the `functional` template (in Vue.js 3.0.0+)
11	error	vue/no-deprecated-html-element-is	disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)
12	error	vue/no-deprecated-inline-template	disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)
13	error	vue/no-deprecated-props-default-this	disallow deprecated `this` access in props default function (in Vue.js 3.0.0+)
14	error	vue/no-deprecated-router-link-tag-prop	disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+)
15	error	vue/no-deprecated-v-on-native-modifier	disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)
16	error	vue/no-deprecated-vue-config-keycodes	disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)
17	error	vue/no-dupe-keys	disallow duplication of field names
18	error	vue/no-dupe-v-else-if	disallow duplicate conditions in `v-if` / `v-else-if` chains
19	error	vue/no-duplicate-attributes	disallow duplication of attributes
20	error	vue/no-export-in-script-setup	disallow `export` in `<script setup>`
21	error	vue/no-expose-after-await	disallow asynchronously registered `expose`
22	error	vue/no-lifecycle-after-await	disallow asynchronously registered lifecycle hooks
23	error	vue/no-parsing-error	disallow parsing errors in `<template>`
24	error	vue/no-reserved-keys	disallow overwriting reserved keys
25	error	vue/no-reserved-props	disallow reserved names in props
26	error	vue/no-setup-props-destructure	disallow destructuring of `props` passed to `setup`
27	error	vue/no-side-effects-in-computed-properties	disallow side effects in computed properties
28	error	vue/no-template-key	disallow `key` attribute on `<template>`
29	error	vue/no-textarea-mustache	disallow mustaches in `<textarea>`
30	error	vue/no-use-computed-property-like-method	disallow use computed property like method
31	error	vue/no-useless-template-attributes	disallow useless attribute on `<template>`
32	error	vue/no-v-for-template-key-on-child	disallow key of `<template v-for>` placed on child elements
33	error	vue/no-v-text-v-html-on-component	disallow v-text / v-html on component
34	error	vue/no-watch-after-await	disallow asynchronously registered `watch`
35	error	vue/require-slots-as-functions	enforce properties of `$slots` to be used as a function
36	error	vue/require-toggle-inside-transition	require control the display of the content inside `<transition>`
37	error	vue/return-in-emits-validator	enforce that a return statement is present in emits validator
38	error	vue/valid-attribute-name	require valid attribute names
39	error	vue/valid-define-emits	enforce valid `defineEmits` compiler macro
40	error	vue/valid-define-props	enforce valid `defineProps` compiler macro
41	error	vue/valid-v-bind	enforce valid `v-bind` directives
42	error	vue/valid-v-cloak	enforce valid `v-cloak` directives
43	error	vue/valid-v-else	enforce valid `v-else` directives
44	error	vue/valid-v-else-if	enforce valid `v-else-if` directives
45	error	vue/valid-v-for	enforce valid `v-for` directives
46	error	vue/valid-v-html	enforce valid `v-html` directives
47	error	vue/valid-v-if	enforce valid `v-if` directives
48	error	vue/valid-v-is	enforce valid `v-is` directives
49	error	vue/valid-v-memo	enforce valid `v-memo` directives
50	error	vue/valid-v-model	enforce valid `v-model` directives
51	error	vue/valid-v-on	enforce valid `v-on` directives
52	error	vue/valid-v-once	enforce valid `v-once` directives
53	error	vue/valid-v-pre	enforce valid `v-pre` directives
54	error	vue/valid-v-show	enforce valid `v-show` directives
55	error	vue/valid-v-slot	enforce valid `v-slot` directives
56	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/component-tags-order	enforce order of component top-level elements
6	warn	vue/define-macros-order	enforce order of `defineEmits` and `defineProps` compiler macros
7	warn	vue/dot-notation	Enforce dot notation whenever possible in `<template>`
8	error	vue/eqeqeq	Require the use of `===` and `!==` in `<template>`
9	warn	vue/html-comment-content-spacing	enforce unified spacing in HTML comments
10	warn	vue/html-self-closing	enforce self-closing style
11	warn	vue/next-tick-style	enforce Promise or callback style in `nextTick`
12	warn	vue/no-deprecated-data-object-declaration	disallow using deprecated object declaration on data (in Vue.js 3.0.0+)
13	warn	vue/no-deprecated-dollar-scopedslots-api	disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)
14	warn	vue/no-deprecated-scope-attribute	disallow deprecated `scope` attribute (in Vue.js 2.5.0+)
15	warn	vue/no-deprecated-slot-scope-attribute	disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)
16	warn	vue/no-deprecated-v-is	disallow deprecated `v-is` directive (in Vue.js 3.1.0+)
17	warn	vue/no-deprecated-v-on-number-modifiers	disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)
18	warn	vue/no-ref-as-operand	disallow use of value wrapped by `ref()` (Composition API) as an operand
19	warn	vue/no-required-prop-with-default	enforce props with default values to be optional
20	warn	vue/no-shared-component-data	enforce component's data property to be a function
21	warn	vue/no-unsupported-features	disallow unsupported Vue.js syntax on the specified version
22	warn	vue/no-useless-mustaches	disallow unnecessary mustache interpolations
23	warn	vue/no-useless-v-bind	disallow unnecessary `v-bind` directives
24	warn	vue/object-shorthand	Require or disallow method and property shorthand syntax for object literals in `<template>`
25	warn	vue/order-in-components	enforce order of properties in components
26	warn	vue/padding-line-between-blocks	require or disallow padding lines between blocks
27	warn	vue/prefer-define-options	enforce use of `defineOptions` instead of default export.
28	warn	vue/prefer-import-from-vue	enforce import from 'vue' instead of import from '@vue/*'
29	warn	vue/prefer-separate-static-class	require static class names in template to be in a separate `class` attribute
30	warn	vue/prefer-template	Require template literals instead of string concatenation in `<template>`
31	warn	vue/require-prop-type-constructor	require prop type to be a constructor
32	error	vue/this-in-template	disallow usage of `this` in template
33	warn	vue/v-bind-style	enforce `v-bind` directive style
34	warn	vue/v-for-delimiter-style	enforce `v-for` directive's delimiter style
35	warn	vue/v-on-event-hyphenation	enforce v-on event naming style on custom components in template
36	warn	vue/v-on-style	enforce `v-on` directive style
37	warn	vue/v-slot-style	enforce `v-slot` directive style
38	warn	vue/valid-next-tick	enforce valid `nextTick` function calls