개발을 하기 위해서는 에디터를 선택하는 것은 필수사항입니다. 저도 여러 에디터(Sublime Text 3, Atom 그리고 지금 vscode)를 개발하면서 사용해봤고, 현재는 VSCode로 정착하게 되었습니다. 그 이유는 무료임에도 불구하고 굉장히 강력한 기능들을 탑재하고 있고, 꾸준히 업데이트가 이뤄지고(제가 생각하기에 가장 중요한 부분) 마지막으로 이 에디터를 관리하고 있는 곳은 무려 마이크로소프트라는 점입니다. 굉장히 메리트가 있죠. (문득 든 생각이 Github가 Atom 에디터를 개발했는데 Github는 마이크로소프트가 인수했으니까 Atom도 마이크로소프트꺼라고 봐야되겠네요....?)
어떻게 관리하는지 궁금하시면 아래 마이크로소프트의 VSCode 깃허브 저장소에서 구경하시면 될 것 같습니다.
microsoft/vscode
Visual Studio Code. Contribute to microsoft/vscode development by creating an account on GitHub.
github.com
VSCode 란?
VSCode를 간략히 소개해드리자면, macOS, windows, linux에서 모두 사용 가능한 Microsoft(MS)에서 개발한 에디터이며, 다양한 extension을 설치하여 개발하는 본인 스타일에 따라서 굉장히 자유롭게 커스터마이징을 할 수 있습니다.
글로벌 점유율
Stackoverflow에서 9만명의 개발자를 대상으로 조사한 결과에 따르면 VSCode가 가장 인기있는 에디터라고 합니다. (근데 Notepad가 저기 있네요... 대단....)
VSCode 설치
VSCode는 macOS, windows, linux를 모두 지원합니다. 여러분이 사용하는 OS에 맞게 VSCode 공식 홈페이지에서 다운 받아 설치하시면 될 것 같습니다 :)
아래 주소로 들어가시면 바로 다운로드가 가능합니다. 들어가면 현재 OS에 맞는 다운로드 화면이 나오게 됩니다.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
여기서도 받을 수 있습니다 :0
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
macOS
다운로드를 받고 압축을 풀면 Visual Studio Code 응용 프로그램이 설치되는데요.
해당 파일을 실행하면 아래와 같이 VSCode가 실행되었음을 확인할 수 있습니다. 설치하기 굉장히 쉽죠?
어떤 에디터가 똑같지만 설치는 굉장히 간편하지만 본인의 개발 스타일, 사용하는 언어에 관련된 필수 확장도구를 어떻게 설치해서 사용하는지에 따라서 생산성에 차이가 난다고 생각합니다. 추후에 제 기준(프론트엔드 개발자)으로 굉장히 유용하거나 사용하면 좋을 것 같은 확장도구를 소개하도록 하겠습니다.
Windows
사실 이걸 다시 설명해야되나 싶지만 (굉장히 설치가 쉽기 때문에...) 윈도우에서 설치 방법도 알려드리겠습니다.
설치방법
이 단계를 다음을 누르시며 진행하시면 설치를 완료하실 수 있습니다 :)
사용방법
아래는 VSCode의 가장 좌측에 있는 Activity Bar 입니다.
위에서부터 설명드리면 파일 편집기, 파일 검색, 깃 소스 컨트롤, 디버거 그리고 확장도구가 있습니다.
파일 편집기는 아래와 같이 해당하는 파일들의 목록을 볼 수 있고, 선택하여 수정하거나 폴더나 파일을 추가할 수 있습니다.
파일 검색은 아래와 같이 원하는 키워드로 파일을 검색할 수 있는 기능입니다.
깃 소스 컨트롤은 깃을 사용하셨을 때 해당하는 파일들이 현재 스테이지에 올라와 있는지 어떤 파일이 수정되었는지 확인할 수 있는 기능입니다.
디버거는 원하는 형식으로 파일을 디버깅할 수 있는 기능입니다. (언어에 따라서 각 디버깅 환경을 제공합니다.)
에디터의 꽃! 확장도구입니다. 이 기능을 활용하면 생산성을 훨씬 끌어올릴 수 있습니다.
하단에는 터미널을 사용할 수 있는 패널이 존재합니다.
이렇게 간단하게 VSCode를 설치하는 방법 그리고 간략하게 VSCode의 기능들을 한번 쓰윽 봤는데요. 사실 가장 중요한 부분은 확장도구!
다음 포스팅은 생산성을 최대로 끌어올려주는 확장도구를 소개하도록 하겠습니다.
'개발 > 유틸리티' 카테고리의 다른 글
| 온라인 코드 에디터를 활용해서 소스코드를 공유하는 방법 - CodeSandbox (0) | 2020.07.20 |
|---|---|
| 맥북에서 화면 녹화한 후 바로 GIF로 다운받는 방법 (2) | 2020.07.16 |
| 텍스트 에디터 Atom(아톰) 패키지 추천(Atom HTML Preview) (0) | 2016.10.18 |
| 텍스트 에디터 Atom(아톰) 패키지 추천(color-picker) (0) | 2016.10.17 |
| 텍스트 에디터 Atom(아톰) 패키지 추천(file-icons) (0) | 2016.10.17 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
