[Vue3 + typescript] Volar 설치

VUE.JS 목록

 

Volar는 VSCode에서 구문 강조 표시, typescript 지원, 템플릿 표현식 및 구성 요소를 도와줘서 코딩을 편리하게 해줍니다.

지금 Vetur가 설치되어 있어서 Vetur로 경고가 표시됩니다.

 

 

Vetur 비활성화

기존에 Vetur를 사용했다면

VSCode에서 Vetur를 해당 프로젝트에서만 비활성화 해줍니다.

(다른 프로젝트에서는 사용할 수 있음)

 

Vetur를 비활성화하면 .vue 파일 코드에 색상을 표시하지 않습니다.

 

 

Volar 설치

Volar를 검색해서 두개의 플러그인을 설치합니다.

 

사용 안함으로 변경했다가 현재 프로젝트에서만 사용할 수 있도록 설정합니다.

 

.vue 파일이 다시 색상이 표시됩니다.

 

 

 

 

 

eslint 설정

코드에 노란색 줄 표시가 되어 있습니다.

 

 

 

command + ,

설정에서 setting.json 편집을 누릅니다.

{
    "workbench.colorTheme": "Night Owl",
    "workbench.startupEditor": "newUntitledFile",
    "prettier.singleQuote": true,
    "prettier.useEditorConfig": false,
    "editor.tabSize": 2,
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },
    "vetur.format.options.useTabs": false,
    "prettier.trailingComma": "all",
    "prettier.arrowParens": "avoid",
    "editor.useTabStops": false,
    "prettier.jsxSingleQuote": true,
    "javascript.format.semicolons": "insert",
    "typescript.format.semicolons": "insert",
    "typescript.preferences.quoteStyle": "single",
    "eslint.validate": [
    
      "vue",
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
    ],
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.workingDirectories": [
      {
        "mode": "auto"
      }
    ],
    // don't format on save
    "editor.formatOnSave": false,
    "javascript.preferences.quoteStyle": "single",
    "editor.minimap.enabled": false,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "editor.mouseWheelZoom": false,
    "window.zoomLevel": 0,
    "workbench.iconTheme": "material-icon-theme",
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "terminal.integrated.tabs.location": "left",
    "terminal.integrated.tabs.enabled": false
  }

위와같이 기본 설정되어 있습니다.

 

 

 

formatOnSave를 true로 변경하고 저장합니다.

 

노란 경고 표시가 있는 파일을 열어서 저장을 하면

코드 포맷이 설정대로 변경되며 경고 줄이 없어집니다.

 

 

 

 

 

VUE.JS 목록