My goto vscode extension for vuejs

extension.md

1. Vetur: Vue Templates

<vue

hit enter populates a starting vue template

open settings.json add "vetur.validation.template": false

add jsconfig.json

vuejs.github.io/vetur/guide/setup.html#project-setup

<template>
</template>
<script>
export default {}
</script>
<style>
<style>

2. Emmet: For faster html snippet

div>span

ul>li*3>span{Item $}

3. ESLint

/package.json

...
"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
 },
...

extends option allows us to specify the rules we want the linter to use. Currently, vue3-essential and eslint:recommended

or use external /.eslintrc.js file which is more flexible than json

module.exports = {
   "root": true,
   "env": {
      "node": true
   },
   "extends": [
      "plugin:vue/vue3-essential",  /* vue/essential for vue2 */
      "eslint:recommended"
    ],
    "parserOptions": {
        "parser": "babel-eslint"
    },
    "rules": {}
}

reload windows ctrl+shift+p > "reload window"

4. Prettier

add prettier to eslintrc.js

"extends": [
    "@vue/prettier",
    ..
],

fixing linting errors on save

settings.json

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

configure prettier

/.prettierrc.js

different from eslint. It uses prettierrc.js for personal style

I hate double quotes and single quote mixing in code. Irritates the hell out me and please no semi-colons it's not Java -_-

module.exports = {
    singleQuote: true,
    semi: false

reload vscodium and on save this should fix