By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Setting up ESLint for Vue 3 in VSCode

Published:
June 25, 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

More to Read...