Dev Record

0. Problem

Spring + Vue 프로젝트 구축 후, VS Code로 Vue 프로젝트를 열었을 때, IDE에서 Vue 문법을 인식하지 못하며 빨간 줄과 함께 해당 오류가 발생했다.

vetur can't find tsconfig.json or jsconfig.json
vetur can't find 'package.json'

1. Reason

Visual Studio Code의 Vue Extention인 Vetur의 경우, VS Code로 Spring Project 폴더를 열 때, vue Project내 package-json이 존재하지 않아 해당 오류가 발생하게 된다.

2. Solved

Vue Project 기준 root위치에서 폴더를 선택하여 열게 되면 오류가 사라진다.

Spring과 Vue를 동시에 작업하기 위해 Spring Project의 Root 위치에서 열고싶다면, 프로젝트의 최상위 폴더( Spring Project의 Root 위치 )에 vectur.config.js 를 생성해주면 된다. 공식문서

#Advanced

If you use a monorepo, VTI or package.json and tsconfig.json/jsconfig.json does not exist at project root, you can use vetur.config.js for advanced settings.

Please add vetur.config.js at project root or monorepo project root.

vectur.config.js

javascript

// vetur.config.js
/** @type {import('vls').VeturConfig} */
module.exports = {
    // **optional** default: `{}`
    // override vscode settings
    // Notice: It only affects the settings used by Vetur.
    settings: {
      "vetur.useWorkspaceDependencies": true,
      "vetur.experimental.templateInterpolationService": true
    },
    // **optional** default: `[{ root: './' }]`
    // support monorepos
    projects: [
      './packages/repo2', // Shorthand for specifying only the project root location
      {
        // **required**
        // Where is your project?
        // It is relative to `vetur.config.js`.
        root: './packages/repo1',
        // **optional** default: `'package.json'`
        // Where is `package.json` in the project?
        // We use it to determine the version of vue.
        // It is relative to root property.
        package: './package.json',
        // **optional**
        // Where is TypeScript config file in the project?
        // It is relative to root property.
        tsconfig: './tsconfig.json',
        // **optional** default: `'./.vscode/vetur/snippets'`
        // Where is vetur custom snippets folders?
        snippetFolder: './.vscode/vetur/snippets',
        // **optional** default: `[]`
        // Register globally Vue component glob.
        // If you set it, you can get completion by that components.
        // It is relative to root property.
        // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
        globalComponents: [
          './src/components/**/*.vue'
        ]
      }
    ]
  }