eslint-plugin-vue

What is eslint-plugin-vue?

The eslint-plugin-vue npm package is a plugin for ESLint specifically designed for Vue.js applications. It provides linting rules that are tailored to the Vue.js framework, helping developers to write consistent and error-free code by following best practices and avoiding common mistakes.

What are eslint-plugin-vue's main functionalities?

Style Guide Enforcement

Enforces a style guide by limiting the number of attributes per line in Vue templates. This helps in maintaining readability and consistency in the codebase.

"vue/max-attributes-per-line": ["error", { "singleline": 3, "multiline": { "max": 1, "allowFirstLine": false } }]

Component Naming

Ensures that component names in templates are written in a specific case, such as PascalCase, which is a common convention in Vue.js projects.

"vue/component-name-in-template-casing": ["error", "PascalCase"]

Avoiding Deprecated Features

Prevents the use of deprecated features like the 'slot' attribute, encouraging developers to use the updated syntax and features of Vue.js.

"vue/no-deprecated-slot-attribute": "error"

Prop Validation

Ensures that every prop has a default value, which can prevent bugs and make the components more predictable.

"vue/require-default-prop": "error"

Script Indentation

Enforces consistent indentation in the script section of Vue single-file components, which improves code readability and maintainability.

"vue/script-indent": ["error", 2, { "baseIndent": 1, "switchCase": 1, "ignores": [] }]

Other packages similar to eslint-plugin-vue

eslint-plugin-react

Similar to eslint-plugin-vue, eslint-plugin-react provides linting rules specific to React applications. It helps enforce best practices and conventions for React components, JSX syntax, and more.

eslint-plugin-angular

This plugin is designed for Angular applications and offers linting rules that cater to the Angular framework's structure and coding styles, similar to how eslint-plugin-vue serves Vue.js developers.

eslint-plugin-svelte3

For developers using Svelte, eslint-plugin-svelte3 provides linting rules tailored to the Svelte framework. It helps maintain code quality and consistency in a way that's analogous to eslint-plugin-vue's role for Vue.js.

README

eslint-plugin-vue

ESLint plugin for Vue.js projects

Usage

1. npm install --save-dev eslint-plugin-vue
2. create a file named .eslintrc in your project:

{
  extends: [ /* your usual extends */ ],
  plugins: ["vue"],
  rules: {
    'vue/jsx-uses-vars': 2,
  },
}

1. OPTIONAL: install eslint-config-vue: npm install --save-dev eslint-config-vue
2. OPTIONAL: then use the recommended configurations in your .eslintrc:

{
  extends: ["vue", /* your other extends */],
  plugins: ["vue"],
  rules: {
    /* your overrides -- vue/jsx-uses-vars is included in eslint-config-vue */
  },
}

License

MIT