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)
Configuring lint-staged ensures code quality by automatically running linters and formatters on staged files before each commit. As the creator of CoreUI with over 10 years of Vue.js experience since 2014, I’ve set up lint-staged in countless Vue projects to maintain consistent code style across teams. The most effective approach combines lint-staged with husky for git hooks, ESLint for linting, and Prettier for formatting. This setup catches issues early and prevents poorly formatted code from entering the repository.
Install lint-staged and husky, then configure them in package.json.
npm install --save-dev lint-staged husky
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
Here lint-staged runs linters on staged files only, not the entire codebase. The husky package manages git hooks. The npx husky add command creates a pre-commit hook that runs lint-staged automatically before each commit.
Configuring lint-staged in package.json
Add lint-staged configuration to run ESLint and Prettier on Vue files.
{
"lint-staged": {
"*.{vue,js,ts}": [
"eslint --fix",
"prettier --write"
],
"*.{css,scss,html}": [
"prettier --write"
]
}
}
The lint-staged object maps file patterns to commands. For Vue, JavaScript, and TypeScript files, ESLint runs first with --fix to automatically fix issues, then Prettier formats the code. For styles and HTML, only Prettier runs. The commands execute in order for matching staged files.
Creating a Standalone Configuration File
Create .lintstagedrc.js for more complex configurations.
module.exports = {
'*.{vue,js,ts}': [
'eslint --fix',
'prettier --write'
],
'*.{css,scss}': [
'stylelint --fix',
'prettier --write'
],
'*.vue': [
() => 'vue-tsc --noEmit'
]
}
This configuration file provides more flexibility than package.json. The stylelint command checks CSS syntax in addition to formatting. The function syntax for TypeScript checking runs vue-tsc once instead of once per file, improving performance for type checking.
Configuring with ESLint and Prettier
Ensure ESLint and Prettier are configured for Vue 3.
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'prettier'
],
rules: {
'vue/multi-word-component-names': 'off'
}
}
The plugin:vue/vue3-recommended preset enforces Vue 3 best practices. The prettier config at the end disables ESLint formatting rules that conflict with Prettier. This prevents conflicts between the two tools.
Setting Up Husky Properly
Configure husky to ensure lint-staged runs on commits.
npm install --save-dev husky
npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/pre-commit "npx lint-staged"
The prepare script automatically installs husky hooks when anyone runs npm install. This ensures all team members have the same git hooks configured. The pre-commit hook blocks commits if lint-staged finds unfixable errors.
Adding TypeScript Type Checking
Include TypeScript type checking in the lint-staged workflow.
// .lintstagedrc.js
module.exports = {
'*.{vue,ts,tsx}': () => 'vue-tsc --noEmit',
'*.{vue,js,ts}': [
'eslint --fix',
'prettier --write'
]
}
The function syntax () => 'vue-tsc --noEmit' runs type checking once for all staged files instead of once per file. The --noEmit flag checks types without generating output files. This catches type errors before commit without slowing down the process significantly.
Handling Vue Test Files
Configure different rules for test files.
module.exports = {
'*.{vue,js,ts}': [
'eslint --fix',
'prettier --write'
],
'*.spec.{js,ts}': [
'eslint --fix',
'prettier --write'
],
'*.{css,scss}': [
'prettier --write'
]
}
Test files follow the same linting rules as source files but can have separate patterns if needed. The *.spec.{js,ts} pattern matches test files specifically, allowing different ESLint rules for tests if configured in .eslintrc.js.
Best Practice Note
This is the same lint-staged setup we use across all CoreUI Vue projects to maintain code quality and consistency. The key is balancing thoroughness with speed - type checking all files can be slow, so the function syntax runs it once instead of per-file. For teams new to automated linting, start with just ESLint and Prettier, then add type checking once everyone is comfortable with the workflow. Consider using CoreUI Vue components which follow these same code quality standards out of the box, ensuring your project maintains professional-grade code consistency.
