What is @vue/eslint-config-standard?
@vue/eslint-config-standard is an ESLint configuration package specifically designed for Vue.js projects. It extends the standard ESLint rules with additional rules and settings tailored for Vue.js development, ensuring code quality and consistency.
What are @vue/eslint-config-standard's main functionalities?
Standard JavaScript Rules
This feature extends the standard ESLint rules along with essential Vue.js rules. It ensures that your JavaScript code adheres to widely accepted best practices and coding standards.
{"extends":["eslint:recommended","plugin:vue/essential","@vue/standard"]}
Vue.js Specific Rules
This feature includes rules specific to Vue.js, such as preventing unused variables in Vue components and ensuring that templates have a single root element.
{"extends":["plugin:vue/essential"],"rules":{"vue/no-unused-vars":"error","vue/no-multiple-template-root":"error"}}
Code Formatting
This feature enforces consistent code formatting rules, such as no semicolons and 2-space indentation, to maintain a uniform code style across the project.
{"extends":["@vue/standard"],"rules":{"semi":["error","never"],"indent":["error",2]}}
Other packages similar to @vue/eslint-config-standard
@vue/eslint-config-airbnb
This package provides an ESLint configuration that extends the Airbnb JavaScript style guide for Vue.js projects. It is similar to @vue/eslint-config-standard but follows the Airbnb style guide, which has different rules and conventions.
eslint-config-prettier
This package disables all ESLint rules that are unnecessary or might conflict with Prettier. It can be used alongside @vue/eslint-config-standard to ensure that code formatting is handled by Prettier while still enforcing other ESLint rules.
eslint-plugin-vue
This plugin provides a set of ESLint rules specifically for Vue.js. It can be used to create a custom ESLint configuration for Vue projects, offering more flexibility compared to @vue/eslint-config-standard.
@vue/eslint-config-standard
eslint-config-standard for Vue
This config is specifically designed to be used by @vue/cli
& create-vue
setups
and is not meant for outside use (it can be used but some adaptations
on the user side might be needed - for details see the config file).
A part of its design is that this config may implicitly depend on
other parts of @vue/cli
/create-vue
setups, such as eslint-plugin-vue
being
extended in the same resulting config.
Installation
In order to work around a known limitation in ESLint, we recommend you to use this package alongside @rushstack/eslint-patch
, so that you don't have to install too many dependencies:
npm add --dev @vue/eslint-config-standard @rushstack/eslint-patch
Usage
An example .eslintrc.cjs
:
require("@rushstack/eslint-patch/modern-module-resolution")
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'@vue/eslint-config-standard'
]
}
Aliases
By default, none of the built-in rules require you to configure aliases in ESLint.
But if you want to enable some additional rules that need to actually resolve the imported module on the filesystem (e.g. import/no-unresolved
) by yourself, you should configure it.
In that case, we provided a helper function to simplify the task.
For example, it is a widely accepted convention to use @
as an alias to the src
folder in the Vue ecosystem. To enable this, you can use the following config:
require('@rushstack/eslint-patch/modern-module-resolution')
const path = require('node:path')
const createAliasSetting = require('@vue/eslint-config-standard/createAliasSetting')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'@vue/eslint-config-standard'
],
rules: {
'import/no-unresolved': 'error'
}
settings: {
...createAliasSetting({
'@': `${path.resolve(__dirname, './src')}`
})
}
}
createAliasSetting
accepts a map of aliases and their corresponding paths, and returns a settings object to be spread in to the settings
field of the ESLint config.