Setting up ESLint for Vue 3 in VSCode

Published:
June 25, 2021
September 9, 2021
Updated:
September 7, 2021

Make sure eslint is installed and updated for your project

npm install --save-dev eslint eslint-plugin-vue

Create a .eslintrc.js file in your projects root directory:

<script src="https://gist.github.com/mikhail-karan/02ba295726b8e24e7a752d28dbcd2264.js"></script>

Disable vetur in VSCodes settings (if you had it installed)

I'd personally recommend only disabling it on the project level using the workspace settings tab. Mainly because if you still have some vue 2 projects you want vetur to continue to lint them.

"vetur.validation.style": false

vetur doesn't yet support vue 3 fully so it can conflict with some of the new features. If you add a <Teleport> ... </Teleport> to a component, you'll see a huge red wall because vue 2 didn't support multiple root elements in a component, while vue 3 does.

Resources

https://eslint.vuejs.org/user-guide/#installation

Written by...
Mike Karan

I've been a full-stack web developer for 8+ years! Co-host of the HTML All The Things Podcast. I love all things technology.

More to Read...