Devhyun

메뉴

현재 화면 위치

데브현 메인 블로그 포스트

타이틀

JavaScript 개발자를 위한 우수한 VSCode 기능 27선

2019.08.16
핫한 길다란

아래는 jsmanifest에서 작성된 포스트로 26 Miraculous VS Code Tools for JavaScript Developers in 2019를 일본어로 번역한 번역본을 다시 한국어로 번역한 내용입니다.

다소 의역이 있어 어색한 부분이 있어도 양해 부탁드립니다. 🙉

원문 보기

Visual Studio Code(일반적으로 VScode라고 불림)은 데스크톱에서 동작하는 가볍고 강력한 크로스플랫폼의 코드에디터입니다.

TypeScript나 Chrome Debugger등의 개발자 툴이 지원됩니다.
처음에 제 프로젝트를 구축하기 위해 VScode를 써봤습니다만, 곧바로 그 매력에 홀딱 반했습니다.

VScode에는, 누구나 개발이 가능하고 누구나 사용할 수 있는 막대한 오픈소스의 확장기능이 있습니다.
개발에 사용하는 편리한 툴을 찾고있다면, 이 글이 꼭 도움이 되길 바랍니다.

여기에 소개할 기능 전부 JavaScript 전용이라고 할순 없지만, 글을 보고계신 분이나 저와 같은 JavaScript 개발자를 위한 기능입니다.
인간의 5개의 감각중 3개를 강화하여 JavaScript 개발의 흐름을 도와줄 것입니다.

JavaScript 개발자를 위한 우수한 VSCode 기능 27선, 2019년판 입니다.

1. Project Snippets

리스트의 가장 처음으로 오는것은, 제가 가장 마음에든 Project Snippets입니다.
이것은 VSCode의 User Snippets 기능에서 파생되었습니다.

User Snippets이란, 프로젝트에서 여러번 재사용하기 위해 독립적인 코드스니펫을 만드는것이 가능한 기능입니다.

그러면, 재사용은 어떻게하는 걸까요?

예를들면 빈번하게 아래의 정형화된 코드를 작성한다고 가정해봅시다.

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)

  return {
    ...state,
  }
}

export default useSomeHook

어려번 전체를 타이핑(혹은 복붙) 대신에, 그걸 정리한 스니펫을 작성함으로써, 프리픽스를 입력하는것만으로 정형화된 코드를 불러오는것이 가능합니다.
파일 -> 기본설정 -> 유저스니펫에서, 글로벌한 유저스니펫을 작성할 수 있습니다.

예를들면 React프로젝트에 독립적인 코드스니펫을 작성하고 싶은 경우, 유저스니펫에 『새로운 글로벌스니펫파일』을 선택하여, "typescriptreact.json"라고 입력합니다.
새로 열린 파일에 아래와 같이 등록합니다.

📄 typescriptreact.json

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

확장자가 .tsx인 파일을 만들어 "rsr"이라고 입력하면 이 스니펫을 작성하는 가이드가 표시됩니다.
그 가이드를 선택하면 아래의 코드가 바로 입력됩니다.

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

이 유저스니펫의 문제점은 다양한 프로젝트에 적용되는것입니다.
상황에 따라 이러한점이 장점일수도 있습니다.
그러나, 특정 프로젝트에서는 일부 다른 스니펫을 등록한 경우에는 이 사양이 문제가 됩니다.
예를들면 프로젝트별로 디렉토리구조가 다를경우입니다.

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

항상 디렉토리 구조가 같다면 이걸로 충분할지도 모릅니다.
그러나, 일부 프로젝트에서는 Link 컴포넌트가 components/Link에 있다면 어떨까요?

게다가, 3개의 border test는 값이 심플한 코드로 감싸져있다는 것에 주목해주세요.
이 문법은 JavaScript에서 올바르지만, style-components를 채택하고 있는 경우 어떨까요?
이러한 구문은 style-components에서는 올바르게 작동하지 않습니다.

Project Snippets을 사용하는것으로, 유저스니펫을 프로젝트 단위·워스크페이스 단위에 한정하는 것이 가능해지고, 다른 프로젝트에 영향이 미치지 않게 됩니다.

이것이, Project Snippets가 멋있게 처음으로 소개된 이유입니다.

아주 편리합니다 !

2. Better Comments

코드는 자주 빽빽하게 많아지기 떄문에, 일찍히 쓰려고 했던 주석을 발견할수 없고, 손 쓸 방도가 없을지도 모릅니다.

Better Comments를 사용하면, 코드에 색을 붙이는것이 가능하고, 코멘트를 좀더 눈에 띄게 할 수 있습니다.

image

또한, 팀원에게 경고메세지를 !?로 강조할수 있습니다.

3. Bracket Pair Colorizer

처음에 스크린샷을 봤을때, 이건 꼭 써야만한다는 촉이 왔습니다.
코딩은 제 열정이고, 열정은 즐거워야만 할 것입니다.
확장기능은 제가 하고싶은 코딩을 좀더 즐겁게 도와줍니다.

여담으로, 색이 뇌의 혈류와 각성에 영향을 준다라는 연구결과가 있습니다. 즉, 색상강조를 하면 개발효율을 높일 수 있다는 것입니다.
다시말하면, 작업 흐름에 색을 넣는것으로, 개발이 즐겁게되고, 건강의 향상에도 기여한다고 합니다.

image

(저...정말인가요? 😓😅)

4. Material Theme

Material Theme는, VSCode 전체의 외형을 크게 바꾸는 테마 입니다.

image

지금까지의 테마중에서, 가장 훌륭한 테마중 하나입니다.
제게는 조금 이 훌륭함을 표현할 어휘가 없지만, 어쨌든 아주 좋습니다.
바로 설치하여 저와 함께 오늘부터 세계를 마테리얼로 바꿔봅시다 !
또는 세계는 변화하지 않고 단순히 테마를 바꿔주세요. 쿨하게요 !

5. @typescript-eslint/parser

만약 현재 TSLint를 사용하고 있다면, tslint duplicate됬기 떄문에, 여러분의 TSLint설정을 ESLint로 마이그레이션작업을 검토하고 있을겁니다.

장래성이 있는 환경을 확보하기 위해, 프로젝트는 점점 @typescript-eslint/parser를 채용하기 시작했습니다.

새로운 환경에서도, 지금까지 호환성이 있는 룰, ESLint의 룰을 사용할수 있게 되었습니다.

6. Stylelint

제게있어 다양한 프로젝트에 Stylelint 설정이 필수불가결입니다.

css/scss/sass/less에 대응하고있어, 틀린부분을 지적해주기때문에, CSS의 코딩 스타일을 강조합니다. 자동조정 플러그인과 커뮤니티형태의 플러그인도 있습니다.

7. Markdownlint + Docsify

여러분이나 다른 개발자분들이 프로젝트의 브레인스토밍을 할경우 어떻게 메모를 하는지 잘 모르겠지만, 제는 메모를 마크다운 형태로 작성합니다.

그 이유는 우선 알기 쉽기 떄문입니다.
markdownlint와 같이, 마크다운 쓰는데 서포팅하는 기능도 많이 있습니다.
markdownlint은 .md파일의 스타일포멧을 체크해주는 Linter입니다.
게다가, 자동조정도 지원합니다.

또한, 제가 개인적으로 Docsify를 다양한 프로젝트에 설치하고 싶다고 생각합니다.
Docsify는 마크다운으로 프로젝트 고유 확장기능도 지원하고 있기 때문입니다.

8. TODO Highlight

저는 제 프로젝트에는 TODO를 쓰는 습관이 있어, TODO를 강조해주는 TODO Highlight는 많이 도움이되는 익스텐션입니다.

9. Import Cost

import Cost는 처음에 테스트했을때는 정말 도움이 되는 기능중 하나 입니다. 그러나 조금 시간이 지나면, 여러분은 이 툴이 필요하지 않다고 생각하기 시작할 것입니다.
이 툴이 알려주는 것은 여러분은 이미 알고있기 떄문입니다.
그래도 처음에는 이 기능이 유용합니다.

image

10. Highlight Matching Tag

여는 태그에 상응하는 닫는태그가 어디에 있는지 모르고 애가탄 경우가 있었을겁니다.
Highlight Matching Tag가 그러한 불만을 해결해줍니다.

image

11. vscode-spotify

불만이라고 하면, 여러분은 때떄로 탭을 VScode에서 음악플레이어로 전환하여 곡을 바꾸고 VSCode로 돌아와하는 불편함이 있었을 겁니다.

여기서 vscode-spotify가 등장합니다.
이것은 VScode안에서 Spotify를 사용할수 있습니다!

이 익스텐션을 설치하면, 상태표시줄에 현재재생중인 곡을 확인하고, 버튼한번으로 곡을 바꾸거나, Spotify를 컨트롤하는 등 다양한것이 가능합니다.

spotify 뭐죠..? 아.. 음악 스트리밍인거 같은데
한국에서는 못쓴다네요 (fit. 나무위키)

12. GraphQL for VSCode

JavaScript 커뮤니티에서는 GraphQL이라는 단어를 자주 거론됩니다.
GraphQL의 구문강조 표시수단을 아직 구하지 못하셨다면, 그리고 Lint나 자동완성등을 원한다면, GraphQL for VSCode를 설치해야만 합니다.

저는 GatsbyJS를 자주 사용하기 떄문에, 일상적으로 GraphQL구문은 아주 쉽습니다.

13. Indent Rainbow

이것이 필수인 이유는, 아래의 Highlight Matching Tag와 같은 이유입니다.
Indent Rainbow는 들여쓰기의 깊이를 한눈에 알기 쉽게 해줍니다.

image

14. Color Highlight

누군가 제게 「이건 어디서 구하셨나요?」라고 물어보는 확장기능중 하나 입니다.
Color Highlight는 코드 내의 색을 강조하여 표시해줍니다.

15. Color Picker

Color Picker는 CSS의 색상을 표시 및 색상코드를 선택하여 생성하는 GUI를 제공하는 확장기능입니다.

16. REST Client

처음으로 REST Client를 사용했을대, Postman 처럼 이미 좋은평가를 확립한 툴에 비해 더 좋다고 생각하지 않았습니다.
그러나, REST Client를 사용하면할수록, 특히 API를 테스트할때, 이 확장이 얼마나 대단한것인지 알게되었습니다.

사용하기 위한 준비는, 새로운 파일을 작성하여 아래의 1라인을 입력하는것 뿐입니다.

https://google.com

GET 리퀘스트를 보내는데 필요한 조작은, 대상의 행을 선택하여 커맨드파렛트를 표시(Ctrl + Shift + P), Rest Client: Send Request를 선택하는것입니다.
이걸로 리퀘스트가 송신되어 1초이내에 응답 상세정보가 새로운 탭으로 열립니다.

d.jpeg

URL의 아래 코드를 추가하는것으로 리퀘스트헤더에 추가되거나, POST파라미터를 추가하는것이 가능합니다.

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "someemail@gmail.com", "password": 1 }

이것만으로 { "email": "someemail@gmail.com", "password": 1 }가 POST 리퀘스트로 전송됩니다.

지금까지의 기능은 아주 일부분입니다.
좀더 상세하게 알고 싶으시다면 문서를 읽어보세요.

17. Settings Sync

개발환경 툴에서 사용되고있는 익스텐션의 리스트를 Evernote등에 수동으로 내보내거나, 관리해야만하는것이 고통이였습니다.
이것도 Settings Sync를 알기 전까지였습니다.

이 확장기능은 gist의 계정이 필요합니다.
설정을 보존하고 싶다면 언제든지 Shift + Alt + U를 누르는것으로, 키바인드나, 스니펫을 포함한 설정이 gist계정에 업로드 됩니다.

다음에 로그인했을때, 또는 다른 PC에서 접속했을때, Shift + Alt + D를 누르면 설정이 빠르게 다운로드됩니다.

18. Todo Tree

Todo Tree를 사용하면, 애플리케이션에 있는 모든 TODO가 하나의 패널에 표시됩니다.

image

19. Toggle Quotes

Toggle Quotes는 인용부를 원터치로 변환하는것이 가능한 재미있는 익스텐션입니다.
텍스트 문자열을 템플릿리터럴로 백틱(backtick)으로 하고 싶은 경우 등에 편리하게 사용할 수 있습니다.

image

20. Better Align

Better Align은 범위를 지정하지 않고도 코드를 아름답게 정렬할 수 있습니다.
사용법은, 정렬하고싶은 행에서 코드파렛트 표시(Ctrl + Shift + P)하여, Align을 선택하면됩니다.

21. Auto Close Tag

Auto Close Tag는, 제가 처음으로 VScode를 사용할때 눈에 가장먼저 들어온 익스텐션입니다.
처럼 태그를 입력하면 다는태그를 자동적으로 보완해줍니다.

이것은 VScode의 기본기능으로 포함되어있지않아, 아주 편리한 기능입니다.

22. Sort Lines

알파벳순으로 정렬되지 않은 배열은 무언가 와닿지 않습니다.
다행히 Sort Lines이 제 마음을 진정시켜줍니다.

23. VScode Google Translate

이건 편리하다고 생각하는 사람은 저밖에 없을지도 모르겠네요.
다국어대응의 프로젝트에 대해서, VScode Google Translate는, 에디터로부터 벗어나고 싶지 않은 제겐 정말로 유용합니다.

24. Prettier

Prettier는, JavaScript, TypeScript, 그 외의코드를 이쁘게 자동정렬해주는 익스텐션입니다.

25. Material Icon Theme

다른 아이콘테마보다 Material Icon Theme가 더 좋은편입니다.
왜냐면, 특히 어두운 테마로 작업할때는, 다른 아이콘테마보다 파일타입을 구분하기 쉽기 떄문입니다.

26. IntelliSense for CSS Class Names in HTML

IntelliSense for CSS Class Names in HTML는, HTML의 클래스 속성값을 워크스페이스 내부의 CSS정의로부터 보완해주는 역할을 합니다.

27. Path IntelliSense

Path IntelliSense는, 파일명을 보완하는 익스텐션입니다.

마치며

이걸로 제 포스팅은 끝입니다.
여러분의 개발툴에 새롭고 맘에드는것이 발견되면 즐겁겠네요.
이후 제 포스팅을 기대해주세요.

0개의 댓글

로그인을 하시면 댓글을 작성할 수 있어요 !
목록으로 가기