Setup

Extensions

VS Code Config

  • Add vue to your eslint.validate setting, for example:

    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
    ]
    

Project Setup

  • At project root create a jsconfig.json or tsconfig.json that include all vue files and files that they import from, for example:

  • jsconfig.json

      {
        "include": [
          "./src/**/*"
        ]
      }
    
  • tsconfig.json

      {
        "include": [
          "./src/**/*"
        ],
        "compilerOptions": {
          "module": "es2015",
          "moduleResolution": "node",
          "target": "es5",
          "sourceMap": true,
          "allowJs": true
        }
      }
    

jsconfig vs tsconfig

  • Use tsconfig for pure TS project.
  • Use jsconfig for pure JS project.
  • Use jsconfig or tsconfig with allowJs: true for mixed JS / TS project.

Path mapping

If you are using Webpack's alias or TypeScript's path mapping to resolve components, you need to update Vetur's tsconfig.json or jsconfig.json.

For example:

└── src
    ├── components
    │   ├── a.vue
    │   └── b.vue
    ├── containers
    │   └── index.vue
    ├── index.js
    └── jsconfig.json

jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "components/*": [
                "src/components/*"
            ]
        }
    }
}

index.vue

import a from 'components/a.vue'
import b from 'components/b.vue'