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

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에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
vscode와 함께 JSON을 포맷하는 방법vscode와 함께 JSON을 포맷하는 방법Apr 16, 2025 am 07:54 AM

코드에서 JSON을 포맷하는 방법은 다음과 같습니다. 1. 바로 가기 키 사용 (Windows/Linux : Ctrl Shift I; MacOS : CMD Shift I); 2. 메뉴를 살펴보십시오 ( "편집"& gt; "형식 문서"); 3. JSON Formatter Extensions (예 : 더 예쁘다) 설치; 4. 수동으로 형식 (바로 가기 키를 사용하여 블록을 들여 쓰기/추출하거나 교정기 및 세미콜론을 추가); 5. 외부 도구 (예 : Jsonlint 및 Json Formatter)를 사용하십시오.

vscode를 컴파일하는 방법vscode를 컴파일하는 방법Apr 16, 2025 am 07:51 AM

VSCODE의 컴파일 코드는 5 단계로 나뉩니다. C 확장을 설치하십시오. 프로젝트 폴더에서 "main.cpp"파일을 만듭니다. 컴파일러를 구성 (예 : Mingw); 바로 가기 키 ( "Ctrl Shift B") 또는 "빌드"버튼으로 코드를 컴파일합니다. 바로 가기 키 ( "F5") 또는 "실행"버튼으로 컴파일 된 프로그램을 실행하십시오.

vscode를 설치하는 방법vscode를 설치하는 방법Apr 16, 2025 am 07:48 AM

Visual Studio Code를 설치하려면 다음 단계를 따르십시오. 공식 웹 사이트 https://code.visualstudio.com/; 운영 체제에 따라 설치 프로그램을 다운로드하십시오. 설치 프로그램을 실행하십시오. 라이센스 계약을 수락하고 설치 경로를 선택하십시오. 설치가 완료된 후 VSCODE가 자동으로 시작됩니다.

Vscode로 글꼴을 확대하는 방법Vscode로 글꼴을 확대하는 방법Apr 16, 2025 am 07:45 AM

Visual Studio 코드에서 글꼴을 확대하는 방법은 다음과 같습니다. 설정 패널 (CTRL 또는 CMD)을 엽니 다. "글꼴 크기"를 검색하고 조정하십시오. 올바른 크기의 "글꼴 패밀리"를 선택하십시오. 올바른 크기를 제공하는 테마를 설치하거나 선택하십시오. 키보드 바로 가기 (CTRL 또는 CMD)를 사용하여 글꼴을 확대하십시오.

VSCODE를 사용하여 원격 서버에 연결하는 방법VSCODE를 사용하여 원격 서버에 연결하는 방법Apr 16, 2025 am 07:42 AM

VSCODE를 통해 원격 서버에 연결하는 방법은 무엇입니까? 원격 설치 -SSH 확장 구성 SSH vscode에서 연결을 만듭니다. 연결 정보 입력 정보 : 호스트, 사용자 이름, 포트, SSH 키 원격 탐색기에서 저장된 연결을 두 번 클릭하십시오.

vscode로 vue를 실행하는 방법vscode로 vue를 실행하는 방법Apr 16, 2025 am 07:39 AM

VSCODE에서 VUE 프로젝트를 실행하는 단계가 필요합니다. 1. VUE CLI를 설치하십시오. 2. VUE 프로젝트를 만듭니다. 3. 프로젝트 디렉토리로 전환하십시오. 4. 프로젝트 종속성을 설치하십시오. 5. 개발 서버를 실행하십시오. 6. 브라우저를 열면 http : // localhost : 8080을 방문하십시오.

두 파일을 VSCODE와 비교하는 방법두 파일을 VSCODE와 비교하는 방법Apr 16, 2025 am 07:36 AM

vscode에서 파일을 비교하는 방법 : 1. 두 파일을 엽니 다. 2. 차이점보기 (보기 메뉴), 3. 차이점보기 (녹색 추가, 빨간색 삭제, 자주색 수정), 4. 화살표 키를 사용하여 탐색, 5. 변경 사항을 수락하거나 거부하십시오. 추가 기능에는 변경 사항 병합, 변경 사항 복사, 세부 사항보기 및 편집 차이가 포함됩니다.

VSCODE로 JS 코드를 실행하는 방법VSCODE로 JS 코드를 실행하는 방법Apr 16, 2025 am 07:33 AM

VSCODE에서 JS 코드를 실행하는 방법은 무엇입니까? .js 파일을 작성하고 코드를 작성합니다. Node.js 및 NPM을 설치하십시오. Chrome 용 디버거를 설치하십시오. 디버그 콘솔을 엽니 다. 크롬 선택; 디버그 구성 추가; 디버그 스크립트를 설정하십시오. 코드 실행; 디버그 코드 (선택 사항).

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)