[vscode] extensions

[vscode] extensions

 

프론트를 공부하기 전에 ide의 환경 세팅을 위해 친구에게 추천 extension의 목록을 받아왔다. 백엔드 스프링을 공부할 때는 인텔리제이를 사용했지만 프론트에서는 vscode를 사용한다고 한다. 시작 전에 먼저 세팅부터 시작하기로 했다.

물론 전부다 처음부터 사용할 예정은 아니고 설명을 읽고 지금 필요한 대상만 기능을 찾아보고 적용하려고 한다.

 

받아온 목록에 있는 extension들이 간략하게 기본적으로 어떤 도움을 주는지 알아보았다.

 

 

thunder client

 

 

• spring에서는 웹 개발 시 API의 요청에 대한 결과를 확인하기 위해 postman을 사용
• postman의 경우 다양한 기능을 지원하는 대신 api 테스트만을 위해 사용한다면 무겁다는 단점이 존재

→ thunder client를 통해 api 테스트만 빠르고 수월하게 진행하기 위해 해당 익스텐션을 사용한다.

• postman과 동일하게 각 요청에 맞게 header, auth, body등으로 값을 입력하고 반환 값 확인하는 방식

env

env

• 변수값을 넣어서 요청을 주고받는 경우가 존재
  • 번거롭게 항목에 변수 값을 넣는 것이 아닌 env 항목에 자주 사용하는 변수를 넣어 사용가능

 

vscode-styled-component

 

 

사용 예시

 

• 스타일 컴포넌트 구문의 구문 강조를 위해 사용
• css 코드 작성시 코드의 자동완성이 가능

 

theme

 

설치한 테마

 

• 코드 구성 및 아이콘 식별화
• 여러 종류의 코드 파일들을 보기 쉽게 아이콘 변경

전후 비교

 

npm intellisense

 

• Visual Studio Code plugin that autocompletes npm modules in import statements.
  • npm 모듈에 대한 자동 완성을 제공하여 코딩속도를 증가시키는 데 사용
  • JavaScript, TypeScript 파일에 import 문을 입력하면 확장 프로그램이 npm 레지스트리에서 모듈이름을 제안해서 정확한 이름을 기억하지 않아도 빠르게 입력 가능
  • → 이름을 수동으로 입력할 때 발생하는 오류 감소

 

Prettier - code formatter

 

 

코드를 정렬해주는 formatter

• 코드를 항상 일정하게 정렬시키는 역할
• → 여러 사람이 하나의 프로젝트를 같이 진행하는 경우 코드의 가독성 증가에 도움을 준다
• 설정 이후에 본인이 원하는 대로 코드의 정렬 기준을 설정하는 것도 가능

 

Quokka.js

 

 

• JavaScript, TypeScript 프로토 타이핑을 위한 개발자 생산성 도구
• 프로토 타입을 위해 개발과는 격리된 공간이 필요
  • Ex
    • 특정 라이브러리 함수가 어떤 결과를 출력하는지 잠깐 확인
    • JS 강의 및 해당 결과를 바로 실행하기 위해서
    • 언어의 새로운 기능이나 프레임워크를 실험할 경우
• 자바스크립트의 경우 실행을 해야 결과창에서 결과를 볼 수 있었지만 해당 플러그인 사용하면 우측에 바로 결과 값 등장
• 또한 코드에 문제가 있을 경우 문제가 생긴 코드에 표시가 발생

1. 검색창에서 quokka.js를 검색하여 원하는 타입의 파일 선택

 

2. 만들어진 파일에 코드 작성하는 모습

1. 초록색 박스는 만들어진 코드의 문법 오류 검사
2. 파란색 글자의 경우 결과값 출력
3. 콘솔창에는 결과 및 문제점 출력

사용 예시

 

 

code spell checker

 

오타 방지 및 camelCase code를 체크하기 위한 익스텐션

변수의 이름은 작업을 할 때 중요한 요소, 이때 변수의 이름에서 오타가 났을 경우 발견이 늦어지면 시간이 잡아먹히는 경우가 존재

→ 해당 경우를 방지하기 위해 사용

 

마무리

 

후에 추가할 사항이 생기면 지속적으로 업데이트를 진행할 예정이다.