VS Code 단축키

가장 많이 사용하는 VS Code 단축키 모음 입니다.

익숙해지면 생산성 향상에 많은 도움이 됩니다.

편집 단축키

항목	단축키
HTML 초기 tag 자동완성	! + Tab
주석 적용 (한줄 단위)	Ctrl + /
블록 주석 묶기 ( /*  */)	Alt + Shift + a
일치하는 텍스트 찾기	Ctrl + F
일치하는 텍스트 바꾸기	Ctrl + H
설정창 열기	Ctrl + , (콤마)
터미널 열기 / 닫기	Ctrl + ` (백틱)
왼쪽 탐색기 창 열기 / 닫기	Ctrl + B
폰트 사이즈 조정	Ctrl + '+' , Ctrl + '-'
좌측 또는 우측 화면으로 포커스 하기	Ctrl + 1 or 2
열어 놓은 탭 간 이동	Ctrl + PageUp or PageDown
파일 검색해서 빠르게 열기	Ctrl + p
자동정렬	Shift + Alt + F / 전체 선택후 Ctrl + K + F
해당 라인으로 이동하기	Ctrl + G
해당 함수 정의문으로 이동	F12 / Ctrl + 클릭
해당 함수 정의문 엿보기	Alt + F12
코드를 함수나 변수로 감싸주는 기능(리팩토링)	Ctrl + Shift + R
한줄 복사	Shift + Alt + (↑ or ↓ )
한줄 이동	Alt + (↑ or ↓ )
한줄 삭제	Ctrl + Shift + k / Ctrl + x
코드 한 라인 블록으로 묶기	Ctrl + L
같은 단어 하나씩 선택 (아래로 하나씩 선택)	Ctrl + D
같은 단어 전체 선택	Ctrl + Shift + L
Ctrl + H 눌러서 모든 단어를 바꾸는 기능을 한번에 가능	F2
멀티 커서	Alt + Click
길다란 커서	Ctrl + Alt + (↑ or ↓ )
자유 영역 지정	Shift + Alt + 마우스 드래그
드래그된 모든 줄의 끝에 커서를 모두 생성	Alt + Shift + I
문자를 자동으로 괄호로 묶어 줌	마우스드래그 + (
에러 발생시 없는 모듈을 자동으로 찾아줌(import)	Ctrl + . (포인트)

 

React 단축키

컴포넌트를 단축키로 생성하기 위해서는 추가로 react snippet 확장프로그램을 설치해야 합니다.

 

Prefix	Method
imr→	import React from 'react'
imrd→	import ReactDOM from 'react-dom'
imrc→	import React, { Component } from 'react'
imrpc→	import React, { PureComponent } from 'react'
imrm→	import React, { memo } from 'react'
imrr→	import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
imbr→	import { BrowserRouter as Router} from 'react-router-dom'
imbrc→	import { Route, Switch, NavLink, Link } from react-router-dom'
imbrr→	import { Route } from 'react-router-dom'
imbrs→	import { Switch } from 'react-router-dom'
imbrl→	import { Link } from 'react-router-dom'
imbrnl→	import { NavLink } from 'react-router-dom'
imrs→	import React, { useState } from 'react'
imrse→	import React, { useState, useEffect } from 'react'
redux→	import { connect } from 'react-redux'
est→	this.state = { }
cdm→	componentDidMount = () => { }
scu→	shouldComponentUpdate = (nextProps, nextState) => { }
cdup→	componentDidUpdate = (prevProps, prevState) => { }
cwun→	componentWillUnmount = () => { }
gdsfp→	static getDerivedStateFromProps(nextProps, prevState) { }
gsbu→	getSnapshotBeforeUpdate = (prevProps, prevState) => { }
sst→	this.setState({ })
ssf→	this.setState((state, props) => return { })
props→	this.props.propName
state→	this.state.stateName
rcontext→	const $1 = React.createContext()
cref→	this.$1Ref = React.createRef()
fref→	const ref = React.createRef()
bnd→	this.methodName = this.methodName.bind(this)

 

React Component 단축키

1. 클래스형 컴포넌트

   입력키 : rcc

import React, { Component } from 'react'

export default class FileName extends Component {
  render() {
    return <div>$2</div>
  }
}

 

2. 함수형 컴포넌트

    - 일반 함수형

       입력키 : rfc (컴포넌트 생성과 동시에 export)

import React from 'react'

export default function $1() {
  return <div>$0</div>
}

     

      입력키 : rfce (export 코드 분리)

import React from 'react'

function $1() {
  return <div>$0</div>
}

export default $1

   

      입력키 : rfcp (props를 가진 컴포넌트 생성)

import React from 'react'
import PropTypes from 'prop-types'

function $1(props) {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

 

- 화살표 함수형

   

     입력키 : rafc  (함수 생성과 함께 export)

import React from 'react'

export const $1 = () => {
  return <div>$0</div>
}

   

    입력키 : rafce  (export 분리)

import React from 'react'

const $1 = () => {
  return <div>$0</div>
}

export default $1

 

다른 Snippet 은 다음 github 사이트 를 참조 합니다.