> 개발 도구 > VSCode > 본문

vscode에서 Vue 별칭 경로 스마트 프롬프트를 설정하는 방법은 무엇입니까?

青灯夜游
풀어 주다: 2020-09-04 10:27:07
앞으로
6252명이 탐색했습니다.

vscode에서 Vue 별칭 경로 스마트 프롬프트를 설정하는 방법은 무엇입니까?

프로젝트 개발을 위해 Vue 프레임워크를 사용하는 경우 vue.config.js에서 경로 별칭을 구성한 후 다른 페이지에 구성 요소, CSS 및 정적 파일 경로를 도입하는 경우 경로를 사용하여 별칭은 지능적으로 경로를 묻는 메시지를 표시하지 않습니다. Path Intellisensevue.config.js 中配置好了路径别名后,到其他页面引入组件、引入 css 、引入静态文件路径时,使用路径别名不会智能提示路径。虽然在 vscode 中安装了 Path Intellisense 插件,但是并无作用。这样容易出现路径拼写错误的低能问题,同时也会造成开发效率降低

相关推荐:《vscode基础教程》、《vue教程

解决方案

  • 在项目 package.json 所在同级目录下创建文件 jsconfig.json, 来解决别名路径不提示的问题。(配置完保存文件后需要重启编辑器才能生效。而且它只能识别 .vue.js结尾的文件,css文件与其他的静态文件依然没有提示, 不推荐!!!

// .jsconfig.json  
{  
    "compilerOptions": {  
        "baseUrl": ".",  
        "paths": {  
            "@/\*": \['src/\*'\],  
            "a/\*": \["src/assets/\*"\],  
            "c/\*": \["src/components/\*"\],  
            ...  
        }  
     },  
    "include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\], 
    "exclude": \["node\_modules"\]  
}
로그인 후 복사
  • 在 vscode 的 setting.json 플러그인이 설치되어 있지만 vscode, 그러나 효과가 없습니다. 이는 경로 철자 오류와 같은 무능한 문제가 발생하기 쉽고 개발 효율성도 저하시킵니다

    관련 권장 사항: "vscode 기본 튜토리얼
  • ", "vue tutorial

solution

  • 🎜별칭 경로가 표시되지 않는 문제를 해결하려면 package.json 프로젝트와 동일한 디렉터리에 jsconfig.json 파일을 생성하세요. (파일을 구성하고 저장한 후 적용하려면 편집기를 다시 시작해야 합니다. 그리고🎜.vue.js, 로 끝나는 파일만 인식할 수 있습니다. css 파일 및 기타 정적 파일에 대한 메시지가 아직 표시되지 않으므로 권장되지 않습니다. 🎜🎜🎜
    // setting.json  
    "path-intellisense.mappings": {  
        "a": "${workspaceRoot}/src",  
        "c": "${workspaceRoot}/src/components",  
        ...  
    }
    로그인 후 복사
    • 🎜🎜 vscode의 setting.json에서 경로 Intellisence를 구성하세요(이것은 솔루션이 가장 선호되며, 모든 형식의 파일을 인식할 수 있고 적용 범위가 가장 넓습니다. 별칭이 변경되면 구성만 수정하면 됩니다. 🎜🎜🎜rrreee🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 🎜프로그래밍 튜토리얼 🎜! ! 🎜🎜

    위 내용은 vscode에서 Vue 별칭 경로 스마트 프롬프트를 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿