How to configure lint-staged in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Running the linter on your entire codebase before every commit is slow and discourages developers from committing often. As the creator of CoreUI with 25 years of experience building large-scale frontend projects, I’ve standardized on lint-staged to run ESLint and Prettier only on the files you actually changed. Combined with Husky git hooks, this setup catches code quality issues automatically without slowing down your workflow. The result is a consistent codebase where every committed file meets your style and quality standards.
Install lint-staged and Husky, then configure them to run on staged files.
npm install --save-dev lint-staged husky
npx husky init
# .husky/pre-commit
npx lint-staged
Configure lint-staged in package.json
Define which commands run on which file types.
{
"lint-staged": {
"*.{vue,ts,js}": [
"eslint --fix",
"prettier --write"
],
"*.{css,scss}": [
"prettier --write"
],
"*.{json,md}": [
"prettier --write"
]
}
}
Each key is a glob pattern matching staged files. The commands run sequentially on the matched files. eslint --fix auto-fixes what it can; prettier --write formats the file in place. If ESLint finds unfixable errors, the commit is blocked.
Alternatively, Use a lint-staged Config File
For more complex setups, create a dedicated config file.
// lint-staged.config.js
export default {
'*.{vue,ts,tsx}': (files) => [
`eslint --fix ${files.join(' ')}`,
`prettier --write ${files.join(' ')}`
],
'*.{css,scss,json,md}': 'prettier --write'
}
The function form receives the list of staged files and returns commands as strings. This lets you build dynamic commands, for instance passing all changed files to ESLint at once to respect cross-file rules.
Vue-specific ESLint Setup
Make sure ESLint is configured to understand Vue single-file components.
// eslint.config.js (ESLint 9 flat config)
import pluginVue from 'eslint-plugin-vue'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
export default defineConfigWithVueTs(
pluginVue.configs['flat/recommended'],
vueTsConfigs.recommended,
{
rules: {
'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-explicit-any': 'warn'
}
}
)
eslint-plugin-vue parses .vue files and adds Vue-specific rules. Without it, ESLint cannot lint the <template>, <script>, or <style> blocks inside single-file components.
Verify the Setup
Test that lint-staged runs correctly before relying on it.
# Stage a file with a known lint error, then run manually
git add src/components/MyComponent.vue
npx lint-staged
# Or trigger via commit
git commit -m "test: verify lint-staged"
If ESLint finds errors it cannot auto-fix, the commit is blocked and the error is printed. Fix the issue, stage the changes again, and retry the commit.
Best Practice Note
This is the same toolchain setup we use in CoreUI Vue projects to maintain code quality across all contributors. Pair lint-staged with Prettier configuration to enforce consistent formatting. For TypeScript Vue projects, set vue-tsc --noEmit as an additional step in the pre-commit hook to catch type errors before they reach CI.
