vs code, visual studio 설치 및 확장기능

에디터 프로그램도 유행이 있는지 요즘 자주 보이는 프로그램이

visual studio code, 줄여서 vs code 라고 하는데 나도 한번 써봐야 할것 같아서

몇번 사용후에 간단한 후기처럼 남겨본다.

주로 사용하던 프로그램은 브라켓인데 생각보다 용량차지를 많이해서
에디터플러스하고 왔다갔다하면서 사용하다가

요즘은 vs code에 꽂혀서 자주쓰는데 javascript 코드를 보기엔 vs코드가 더 편한것 같다.

 

설치는 브라켓과 마찬가지고 엄청 간단.

visual studio code 사이트에 들어가서 다운로드하고 설치해주면 끝.

 

 

설치를 마쳤으면 사용하기 편하게 해야할 확장프로그램 설치 작업.

제일 왼쪽 밑에있는 블록 모양아이콘 클릭하면 옆에 검색할수 있게 화면이 나온다.

여기서 필요한 기능 검색해서 설치하면 된다.

 

밑에 확장프로그램 리스트는 현재 내가 유용하게 잘 사용중인 프로그램들!

 

1. 한국어  korea language

 

2. HTML snippets

 

3. CSS support

 

4. JavaScript snippets

5. hightlight-selections-vscode 

선택한 태그의 열린태그 닫는태그를 찾아보기 쉽게 표시해준다.

 

6. auto rename tag

열고닫히는 한쌍의 태그에 이름변경하면 열고닫는 태그에 자동으로 같이 변경되는 프로그램

 

7. rainbow brackets 

브라켓 열고 닫힘이 어디까지인지 보기쉽게 표현함

 

8. vscode-icons / material icon theme 

파일 아이콘

9. 테마

super one dark theme 하고 atom one dark theme를 많이 사용하는거 같은데

정작 테마 다운받아놓고 어둡게(+기본어둡게)로 사용하고 있다.

테마 변경은 파일 - 기본설정 - 색테마 에서 하면된다 (ctrl+k ctrl+t)

 

10. live server 

ftp에 업로드 하지않고 바로 html파일 실행결과를 브라우저로 확인할 수 있다.

우클릭 open with live server 클릭

단축키는 Alt+L Alt+O 

 

11. color highlight

css 색상을 미리 확인할수 있어서 편리함

 

12. ftp-simple

프로그램 설치 후 F1을 누르면

이런 화면이 보이는데 첫번째 config - connection setting 을 클릭하면 파일이 열리는데

여기에서 내가가진 ftp를 등록해주면 된다

host에 도메인 주소

user name에 계정 아이디

password ftp 비밀번호를 입력하면 된다.

여러개를 등록하려면 분홍색 괄호 영역 복사해서 여러개 작성하면 된다.

 

 

연결한 ftp의 파일리스트를 보고싶으면

F1에서 이번엔 Remote directory open to workspace 를 클릭

 

그다음 연결할 ftp서버 선택,  첫번째 .current directory :/ 를 선택하면 왼쪽에 파일 목록이 보여진다.