Auto-Fix On Save
08/15/2024
estimated reading time:1 min
Let’s look at how to use ESLint to keep our Vue JavaScript clean looking. Specifically, we’ll use antfu’s eslint-config which are nice presets including auto-fix on save and a nice one line CLI install tool.
- install VSCode extension
ESLint
- let’s say your app is in
~/app
cd ~/app
npm init
(hit enter for all prompts)pnpm dlx @antfu/eslint-config@latest
- uncommitted changes, continue?
yes
- framework:
Vue
- extra utils:
none
- update
.vscode/settings.json
:yes
- uncommitted changes, continue?
npm install
- in
~/app/.vscode/settings.json
, change thecodeActionsOnSave
section (lines 7-10) to:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always",
"source.organizeImports": "always"
},
- in
~/app/package.json
- you should see some red underlines for ESLint violations
- hit
command + s
to save and you should see ESLint automatically fix the issues 🎉
- add these lines to the
scripts
section of~/app/package.json
:
"lint": "npx eslint .",
"lint:fix": "npx eslint . --fix"
- now you can run
npm run lint
to run the linter - and you can run
npm run lint:fix
to run the linter and autofix