VS Code 사용하면서 유용한 기능들 정리!

* VSCode 자주 사용하는 단축키

1. Tab키 안먹을 때

강아지가 키보드에서 발장구를 쳤더니 VSCode 에디터 화면에서 갑자기 탭키가 먹질 않았다. 

탭키 대신 왼쪽 메뉴 부분이 활성화 된다면 Ctrl + M 을 누르면 해제된다. 

 

2. 같은 단어 선택하기

Ctrl + D : Ctrl 누른 상태에서 d 를 누르면 같은 단어를 쉽게 찾을 수 있다. 완전 습관처럼 씀. 

---

* React Snippets 라이브러리

1. React Snippets 설정하기

React Snippets 라이브러리를 다운 받는다. 

- 내가 사용하는 세팅

{
    "workbench.iconTheme": "material-icon-theme",
    "workbench.startupEditor": "newUntitledFile",
    "peacock.favoriteColors": [
        {
            "name": "Angular Red",
            "value": "#b52e31"
        },
        {
            "name": "Auth0 Orange",
            "value": "#eb5424"
        },
        {
            "name": "Azure Blue",
            "value": "#007fff"
        },
        {
            "name": "C# Purple",
            "value": "#68217A"
        },
        {
            "name": "Gatsby Purple",
            "value": "#639"
        },
        {
            "name": "Go Cyan",
            "value": "#5dc9e2"
        },
        {
            "name": "Java Blue-Gray",
            "value": "#557c9b"
        },
        {
            "name": "JavaScript Yellow",
            "value": "#f9e64f"
        },
        {
            "name": "Mandalorian Blue",
            "value": "#1857a4"
        },
        {
            "name": "Node Green",
            "value": "#215732"
        },
        {
            "name": "React Blue",
            "value": "#00b3e6"
        },
        {
            "name": "Something Different",
            "value": "#832561"
        },
        {
            "name": "Vue Green",
            "value": "#42b883"
        }
    ],
    "javascript.updateImportsOnFileMove.enabled": "never",
    "liveServer.settings.donotShowInfoMsg": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact" 
    },
    "workbench.colorTheme": "Tomorrow Night Blue"
}

 

 

2. Live Server

1. live server 검색후 install

2. 원하는 파일을 연후 하단의 Go live 라고 씌인 부분 클릭하면 자동으로 열린다.

 

---

* 그 외 React 개발시 유용한 설정

1. 리액트에서 JSX 자동완성 적용하기

setting.json파일에서 emmet language설정을 해주면된다.

"emmet.includeLanguages": {
    "javascript" : "javascriptreact"
}

 

2. Snippet 직접 만들기! 

리액트 스타일링시 이모션을 주로 사용하는데 emotion을 사용하려면 

최 상단에 항상 추가 코드를 주어야 하므로 매번 넣어주는게 귀찮다. 

snippet으로 추가 설정을 하면 쉽고 더 빠르게 개발할 수 있다. 

 

2-1.

https://snippet-generator.app/

사이트에 접속한뒤 원하는 템플릿 구조를 왼쪽에 작성한다.

 

2-2. vscode 로 돌아와서

File > Preferences > User Snippet 을 클릭하면 상단에 사용할 언어를 쓰면된다

javascriptreact.json 을 선택 후 사이트에서 변환된 코드를 삽입해주면된다.

사용하려면 파일언어를 javascript에서 javascript react로 변경해줘야한다.

파일이 열린 상태에서

우측 하단에 보면 사용중인 언어가 나와있다.

javascript로 되어있다면 해당 부분을 클릭한다.

 

 

 

 

snippet설정시 trigger 문자를 srfc로 했으니

이제 srfc를 입력하고 엔터를 누르면 저장한 자동완성이 제대로 작동되는것을 볼 수 있다.