Visual studio code 사용법

- VS Code , vscode , 설정, 사용팁, 사용방법

 

* 설치
https://code.visualstudio.com/

 

    - 여러 버전 다운로드(이전 버전 update release note & download)

https://code.visualstudio.com/updates

 

    User Installer : 관리자 권한이 필요 없는 경우
    System Installer : 관리자 권한이 필요한 경우


* 단축키 변경
    - File -> Preferences -> Keyboard Shoutcuts
        : 해당기능을 검색 -> 더블 클릭후 -> 새로운 단축키 입력


* 설정 파일 위치
C:\Users\username\AppData\Roaming\Code\User
    settings.json , keybindings.json

    - 확장
C:\Users\username\.vscode\extensions

//==================

* 메뉴 표시 언어(국가) 변경

- 한글을 표시하기 위해서는 extensions(확장)에서 Korean Language Pack을 설치

 

- 언어 설정

C:\Users\username\AppData\Roaming\Code\User

locale.json

{

"locale":"en" // 한글=ko, 영어=en

}

 

- 언어 설정 다른 방법 

Command Palette 호출 : Ctrl + Shift + P 

검색창에 display 입력 -> Configure Display Language 선택

 

 

//===================

* 여러 파일에서 찾기, 특정 폴더를 검색에서 제외 시키기

 

예) folder1, folder2 제외 시키기

files to exclude 에 추가

**/folder1/*,**/folder2/*

 

- 다른 방법 : 환경 설정에 추가

File -> Prefoerences -> Setting 

search.exclude 검색 -> Add Pattern

**/folder1

 

 

//==============
< 단축키 >

* 코드 글자 정렬
    Format Document : Shift + Alt +F

- code arrange(beautify)

//=======================    

* 키보드로 터미널 명령 실행하기

 

- Extension 설치

Run in Terminal

https://marketplace.visualstudio.com/items?itemName=kortina.run-in-terminal

https://github.com/kortina/run-in-terminal

 

- 설정

- keybindings.json 파일 수정

{

    "key": "ctrl+e",

    "command": "runInTerminal.run",

    "args": {"cmd": "/usr/bin/env python ${relativeFile}", "match": ".*"},

    "when": "resourceLangId == python"

}

 

 

 

//============
< Extensions >

* PHP 메소드(함수) 리스트 보기
    - 'PHP Symbols' extention 설치
        - 파일 리스트 밑에 있는 OUTLINE(개요) 창에 나옴


//==========
< 설정 >
File -> Preferences -> Setting


* 자동 줄 바꿈
    Word Wrap : on


* 자동 업데이트 중단
    "update.channel":"none"


* 창 크기 보존(이전 창크기와 위치로 실행)
    window.newWindowDimensions : inherit

 

* 최근 파일 열기(Open Recent) 를 새창으로 열기

"window.openFoldersInNewWindow": "on"

 

- 또는 최종 프로젝트 선택시 Ctrl 키를 누르고 클릭

 

 

* vs code , 자바스크립트에서 모듈 자동 임포트 코드가 자동으로 삽입되는 문제 막기

js moduel auto require module code insert problem

설정 -> autoImports 로 검색

 

JavaScript › Suggest: Auto Imports

Enable/disable auto import suggestions. Requires using TypeScript 2.6.1 or newer in the workspace.

-> 체크 해제

    

 

* 창 전체 확대 축소

    - View -> Appearence -> Zoom In (Out)

 

 

//------------------

* php 등 언어별 포맷터 지정하기(php formatter set to intelepehse)

 

settings.json 파일 수정

 

"editor.defaultFormatter": null <=== 삭제하거나 null로 설정

"intelephense.format.enable": true,

"[php]": {

        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"

},

 

-- 참고 , 자바스크립트 포맷터로 prettier 지정하기

"[json, javascript, html]": {

        "editor.defaultFormatter": "esbenp.prettier-vscode"

    },