DEV Community

loading...

Setting up ESLint for Vue 3 in VSCode

mikhailkaran profile image Mikhail Karan ・1 min read

Make sure eslint is installed and updated for your project

npm install --save-dev eslint eslint-plugin-vue
Enter fullscreen mode Exit fullscreen mode

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'
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

Forem Open with the Forem app