본문 바로가기

 

[팁] 텍스트 에디터 추천! 

Visual Studio Code (비주얼 스튜디오 코드) 추천합니다. 

간단한 명령어들과 추천 확장 프로그램을 소개합니다.

 

 

 

 

이번에 소개해드릴 텍스트 에디터는! 

바로 Visual Studio Code (비주얼 스튜디오 코드)입니다.

 

Atom(아톰), Notepadd++(노트패드) , SublimeText(서브라임텍스트), Brackets(브라켓) 

등등 텍스트 에디터들이 많이 출시하고 있고 많은 사람들이 사용하고 있습니다.

 

그래서 MS 에서도 유행에 뒤처지지 않도록 텍스트 에디터를 만들어 무료로 서비스를 제공하고 있습니다.

저같은 경우는 SublimeText와 Visual Studio Code를 같이 사용하고 있습니다.

SublimeText는 돈내라는 팝업을 견뎌내야하고 Atom 이나 Brackets은 킬때 빠르게 안켜지고

가끔 멈춤현상도 보입니다. 

Visual Studio Code는 다른 에디터와 비슷하지만 딜레이도 사용해보니 적은것같고 많은 확장프로그램도 있어 사용하게 되었습니다.

 

 


설치하기

 

우선 홈페이지는 아래에서 받으시길 바랍니다.

 

https://code.visualstudio.com/

 

 

 

VisualStudioCode 줄여서 VSCode 하며 Windows, MacOS, Linux를 지원합니다.

 

 

 

Windows의 경우는 설치하는 것처럼 설치파일을 클릭하여 진행하면 됩니다.

아래와 같은 매번 보던 설치 마법사가 실행이 됩니다.

 

 

 

 

 

 

설치를 마쳤으면 설치 마법사와 동일한 아이콘을 가지고 있는 실행파일이 생성됩니다.

실행하시면 되겠죠??

 

 

 

위 사진은 시작 화면 입니다. 

JavaScript, TypeScript, Python, PHP, Azure, Docker 등에 대한 지원 설치도 가능하다고 합니다.

 

 

 

또한 커맨드 창(터미널)을 사용할 수 있는 환경을 제공합니다.

 

 

 

 

 

추천 확장프로그램

 

 

Markdown

기본으로 제공하고 있는 Markdown

주요 사용 명령어인 Ctrl + Shift + P 를 누른 뒤 MarkDown을 입력합니다.

또는 Ctrl + Shift + V 를 이용하여 볼 수 있습니다.

이제부터 깃허브에 Read 파일을 미리 볼 수 있어졌습니다!

 

단축키 마우스 오른쪽버튼 클릭 후 Toggle 중 선택

  • Ctrl + B : 굵은 글씨
  • Ctrl + I : 글씨 기울기
  • Ctrl + L : 링크
  • Ctrl + Shift + L : 이미지 넣기
  • Ctrl + M --> Ctrl + C : 코드 블럭 생성/삭제
  • Ctrl + M --> Ctrl + I : 인라인 코드 블럭 생성/삭제
  • Ctrl + M --> Ctrl + B : 블릿 생성/삭제
  • Ctrl + M --> Ctrl + 1 : 리스트 생성/삭제
  • Ctrl + M --> Ctrl + X : 체크박스 생성/삭제

 

단축키로 이제는 멋있는 README.md를 만들 수 있습니다.

 

 

 

View In Browser

말그대로 html을 VS에서 볼 수 있도록 해주는 확장프로그램입니다.

Ctrl + Shift + P를 이용하여 열거나 

Ctrl + F1 을 이용하여 열 수 있습니다.

 

 

ESLint

다음으로 추천하는 JavaScript를 사용한다면 필수로 설치해야할 ESLint 입니다.

JavaScript에 명령어들이나 코딩스타일을 가이드해주기도 합니다.

자동 코드 정렬을 이제 사용할 수 있습니다.

Ctrl + K + F 를 이용할 수 있습니다.

 

 

 

 

그 외 추천 확장 프로그램

 

Auto Rename Tag, Auto Close Tag

자동으로 짝 태그를 수정, 삭제해줍니다.

 

Debugger for Chrome

크롬 디버깅 환경 사용을 위한 확장 프로그램

 

npm, npm intellisense

npm 보조 확장 프로그램과 모듈추가시에 import시 자동 완성 기능

 

highlight-matching-tag

태그 시작과 끝 부분을 강조해줍니다.

 

React Native Tools , Reactjs code snippets

리엑트 네이티브, 리엑트js 코드 스니펫 추가

 

Path Intellisense

파일 경로를 자동으로 완성해줍니다.

 

Setting Sync

비주얼 스튜디어 코드 설정을 어디에서나 동일 환경으로 동기화 해줍니다.

 

ftp-sync

VSCode에서 ftp로 바로 업로드 할 수 있는 기능을 제공합니다.

 

 

이 외에도 다른 개발자들이 개발언어를 사용할 때 오른쪽 아래에 뭔가를 설치할것이냐고 물어오는 경우가 있어 설치하여 사용하면 편리합니다.

 

 

 

[팁] 텍스트 에디터 추천! 

Visual Studio Code (비주얼 스튜디오 코드)

포스팅을 마치겠습니다.

 

 

 


도움이 되셨다면 공감과 +a가 제 젤리값의 큰 힘이됩니다.

 

엉망진창

개인 블로그 입니다. 코딩, 맛집, 정부정책, 서비스, ~방법 등 다양한 정보를 소개합니다