Setting up ESLint for Vue 3 in VSCode

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

‍

‍

‍