(환경설정) 프론트엔드 개발자를 위한 vscode 에디터 세팅과 확장프로그램(extension)

 

1. 들어가는 글

나는 모든 개발을 가르치기 전에 IDE나 에디터에 대해서 한 시간 정도 강의를 할애해야 한다고 생각하는 사람이다.

 

개발환경은 단지 코드를 작성하는 프로그램이라고 과소평가할 것이 아니기 때문이다.

Rust가 C++를 대체할 수 있다고들 하지만 아직까지 Rust의 개발 환경이 제대로 갖춰지지 않아있기 때문에 쉽지 않을 거라는 비판이 많다.

 

개발환경은 그 자체가 프로그래밍 언어와 밀접한 관계가 있다.

인간이라면 프로그래밍 언어의 모든 클래스와 함수를 다 외울 수 없기 때문에 IDE가 미리 보기와 제안을 해주는 것이고,

모든 흐름을 알아보기 어렵기 때문에 디버거가 있으며, 모든 명령어를 외울 수 없기 때문에 자동완성된 명령어로 컴파일과 빌드를 하는 것이다.

컴파일과 빌드를 일일이 다 CLI로 칠 때와 GUI로 클릭 한번 하는 것이 개발 생산성이 같을 리가 없다.

 

같은 값이면 다홍치마라고, 하나의 액션을 취할 때 0부터 모든 원리를 알아서 할 수 있으면 좋겠지만 개발 자체만 하기에도 우리 인간의 수명과 여유시간은 짧다. 환경설정을 통해 내 시간을 좀 더 효율적으로 사용하고, 더 많은 양의 소스코드를 작성하는 것이 훨씬 더 낫다고 생각한다.

 

나만하더라도 Git를 모두 명령어로 배웠고, SublimeText와 Atom으로 코딩했다.

안드로이드 개발은 intelliJ의 Android Studio가 아닌 Eclipse에 안드로이드 SDK를 가져와서 빌드했고.

 

이제는 시대가 달라졌다고 생각한다.

GUI를 먼저 가르치고 나중에 CLI를 배우면서 원리를 가르치는 것이 맞다고 생각한다.

 

나는 어떤 분야를 막론하고 쉽게 배우기 시작해서 사람이 흥미를 느껴야 하는 것이 중요하다고 생각하는 사람이다.

개발은 특히 그 벽이 너무 높다.

 

그래서 나는 파이썬을 모든 컴퓨터공학과 1학년 기초 언어 수업이 되어야 한다고 주장하지만,

여전히 C언어를 먼저 배우는 것이 현실이긴 하다.

 

말이 길어졌다. vscode 환경설정은 이렇게나 중요하다는 뜻이다.

 

 

1. 내 설정을 동기화하자 - Setting Sync

https://code.visualstudio.com/docs/editor/settings-sync

Settings Sync in Visual Studio Code

 

환경 세팅에서 가장 중요한 것은 무엇일까?

그것은 바로!

 

내 컴퓨터가 내일 당장 바뀔 것을 준비하는 것이다.

나는 어떤 머신을 사자마자 내일 커피를 쏟을 것을 준비한다.

 

백업과 복원!

이것이 모든 환경 설정의 시작이다.

 

Setting Sync는 vscode의 환경을 다른 컴퓨터에서도 사용할 수 있게 한다.

내가 미리 저장해둔 세팅을 불러와서 동기화 할 수 있다.

 

vscode 내장기능이다.

 

 

2. 코드를 자동 정렬하자 - Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 

Prettier - Code formatter - Visual Studio Marketplace

코드 자동 정렬의 끝판왕.

 

이거 하나면 대부분의 언어가 한 번에 정렬이 된다.

 

3. 괄호 쌍을 한 번에 알아보자 - Bracket Pair Colorization

예전에는 확장프로그램으로 제공됐던 Bracket Pair Colorization이 vscode의 내장 기능으로 바뀌었다.

 

이 기능을 활성화하면 괄호끼리의 색상이 맞춰서 한 번에 코드 내의 괄호 쌍을 알아보기 쉬워진다.

 

 

4. 코드의 깊이(indent) 바로 알기 - indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow 

indent-rainbow - Visual Studio Marketplace

 

5. 파일 아이콘을 좀 더 예쁘게 - Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme 

Material Icon Theme - Visual Studio Marketplace

파일 아이콘을 예쁘게 해준다.

 

확장자가 한 번에 보여 어떤 것이 어떤 파일인지 직관적으로 알 수 있다.

 

6. 이름을 고칠 때 자동으로 뒤의 태그도 고쳐준다 - Auto rename tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag 

Auto Rename Tag - Visual Studio Marketplace

 

7.  HTML을 단축키 한 방에! - Emmet 단축키

https://code.visualstudio.com/docs/editor/emmet

Emmet in Visual Studio Code

이미 vscode에 내장되어 있는 기능으로

특정 단축어로 HTML 코드를 생산한다. 클래스와 아이디, 반복하여 생성하는 키워드 정도는 꼭 외워두자.

특히 처음에 !, !!로 최초 HTML 작성하는 것은 그야말로 개꿀이다.

 

8. 자바스크립트, 타입스크립트 결과를 에디터에서 바로 보자 - Quokka.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode 

Quokka.js - Visual Studio Marketplace

 

 

9. 자바스크립트 표준으로 고쳐라 - ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 

ESLint - Visual Studio Marketplace

자바스크립트를 잘못 작성했을 때 잡아주는 확장 프로그램

 

10. 내가 개발한 것을 바로 보자 - Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 

Live Server - Visual Studio Marketplace

내가 작성하고 있는 코딩

 

11. 프로젝트를 쉽게 관리하자 - Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager 

Project Manager - Visual Studio Marketplace

프로젝트를 많이 하다보면 프로젝트별로 열어보는 것이 어려워질 때가 있다.

즐겨찾기로 내가 많이 작업하는 프로젝트를 관리할 수 있으며, 프로젝트 별로 태그를 넣어둘 수도 있다.

 

 

12. 내가 불러온 모듈이 얼마나 무거울까? - Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost 

Import Cost - Visual Studio Marketplace

외부 모듈을 불러올 때 해당 모듈의 용량을 바로 확인할 수 있다.

 

 

 

13. 여러 개의 단어를 고칠 때 대소문자도 기억해줘 - Multiple cursor case preserve

https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve 

Multiple cursor case preserve - Visual Studio Marketplace

단어 여러 개를 고칠 때 해당 단어가 가지고 있는 대소문자를 기억해서 입력해준다.

 

 

 

14. 코드를 예쁘게 사진으로 캡쳐해보자 - codesnap

https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap 

CodeSnap - Visual Studio Marketplace

코드를 블로그에 올리거나 외부에 공유할 때 사용하는 익스텐션으로

외부에 이미지로 올릴 때 사용하면 좋다.

 

 

15. 리액트 컴포넌트 단어 하나로 만들자 - React Snippet

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets 

Simple React Snippets - Visual Studio Marketplace

 

리액트는 컴포넌트 작성의 반복이다.

언제 일일이 함수형/클래스형 만들고 있나.

이거 하나로 컴포넌트 생산을 끝내자.

 

16. HTML 태그에 대해서 빨리 알기 - HTML Snippet

https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets 

HTML Snippets - Visual Studio Marketplace

HTML 작성을 쉽게 도와준다. 자동완성과 태그를 바로 알 수 있음

 

 

17. 코드로 폴더 경로 빠르게 접근하기 - Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense 

Path Intellisense - Visual Studio Marketplace

코드로 디렉토리 접근할 때 손 쉽게 도와주는 익스텐션이다. 개꿀이다.

 

 

18. import문 조차 예쁘게 정렬하고 싶다. - Sort-Imports

https://marketplace.visualstudio.com/items?itemName=amatiasq.sort-imports 

sort-imports - Visual Studio Marketplace

제목 그대로 import문들을 형식에 따라 예쁘게 묶어서 정렬해준다.

 

 

19. REST API를 에디터 내에서 한 번에 수행 - REST Client

https://marketplace.visualstudio.com/items?itemName=humao.rest-client 

REST Client - Visual Studio Marketplace

보통 Postman, Insomnia로 하는 작업을 에디터 내에서 할 수 있다.

 

20. styled-component의 색상과 자동완성을 해주는 확장프로그램-vscode-styled-components

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components 

vscode-styled-components - Visual Studio Marketplace

이 확장프로그램을 설치하지 않으면

백틱 내의 모든 내용이 그냥 문자열로 인식되고, 자동완성도 안되고 태그에 대한 속성도 자동완성되지 않는다.

해당 확장프로그램을 설치하면 모두 정상적으로 인식하고 자동완성도 가능해진다.

 

 

21.  코드의 글자 크기만, 터미널의 글자 크기만 변경해보자! FontSize Shortcuts

https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts 

FontSize Shortcuts - Visual Studio Marketplace

이 확장프로그램은 어디에 클릭이 되어있느냐에 따라 해당 영역의 글자 크기를 변경할 수 있게 도와준다.

컨트롤 (맥은 커맨드) + - 로 해당 영역의 글자를 줄였다 키웠다 할 수 있다. 개꿀!

 

 

 

 

2. 마치는 글

 

https://www.tabnine.com/

AI Assistant for software developers | Tabnine

탭나인 같이 자동으로 코딩을 도와주는 툴도 유용하다고 생각한다.

 

 

 

이 글을 계속 유지보수됩니다.