정말 다양한 코딩 프로그램이 있는데 가장 많이 사용하고 대표적인 프로그램인 VSCode를 사용하는 중입니다.
여러분들 중 다른 프로그램을 쓰신다면 그대로 쓰시고, 이제 시작해볼까 하시는 분들은 VSCode를 사용해보시는게 어떨까요? 😊
VSCode를 사용하신다면 추가적으로 프로그램내에 설치하면 좋은 확장프로그램을 추천해드리겠습니다.
1. VSCode 설치하기 ❤️❤️
https://code.visualstudio.com/
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
홈페이지 들어가서 보이는 Windows / Mac OS / 리눅스 본인의 PC에 맞는 것으로 다운로드 받으시면 됩니다.
열심히 다음버튼을 눌러서 넘기시면 됩니다.
2. 설치가 완료되면 실행하여 바로 응용프로그램들을 설치해보도록 하겠습니다.
프로그램이 실행이 되면 왼쪽에 5가지의 버튼이 보이는데 그중 가장 밑에 블록 모양을 클릭하여 줍니다.
그러면 응용프로그램을 설치할 준비가 됐습니다.
3. 추천프로그램
0). Korean
저와 같이 영어는 우웩이라시는 분들은 일단 설치부터 하시면 됩니다. 뒤도 돌아보지 말고 이것부터 설치하세요.
0순위입니다. 매우 매우매우매앰애움엉먀ㅑ우매우 좋습니다. 👍👍👍👍👍👍👍👍👍👍👍👍👍👍
1). Auto Rename Tag
솔직히 정말 편리한 기능입니다. <div></div>태그를 사용한다고 예를 들면 앞에 태그만 수정해도 end태그가 같이 수정이 되는 아주 꿀꿀꿀 기능입니다. 👍👍👍👍👍
2). Bracket Pair Colorizer
저희는 작업을 할경우 ()괄호를 정말 많이 사용하게 되는데 구분을 위해 필수적으로 설치해주시면 됩니다. 정말 편리한 기능 입니다. [ js 작업을 할 경우 차이를 보실수 있습니다. ]
3). CSS Peek
웹 디자인을 하실때 html과 css를 번갈아가며 보는데 내가 한 class, id를 못찾겠다 싶으면 ctrl + (class,id)클릭하면 자동으로 style.css 페이지로 넘어가 보고싶은 class나 id를 찾아주는 아주 편리한 기능입니다. 웹 디자인을 하신다면 매우 필수입니다. 👍👍👍
4). HTML CSS Support
간단하게 자동완성 프로그램이라고 생각하시면 됩니다. html에 css가 연결이 되어있다면, class나 id에 코드를 입력할 때 자동완성을 보여주며 귀찮은 타이핑을 줄여줍니다. 꿀꿀👍👍
5). indent-rainbow
띄어쓰기나 탭을 누르면 그 간격을 여러가지 색상으로 구분해주어 헷갈림을 방지하게 해주는 프로그램입니다. 굳이 필요 없으시다고 생각하시면 안쓰셔도 됩니다. 👍
6). Live Server
작업중인 html을 오른쪽 클릭하면 바로 live server로 연결이 됩니다. 귀찬게 새로고침을 하지 않아도 ctrl + s 누르면 바로 바로 실시간으로 변경된 모습이 보이기에 편리합니다. 😎
7). Material Icon Theme
파일들을 계속해서 만드실텐데 모든 파일마다 다같은 확장자만 사용하실거는 아니실거라 생각이 듭니다. 그 확장자 마다 다른 디자인으로 구분이 명확해지게 해주며, 디자인도 이쁩니다.😍
8). Prettier - Code formatter
Js코드를 작성하시다보면 구분이 안되시는 경우가 있을 수 있습니다. 이 프로그램을 다운받으면 다양한 색으로 다른 코드들을 사용하실 때 겹치지 않고 보기 편하고 구분이 잘 될 수 있게 되어있습니다. 정말 필수라고 할 수 있습니다.
9). Material Theme
현재 사용중인 VScode가 너무 단조롭게 멋이 없다 싶으시면 조금이나마 다른 테마를 써보고 싶다 하신분은 설치하셔서 사용하시는 것도 괜찮다고 생각합니다.
4. 마치며..
조금이라도 도움이 되었다면 좋겠습니다. 제가 사용중인 프로그램만 설명드렸고, 더 멋있고 편리한 프로그램이 있다면 좀더 찾아보고 알려드리도록 해보겠습니다. 그럼 이만 bye bye~
