>  기사  >  개발 도구  >  vscode에서 Vue 별칭 경로 스마트 프롬프트를 설정하는 방법은 무엇입니까?

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

青灯夜游
青灯夜游앞으로
2020-09-04 10:26:496258검색

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으로 문의하시기 바랍니다. 삭제