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:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/vue3-recommended',
    // 'plugin:vue/vue3-essential', // This option doesn't impose formatting rules
    // 'plugin:vue/vue3-strongly-recommended', // This option imposes formatting rules on your code to improve readability 
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

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.

HTML All The Things

While you're here, check out the HTML All The Things Podcast that I co-host. We talk about Web Development, Freelancing, Small Business and Productivity.

Resources

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

Comments

[Glen Little]

Thanks!
For the "vetur.validation.style": false sample, can you show/explain exactly where that should be put?

[Tobias Brandstädter]

I'm not sure about how relevant this still is, but in VS Code there is a function called Workspace Settings. You can view them as JSON by searching for "Workspace Settings (JSON)" in your command palette.

code.visualstudio.com/docs/getstar...