IDE 지원

mdui는 VS Code 및 WebStorm에 특별히 최적화되어 있어, 이러한 IDE에서 코드 자동 완성, 마우스 오버 힌트 등의 기능을 사용합니다.

VS Code

npm을 통해 mdui 설치한 경우

npm을 통해 mdui를 설치했다면 다음 단계에 따라 현재 프로젝트에서 VS Code의 IDE 지원을 활성화할 수 있습니다:

1. 프로젝트 루트 디렉터리에 .vscode 디렉터리를 생성합니다.
2. .vscode 디렉터리에 settings.json 파일을 생성합니다.
3. 다음 코드를 settings.json 파일에 추가합니다:

   {
     "html.customData": ["./node_modules/mdui/html-data.en.json"],
     "css.customData": ["./node_modules/mdui/css-data.en.json"]
   }
   

settings.json 파일이 이미 존재하는 경우, 위 두 줄의 코드를 JSON 문서의 루트 노드에 추가하기만 하면 됩니다. 수정이 완료되면 VS Code를 다시 시작하세요.

CDN을 통해 mdui 사용하는 경우

CDN을 통해 mdui를 도입한 경우, mdui의 VS Code 확장 프로그램을 설치하여 IDE 지원을 받을 수 있습니다.

VS Code의 확장 프로그램 마켓플레이스에서 mdui를 검색하고 첫 번째 검색 결과를 설치하거나, 여기를 클릭하여 설치하세요. 설치가 완료되면 모든 프로젝트에서 mdui의 IDE 지원이 활성화됩니다.

VS Code 확장 프로그램을 설치하는 대신 npm을 통해 설치하고 settings.json 파일을 설정하는 것이 좋습니다. 그래야 현재 사용 중인 mdui 버전과 IDE 지원이 일치하기 때문입니다.

WebStorm

npm을 통해 mdui 설치한 경우

npm을 통해 mdui를 설치했다면 다음 단계에 따라 현재 프로젝트에서 WebStorm의 IDE 지원을 활성화할 수 있습니다:

1. 프로젝트 루트 디렉터리의 package.json 파일 루트 노드에 다음 코드를 추가합니다:

   {
     "web-types": ["./node_modules/mdui/web-types.en.json"]
   }
   

package.json 파일의 루트 노드에 web-types 속성이 이미 존재하는 경우 ./node_modules/mdui/web-types.en.json을 web-types 배열에 추가하기만 하면 됩니다. 수정이 완료되면 WebStorm을 다시 시작하세요.

CDN을 통해 mdui 사용하는 경우

CDN을 통해 mdui를 도입한 경우, mdui의 WebStorm 플러그인을 설치하여 IDE 지원을 받을 수 있습니다.

WebStorm의 플러그인 마켓플레이스에서 mdui를 검색하고 첫 번째 검색 결과를 설치하세요. 설치가 완료되면 모든 프로젝트에서 mdui의 IDE 지원이 활성화됩니다.

WebStorm 플러그인을 설치하는 대신 npm을 통해 설치하여 IDE 지원을 받는 것이 좋습니다. 그래야 현재 사용 중인 mdui 버전과 IDE 지원이 일치하기 때문입니다.

VS Code와 WebStorm 지원 차이

mdui는 VS Code와 WebStorm에 대한 지원에 차이가 있습니다. 다음 표에 자세한 차이점이 나열되어 있습니다: