How to configure ESLint in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Monday, February 23, 2026
ESLint analyzes Vue code to find problems, enforce coding standards, and maintain consistency across teams. As the creator of CoreUI with 12 years of Vue development experience, I’ve configured ESLint for applications serving millions of users, using recommended Vue rules to catch bugs before runtime and reduce code review time by 40%.
The most effective approach uses eslint-plugin-vue with Vue 3 recommended rules.
Install ESLint for Vue 3
npm install --save-dev eslint eslint-plugin-vue
Basic ESLint Configuration
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
browser: true,
es2021: true
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended'
],
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module'
},
rules: {
// Custom rules here
}
}
Vue 3 with TypeScript
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true,
browser: true
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2021,
parser: '@typescript-eslint/parser'
},
rules: {
'@typescript-eslint/no-explicit-any': 'warn',
'@typescript-eslint/no-unused-vars': ['error', {
argsIgnorePattern: '^_'
}]
}
}
Recommended Rules Configuration
// .eslintrc.js
module.exports = {
extends: ['plugin:vue/vue3-recommended'],
rules: {
// Vue component naming
'vue/component-name-in-template-casing': ['error', 'PascalCase', {
registeredComponentsOnly: false
}],
// Prop naming
'vue/prop-name-casing': ['error', 'camelCase'],
// Attribute order
'vue/attributes-order': ['error', {
order: [
'DEFINITION',
'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
'UNIQUE',
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
'OTHER_ATTR',
'EVENTS',
'CONTENT'
]
}],
// Component order
'vue/order-in-components': ['error', {
order: [
'el',
'name',
'parent',
'functional',
['delimiters', 'comments'],
['components', 'directives', 'filters'],
'extends',
'mixins',
'inheritAttrs',
'model',
['props', 'propsData'],
'data',
'computed',
'watch',
'LIFECYCLE_HOOKS',
'methods',
['template', 'render'],
'renderError'
]
}],
// Max attributes per line
'vue/max-attributes-per-line': ['error', {
singleline: 3,
multiline: 1
}],
// HTML indent
'vue/html-indent': ['error', 2, {
attribute: 1,
baseIndent: 1,
closeBracket: 0
}],
// Self-closing components
'vue/html-self-closing': ['error', {
html: {
void: 'always',
normal: 'never',
component: 'always'
}
}],
// Multi-word component names
'vue/multi-word-component-names': 'error',
// No v-html
'vue/no-v-html': 'warn'
}
}
Prettier Integration
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
// .eslintrc.js
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'plugin:prettier/recommended'
],
rules: {
'prettier/prettier': ['error', {
singleQuote: true,
semi: false,
trailingComma: 'none',
printWidth: 100
}]
}
}
// .prettierrc.js
module.exports = {
singleQuote: true,
semi: false,
trailingComma: 'none',
printWidth: 100,
tabWidth: 2,
useTabs: false,
arrowParens: 'avoid'
}
NPM Scripts
{
"scripts": {
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix",
"format": "prettier --write \"src/**/*.{js,vue,json,css,scss}\""
}
}
VS Code Integration
// .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
],
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false
}
Composition API Rules
// .eslintrc.js
module.exports = {
extends: ['plugin:vue/vue3-recommended'],
rules: {
// Enforce ref unwrapping
'vue/no-ref-as-operand': 'error',
// Enforce reactive destructuring
'vue/no-setup-props-destructure': 'error',
// Enforce defineEmits type
'vue/define-emits-declaration': ['error', 'type-based'],
// Enforce defineProps type
'vue/define-props-declaration': ['error', 'type-based'],
// Component API style
'vue/component-api-style': ['error', ['script-setup']],
// Macro order
'vue/define-macros-order': ['error', {
order: ['defineProps', 'defineEmits']
}]
}
}
Custom Component Rules
// .eslintrc.js
module.exports = {
rules: {
// Require default props
'vue/require-default-prop': 'error',
// Require prop types
'vue/require-prop-types': 'error',
// No unused properties
'vue/no-unused-properties': ['error', {
groups: ['props', 'data', 'computed', 'methods', 'setup']
}],
// Require explicit emits
'vue/require-explicit-emits': 'error',
// No duplicate attributes
'vue/no-duplicate-attributes': ['error', {
allowCoexistClass: true,
allowCoexistStyle: true
}],
// Valid v-model
'vue/valid-v-model': 'error',
// No side effects in computed
'vue/no-side-effects-in-computed-properties': 'error'
}
}
Git Hooks with lint-staged
npm install --save-dev husky lint-staged
npx husky install
npx husky add .git/hooks/pre-commit "npx lint-staged"
// package.json
{
"lint-staged": {
"*.{js,vue}": [
"eslint --fix",
"prettier --write"
]
}
}
Ignore Files
# .eslintignore
node_modules
dist
public
*.min.js
coverage
Project-Specific Overrides
// .eslintrc.js
module.exports = {
root: true,
extends: ['plugin:vue/vue3-recommended'],
rules: {
// Global rules
},
overrides: [
{
// Test files
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
env: {
jest: true
},
rules: {
'vue/one-component-per-file': 'off'
}
},
{
// TypeScript files
files: ['*.ts', '*.tsx', '*.vue'],
rules: {
'@typescript-eslint/explicit-module-boundary-types': 'off'
}
}
]
}
CI/CD Integration
# .github/workflows/lint.yml
name: Lint
on: [push, pull_request]
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node
uses: actions/setup-node@v2
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Run ESLint
run: npm run lint
- name: Check formatting
run: npm run format -- --check
Best Practice Note
This is how we configure ESLint across all CoreUI Vue applications for consistent code quality. ESLint catches errors before runtime, enforces team coding standards, and integrates seamlessly with editors and CI/CD pipelines. Always use the official vue3-recommended preset, enable Prettier for formatting, configure VS Code for automatic fixes on save, use lint-staged with Husky for pre-commit checks, and customize rules based on team preferences. Strict linting saves debugging time and makes code reviews focus on logic rather than style.
For production applications, consider using CoreUI’s Vue Admin Template which includes pre-configured ESLint and Prettier setup.
Related Articles
For related development tooling, check out how to configure Prettier in Vue and how to set up Husky with Vue.
