내가 사용하는 VScode extention 추천. 비쥬얼 스튜디오 코드 익스텐션 추천.

내가 사용하는 VScode extention 추천.  비주얼 스튜디오 코드 익스텐션 추천.

 

개발을 하다보면, 매번 느끼지만 불편한 것들이 많습니다.

좀 더 빠르고 편리하게 개발하고 읽기 쉬운 코드를 만들어주는

이러한 extextion들을 오늘 몇 가지 알아보도록 하겠습니다.

 

개발을 도와주는 VScode외에도 많습니다. 하지만 그중에서

가장 대중적인건 VScode라고 할 수 있죠. 그렇기에 수많은

extention들이 존재합니다.

오늘은 그중 제가 주로 사용하고 있는 몇 가지를 알아보도록

하겠습니다. 저는 아직은 프론트엔드 쪽을 중심으로 공부하며

일하기에 프론트엔드에 사용하기 좋은 extention이 몇 가지 있습니다.

 

목차.

1. Auto Rename Tag
2. Bracket Pair Colorizer
3. indent-rainbow
4. Live Server
5. Path Intellisense
6. Prettier
7. 마치며

 

1. Auto Rename Tag

 

이 익스텐션은 말 그대로 태그의 이름을 자동으로 바꿔줍니다.

과연 어떻게 자동으로 바꿔준다는 것일까요?

여기서 태그란 HTML의 태그들을 말하는 것입니다.

또한 JSX에서도 작동 됩니다.

우리는 HTML에서 태그를 사용하다 보면 대략 2가지 정도로 

나눠 볼 수 있습니다. 아래와 같이 말이죠.

 

<p>Hello</p>
<input/>

이렇게 스스로 끝을 맺을 수 있는 태그와 없는 태그로 나뉩니다.

P 태그와 같이 스스로 끝을 맺지 못하는 태그는 태그의 종류를 바꾸려면

앞에 있는 P와 뒤에 있는 P를 두 번 변경해야 합니다.

하지만 Auto Rename Tag는 한 곳의 태그 이름을 변경하면 나머지 부분도

따라서 바뀌게 됩니다. 그러하여 훨씬 편하게 작업할 수 있습니다.

특히 JSX와도 잘 작동하여 너무 좋습니다.

가끔 엉뚱한 게 바뀌는 때도 있는데 이 정도는 귀엽게 봐줍시다.

HTML을 사용하시거나 JSX와 같은 문법을 이용하신다면

강력 추천드립니다.

 

2. Bracket Pair Colorizer

이 익스텐션 또한 제목 그대로와 같이

괄호들의 색을 바꿔주는 익스텐션입니다.

우리는 코드를 작성하다 보면, 이 중괄호가 

어디서 끝나는지 혹은 어디와 연결되었는지 헷갈릴

때가 많습니다. 그러하여 이 Bracket Pair Colorizer를 

이용하신다면 분명 빠르게 확인이 가능하실 겁니다.

그 이유는 각각의 괄호는 그 포지션에 따라 각각

다른 색으로 표현됩니다. 이로써 비교적 쉽게

메서드 혹은 함수의 끝을 알 수 있습니다.

 

 

3. indent-rainbow

이번 익스텐션 또한 아주 자주 사용되는데요.

이 익스텐션은 우리가 코드를 작성할 때

스코프에 따라 색을 나누어 줍니다.

즉 글로벌로 지정된 변수와 함수 안에 있는 함수의

위치 차이를 색으로 나타내 조금 더 빠르게 함수 혹은

변수의 위치와 스코프를 알 수 있습니다.

없어도 별로 불편하진 않을 익스텐션이지만,

궁금하시다면 설치해보세요. 생각보다 효율이 좋습니다.

 

 

4. Live Server

리액트를 사용하게 되면서 더 이상 사용하지 않지만

그전까지 아주 활발하게 사용했던 익스텐션입니다.

이는 내가 개발하고 있는 사이트를 로컬 서버로 즉각

보여주게 됩니다. 여기서 장점은 내가 코드를 변경하여

저장하면 즉각 바뀐 코드가 Live Server를 통해 결과로 생셩

된다는 것입니다. 이로써 우리는 훨씬 쉽고 빠르게, 번거롭지 않게

결과를 즉각 확인하고 수정, 추가 가능합니다. 라이브러리나 

프레임워크를 사용하지 않고 처음 바닐라로 공부하실 때 아주 좋을 것

같습니다. 강추입니다.

 

 

5. Path Intellisense

이 익스텐션은 말 그대로 파일을 import 하거나 소스코드의 위치를

적어야 할 때 아주 유용합니다. 현재 파일의 위치에서 어디에

어떤 파일이 있고 어떻게 가야 할지 아주 편하게 나와있어

언제든지 사용할 수 있고 자주 쓰이는 익스텐션입니다.

꼭 추천드립니다.

 

6. Prettier

 

오늘 익스텐션 중 가장 좋은 익스텐션이지 않을까 싶습니다.

우리는 코드를 작성할 때 조금 더 정렬하고 예쁘게 작성하고

싶습니다. 그래야 다음에 혹은 다시 작업하더라도 보기 쉽고

이해하기 쉬울 테니까요. 그렇다면 Prettier가 당신에게도 꼭 

필요합니다. 이는 언어에 맞게 자동으로 막 작성해 놓은 코드를

예쁘게 정렬해 줍니다. 이때 아까 위의 몇몇 익스텐션과 더불어

훨씬 높은 가독성을 보여줍니다. 또한 어딘가에 잘못 작성된

코드가 있다면 저장 후 자동으로 정열 되지 않기에 내 코드가

어디서 에러가 났는지 조금 더 빠르게 알 수 있습니다.

Prettier는 처음에 사용하시면 저장 시 자동으로 코드를

정렬하지 않기 때문에 약간의 조정을 해주어야 합니다.

하지만 1분? 도 안 걸릴 것입니다.

 

 

7. 마치며

 

오늘은 이렇게 가볍게 제가 주로 사용하는 익스텐션을

소개해 드렸습니다. 사실 저는 이 외에도 몇 개를 더 

사용하지만 초보자인 여러분들께는 아직 필요하지 않거나

어렵기에 포함시키지는 않았습니다. 다음에 게시물도 어느 정도

작성하고 때가 되었다 싶으면 또 한 번 익스텐션이라는 주제를

다루어 보도록 하겠습니다.

 

또한 저는 VScode를 Portable로 설치하여 사용하고 있는데,

이 또한 아주 간단하고 사용하기 좋습니다.

모르시는 분이 있으시다면 다음에 설치하시기 전에

Portable로 설치를 해보시는 것도 나쁘지 않을 것 같습니다.

다음에 기회가 되면 이 주제도 한번 더 자세히 다르겠습니다.

 

오늘도 언제나 하시는 일 다 잘되고,

건강하시고 무탈하시고 항상 도전하시기 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.