[VS Code] Live Server 포트설정 적용되지 않는 경우

 

VS Code Extension 중 유용하게 쓰이는 "Live Server" 에 대해 다룹니다.

Debug 환경 설정 중 생긴 현상으로, Live Server의 포트설정을 바꿨으나 적용되지 않는 현상이 있었습니다.

비교적 간단한 현상으로 쉽게 조치할 수 있습니다.

1. Live Server "setting.json" 설정

 1) VS Code 마켓 플레이스에서 Live Server 검색

 2) "사용 안함" ,"제거" 버튼 옆 "톱니버튼" 클릭

 3) "확장 설정" 클릭

 4) 출력되는 설정 창에서 카테고리 구분없이 "setting.json에서 편집" 클릭

[톱니버튼 클릭]

[settings.json에서 편집 클릭]

2. Port 설정 부 확인

 위 순서로 진행하면 출력되는 setting.json의 내용입니다.

여기서 "liveServer.settings.port"의 값을 수정하였으나, Live Server 실행 시 전환된 포트로 실행되지 않는 현상에 대한 해결책입니다.

3. setting.json의 디렉토리 확인

 문제의 원인은 Liver Server가 바라보는 setting.json이 프로젝트 내에 별도로 생성되었기 때문이었습니다.

 필자는 Git의 변경사항에 새로운 setting.json이 생성되어 확인 할 수 있었으나, 형상관리를 사용하시지 않는 분들이라면 아래 디렉토리 구조를 확인해보시기 바랍니다.

기본적으로는 프로젝트 범위가 아닌 VS Code 전반에 적용되는 Extension으로,

"[user] > AppData > Roaming > Code > User" 하위 경로에 setting.json에 설정됩니다.

[설정파일 위치]

그러나, 실제 참조하고 있던 setting.json은 프로젝트 하위에 생성되어 우선 시 적용되고 있는 것을 확인할 수 있습니다. (launch.json은 Debug Extension의 것으로 연관없음.)

"['프로젝트 경로'] > .vscode "

[프로젝트 범위 설정위치]

프로젝트 별로 설정할 수 있는 옵션이 있으나, 

별도의 파일생성이나 다른 설정값 없이 포트값만 변경한 경우에 해당 파일이 생겨 우선 시 적용되었습니다.

해결방법은 프로젝트 범위의 setting.json을 삭제하면 AppData 하위의 경로에 setting.json이 정상 적용됩니다.