개발자들이 가장 선호하는 코드 에디터 중 압도적인 1위는 비주얼 스튜디오 코드입니다. 물론 그냥 메모장에다

코드를 작성해도 되는데 따로 코드 에디터를 사용하는 이유는 생산성과 편리함을 증폭시켜 주기 때문이죠. 그

많고 많은 코드 에디터 중에 VS 코드가 압도적인 인기를 끌 수 있었던 건 아마 방대한 익스텐션 생태계

덕분일 거예요. VS 코드의 익스텐션은 코드 에디터의 추가적인 기능을 더해주는 플러그인입니다. 마치 크롬 브라우저의 크롬 익스텐션처럼

익스텐션을 잘 골라서 사용하면 손이 몇 개는 더 있는 것처럼 빠르고 편리하게 코딩을 할 수 있습니다. 이번

영상에서는 웹 개발자인 제가 실무에서 직접 사용하고 있는 익스텐션 몇 가지를 소개해 드릴게요. 첫 번째

익스텐션은 프리 티어입니다. 전 이거 없으면 못 살아요. 프리 티어는 코드를 자동으로 포매팅 해 주는 익스텐션이에요.

저는 얘 덕분에 코딩하면서 띄어쓰기, 들여쓰기, 세미콜론 같은 거 신경 하나도 안 씁니다. 코드를 개판으로 싸

질러도 얘가 알아서 다 정리해 주거든요. HTML, CSS, 자바스크립트는 물론이고 타입스크립트랑 JSON 데이터까지 깔끔하게 포매팅 해

줍니다. 지금까지 5천만 명이 넘는 사람들이 다운받은 이유가 있는 거죠. 사용 방법은 간단해요. 왼쪽에 있는

익스텐션 탭에 들어가서 'Prettier'라고 검색하면 아마 얘가 제일 위에 나올 거예요. 여기 있는 'Install' 버튼을

클릭해서 다운받으시면 됩니다. 가끔 곧바로 활성화가 안 될 때가 있어서 VS 코드를 한번 껐다가 켜 주시는

것도 좋아요 자 그럼 이제 기본 포매터를 프리 티어로 바꿔 줄 거예요 왼쪽 아래 있는 설정 아이콘을 누르고

세팅스 들어가셔서 포매터라고 검색을 해 줍니다 그리고 디폴트 포매터를 가서 기본 포매터를 프리 티어로 바꿔

주시면 돼요 저는 이미 돼 있네요 그리고 저 같은 경우는 파일을 저장할 때마다 자동으로 포매팅 되도록 해 놓는데요 그러려면 여기 아래 있는

포맷 온 세이브를 체크해서 활성화해 주시면 됩니다 자 이제 잘 되는지 제가 의식의 흐름대로 작성한

자바스크립트 파일로 가 볼게요 진짜 개판이 막 이제 이렇게 수정을 하고 저장 버튼만 딱 눌러 주면 요렇게

프리 티어가 완벽하게 정리해 줄 거예요 HTML 이렇게 개판으로 작성해 놔도 저장 버튼 누르면 이렇게

정리되고 CSS 파일 같은 경우에도 저장만 누르면 이렇게 깔끔하게 정리해 줍니다. 뿐만 아니라 JSON 데이터도

이런 식으로 깔끔하게 정리해 주는 걸 볼 수 있어요. 우리가 여러 개발자들과 함께 협업할 때 코딩 스타일을 일관성

있게 유지하는 건 정말 중요합니다. 그래야지 불필요한 실수를 줄일 수 있고 가독성과 유지보수성이 높아지거든요. 개발자마다 코딩 스타일이

다르더라도 모두 Prettier를 사용하면 약속된 규격에 맞게 자동으로 포맷팅 해 주기 때문에 굉장히 편리합니다.

제가 속한 저희 회사 개발 팀에서는 Prettier의 몇 가지 설정을 더 추가해서 사용하는데요. 그것도 알려

드릴게요. 우선 세팅에 들어가서 Prettier라고 검색해서 Prettier 설정으로 들어가 줍니다. 스크롤을 아래로 쭉

내리다 보면 탭 스페이스라고 탭 간격을 설정할 수 있는 옵션이 나오는데요 아마 기본적으로 4로 되어 있을 거예요 이게 뭐냐면 우리가 들여쓰기를

할 때 탭키를 누르잖아요 그 간격을 스페이스바 네 번 만큼의 공백으로 넣어 준다는 말이죠 저희 팀은 이 간격을

4가 아닌 공백 두 개로 설정해서 사용합니다 이렇게 공백 두 개로 줄여주면 코드가 많이 중첩될 때도 옆으로 뚱뚱해지지 않기 때문에 보기에

더 편하거든요 공백이 4로 되어 있는 자바스크립트 파일에 와서 이렇게 포맷팅을 해 주면 중첩된 코드가 더

적은 공간을 차지해서 보기에 편한 것 같아요 자 그리고 한 가지 세팅이 더 있어요 자바스크립트에서 문자열을 쓸

때 이렇게 큰 따옴표를 쓰는 사람들도 있고 작은 따옴표를 쓰는 사람들도 있습니다 저희 팀은 일관성을 지키기

위해 기본적으로 작은 따옴표로 통일해서 사용하고 있어요 이것도 프리티어 설정에서 자동으로 포매팅 되게끔 만들 수 있습니다 세팅

어딘가에 있는 싱글 코트 옵션을 활성화시켜 주면 우리가 이렇게 큰 따옴표를 사용하더라도 저장 버튼을

눌러 주면 자동으로 작은 따옴표로 바꿔 주는 걸 볼 수 있습니다 협업할 때 굉장히 편리해요 두 번째 익스텐션은 CSS

픽입니다 뭐 CSS 훔쳐보기 이런 뜻이죠요 녀석은 말 그대로 CSS를 훔쳐보게 해주는 음흉한 익스텐션이

우리가 HTML이나 리액트의 JSX 작성할 때 어떤 클래스에 어떤 스타일이 담겨 있는지 확인하려면 우선 클래스 이름을 기억하고 CSS 파일을

찾아가서 클래스마다 일일이 찾아봐야 돼요 만약 CSS 이렇게 길다면 스크롤을 계속 내려가면서 찾아야 되기

때문에 상당히 귀찮아요 이 CSS 픽이라는 익스텐션을 사용하면 태그에 있는 클래스 이름에다 마우스를 올려

놓기만 해도 이런 식으로 어떤 스타일이 적용됐는지 훔쳐 볼 수 있어요 자 사용 방법은 당연히

간단합니다 익스텐션 탭에 가서 CSS 픽이라고 검색해 주고 요걸 그냥 다운 받으시면 돼요 VS 코드도 한번

껐다가 켜 주시고요 익스텐션이 활성화가 잘됐으면 이제 태그가 있는 곳으로 가서 윈도우라는 컨트롤 맥이라면

Command 키를 누르고 클래스 이름에다 마우스를 싹 올려 주면 이렇게 클래스에 적용된 CSS 곧바로

확인할 수 있어요 실제 CSS 파일에 클래스가 있는 곳으로 이동하려면 컨트롤 혹은 Command 키를 누르고

클래스 이름을 클릭해 주시면 돼요. 그러면 알아서 CSS 파일을 찾아서 클래스가 있는 곳으로 스크롤을 이동해 줍니다. 곧바로 수정할 수 있기 때문에

굉장히 편리합니다. 세 번째 익스텐션은 라이브 서버라는 익스텐션인데요. HTML, CSS, 자바스크립트로 개발하시는 분들은 반

드시 설치하세요. 이거 정말 편합니다. 라이브 서버는 로컬 개발 서버를 실행해서 웹페이지를 브라우저에 띄워

주는데요. 소스 코드를 수정할 때마다 브라우저에서 실시간으로 확인할 수 있게 해줍니다. 일일이 브라우저를 리프레시 해 줄 필요가 없어요.

익스텐션 탭에 들어가셔서 라이브 서버를 찾아 주시고요. 설치만 하시면 돼요. 사용 방법도 굉장히 간단합니다.

우선 사이드바에서 열고자 하는 HTML 파일을 우클릭해 준 후 여기 있는 오픈 위드 라이브 서버를 클릭하시면 됩니다. 그럼 이렇게

5500번 포트에서 서버가 시작되었습니다. 아고 뜨면서 웹페이지를 브라우저에 띄워 줄 거예요. 이제 이 웹페이지에 HTML, CSS, 혹은

자바스크립트 코드를 수정하고 저장만 해주면 실시간으로 브라우저가 업데이트됩니다. 한번 해 볼게요. 여기다가 '업데이트'라고 친 다음에 저장만 해

주면 웹페이지에 바로 적용이 되는 걸 볼 수 있습니다. 연결된 CSS, 자바스크립트 파일도 수정하고 저장만 해주면 자동으로 업데이트가 될

거예요. 네 번째 익스텐션은 오토 리네임 태그입니다. 오토 리네임 태그는 태그를 수정할 때 여는 태그와 닫는 태그를

동시에 수정해 주는 편리한 익스텐션입니다. 우리가 이런 식으로 태그를 작성하다가 오타를 내면 여는 태그도 수정하고 닫는 태그도 한 번

더 수정해 줘야 됩니다. 이게 사실 별거 아니지만 이런 식으로 태그 안에 뭐가 많으면은 막 스크롤하면서

수정해야 돼요 꽤 꽤 귀찮아집니다 자 그런데 이 오토 리네임 태그라는 익스텐션을 사용하면 둘 중 하나만

수정해도 반대쪽 태그가 자동으로 수정이 되기 때문에 시간을 좀 아껴 줘요 이것도 익스텐션 탭에서 찾아서

설치를 해 주시면 됩니다 활성화가 잘됐으면 이제 이런 식으로 여는 태그를 수정하면 반대쪽 태그도 함께 수정이 되는 걸 볼 수 있습니다

이렇게 뚱뚱한 태그도 여는 태그 하나만 수정하면 반대쪽 태그도 이렇게 수정이 잘된 걸 볼 수 있어요 오토

리네임 태그 익스텐션은 html뿐만 아니라 리액트의 jsx 태그에도 잘 작동하더라도 코드 스펠 체커 있습니다 이

녀석은 코드를 작성할 때 실시간으로 스펠링 검사를 해 주는 익스텐션이 굉장히 간단한 기능이지만 오타를

숨쉬듯이 내는 저한테는 꼭 필요한 녀석입니다 이것도 그냥 설치만 해 주면 바로 작동해요 우리 보통 함수나

변수 이름 쓸 때 영어로 작성하자아요 그렇죠 코드 스펠 체커는 실시간으로 스펠링을 검사해 주기 때문에 이런

식으로 오타를 내면 이렇게 파란색 밑줄을 그어서 우리에게 알려줍니다 제대로 잘 써야겠네요 특히 해외에서

개발하는 분들은 이 스펠링 오류가 협업할 때 상당히 거슬릴 수가 있어요 저는 이 익스텐션 굉장히

애용하고 있습니다 마지막 여섯 번째 익스텐션은 리액트 스넥입니다 이름이 좀 길어요 이 익스텐션은 리액트 관련 템플릿을

간단한 입력어만으로 생성해 주는 리액트 전용 익스텐션이 저 같은 리액트 개발자들에게 굉장히 사랑받는

익스텐션이 새로운 컴포넌트를 만들거나 반복적으로 코드를 작성해야 될 때 굉장히 시간을 아껴 줍니다. 요 녀석도

그냥 찾아서 설치하시면 바로 사용하실 수 있어요. 자, 텅텅 비어 있는 컴포넌트 파일을 하나 만들었는데요.

특정 입력어 적고 엔터만 눌러주면 이렇게 컴포넌트 템플릿을 짠하고 만들어 줍니다. 유용한 입력어 몇

가지만 알려 드릴게요. RFC고 입력하고 엔터를 눌러주면 함수형 컴포넌트를 만들어 주고요. RFC 2라고 입력하면 이렇게

익스포트 문을 맨 아래다가 빼준 함수형 컴포넌트를 만들어 줍니다. 만약 클래스 컴포넌트를 만들려면 rcc고

입력하시면 돼요. 그럼 이렇게 클래스 컴포넌트 템플릿을 만들어 줍니다. rmc고 입력하시면 리액트 메모를

사용해서 메모이제이션 된 컴포넌트를 만들어 줘요 제가 알려 드린 것들뿐만 아니라 깃허브 문서를 확인해 보시면

이렇게 다양한 템플릿을 만들어 주는 수많은 입력어 있습니다 기본적인 리액트 이외에도 리덕스 리액트

네이티브 템플릿도 제공하니까 확인해 보시면 좋을 것 같아요 근데 사실 저는 가장 처음에 알려드린 RFC

밖에 안 씁니다 이거 하나만 써도 엄청 편해요

현직 웹 개발자가 쓰는 VS Code 익스텐션 모음 | 비쥬얼 스튜디오 코드

별코딩

VS Code 확장 프로그램 소개 및 Prettier 설정

VS Code의 인기 이유는 방대한 확장 프로그램 생태계

코드 에디터 사용 이유: 생산성 및 편리성 증대

확장 프로그램은 코드 에디터의 기능을 추가하는 플러그인

첫 번째 확장 프로그램: Prettier (자동 코드 포매팅)

Prettier 설치 및 기본 포매터 설정 방법

Prettier 사용 이점: 코딩 스타일 일관성 유지, 실수 감소, 가독성 및 유지보수성 향상

Prettier 추가 설정 및 다른 확장 프로그램 소개

Prettier 탭 간격 설정 (팀 설정: 2칸)

Prettier 문자열 따옴표 설정 (팀 설정: 작은 따옴표)

두 번째 확장 프로그램: CSS Peek (CSS 스타일 확인)

세 번째 확장 프로그램: Live Server (실시간 웹페이지 미리보기)

추가적인 유용한 확장 프로그램들

네 번째 확장 프로그램: Auto Rename Tag (태그 자동 수정)

다섯 번째 확장 프로그램: Code Spell Checker (실시간 스펠링 검사)

여섯 번째 확장 프로그램: React Snippets (리액트 템플릿 생성)