비주얼 스튜디오 코드에서
유용한 확장 기능 몇 가지를 소개해드릴게요.
1. Korean(사용법) Language Pack for Visual Studio Code
visual studio code를 처음 설치하면 영어가 기본 언어인데요 확장 기능을 이용해 한글로 변경할 수 있습니다.
한글 패치
① Korean(사용법) Language Pack for Visual Studio Code 설치
② 설치 방법
[coding/editor] - [vs code] 비주얼 스튜디오 코드 한글 패치 하기
[vs code] 비주얼 스튜디오 코드 한글 패치 하기
안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드가 영문판이라 편하게 한글 패치를 해보려고 합니다. [비주얼 스튜디오 코드 다운로드 받기] [coding/etc] - [vs code] 비주얼 스튜디오 코
ssimplay.tistory.com
2. php intellisense for codeigniter
visual studio code에서 php를 사용할 때 좋은 확장 기능입니다.
php 개발환경 설정
① php intellisense for codeigniter 설치
② 설치 방법
[coding/editor] - [vs code] 비주얼 스튜디오 코드 php 개발환경 설정하기
[vs code] 비주얼 스튜디오 코드 php 개발환경 설정하기
vs code에서 php 작업을 하려면 약간의 준비가 필요한데요. 차근차근 같이 해봅쉬다~! 1. php 설치 [coding/etc] - [PHP] php 설치하기 (윈도우) [PHP] php 설치하기 (윈도우) 오늘은 php를 설치해보겠습니다. 1...
ssimplay.tistory.com
3. Bracket Pair Colorizer 2
코드 중 괄호의 색을 바꿔주는 기능입니다. 괄호 안에 괄호 안에... 이런 식으로 여러 겹이 겹쳐져있을 때 알아보기 쉬워집니다.
괄호 색 넣기
① bracket pair colorizer 2 설치
② 설치 방법
[coding/editor] - vs code 괄호 색 넣어주는 확장 기능 설치해보자
vs code 괄호 색 넣어주는 확장 기능 설치해보자
vs code가 아무리 개발환경이 좋다고 해도 인간은 계속해서 더 좋은걸 찾게 됩니다. 1. 확장 탭 비주얼 스튜디오 코드를 열고 왼쪽 아이콘 중 가장 아래에 있는 확장 탭을 열어주세요. 그리고 [Bracke
ssimplay.tistory.com
4. indent-rainbow
들여 쓰기를 했을때 앞쪽의 공백에 색을 채워주는 기능입니다. 라인을 맞춰서 보기 좋습니다.
들여쓰기 색 넣기
① indent-rainbow 설치
② 설치 방법
[coding/editor] - 들여쓰기 색 넣기 VS code
들여쓰기 색 넣기 VS code
비주얼 스튜디오 코드의 시각적인 보정 확장 코드를 하나 더 알려드립니다! 1. Indent rainbow indent는 들여 쓰다는 뜻의 영어단어로 들여 쓴 부분을 무지개색으로 만들어주는 확장 기능입니다. 이 기
ssimplay.tistory.com
5. HTML to CSS autocompletion
css 파일에서 html에 작성한 class명을 보여주는 기능입니다. css와 html 문서를 왔다 갔다 할 필요가 없어져서 좋습니다.
css에서 class명 보기
① html to css autocompletion 설치
② 설치 방법
[coding/editor] - css에서 html class 보기
css에서 html class 보기
css를 작성하다가 내가 클래스명을 뭐라고 적었더라? 하고 다시 html로 돌아가신 적 있으시죠? 이 확장 기능은 그 불필요한 동작을 줄여주는 좋은 친구입니다. 1. 설치하기 설치방법 ① vs code 에서
ssimplay.tistory.com
6. Auto Rename Tag
html에서 여는 태그의 이름을 수정하면 닫는 태그의 이름도 수정해줍니다. 반대의 경우도 마찬가지입니다.
태그 이름 자동 수정하기
① auto rename tag 설치
② 설치 방법
[coding/editor] - 비주얼 스튜디오 코드 html 태그 자동으로 바꾸기
비주얼 스튜디오 코드 html 태그 자동으로 바꾸기
html 태그를 수정할 때 여는 태그와 닫는 태그를 모두 수정하는 번거로움이 있죠. 비주얼 스튜디오 코드의 auto rename tag 확장 기능을 사용하면 한 곳만 바꿔도 자동으로 바꿔줍니다. 편리하죠? 1. Au
ssimplay.tistory.com
7. Prettier
코드의 전체적인 형식을 조절할 수 있습니다.
코드 형식 정하기
① prettier 설치
② 설치 및 설정 방법
[coding/editor] - 비주얼 스튜디오 코드 prettier
비주얼 스튜디오 코드 prettier
코드의 형식을 정해주는 확장 기능 prettier을 설치하고 설정해보겠습니다. 1. 설치 방법 확장 기능 설치 ① 비주얼 스튜디오 코드 왼쪽 메뉴에서 확장을 선택한다. ② 확장 탭 검색창에 prettier 검
ssimplay.tistory.com
이 모든 확장 기능은 본인의 개발 환경 편의를 위해서 설치하는 것이지
의무는 아니기 때문에 꼭 설치하실 필요는 없습니다.
먼저 겪어보시고 불편함을 느끼시면 다시 돌아와서 설치해보세요.
도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다.
[같이 보면 좋은 포스팅]
[coding/editor] - 비주얼 스튜디오 코드에서 찾아서 바꾸기
비주얼 스튜디오 코드에서 찾아서 바꾸기
비주얼 스튜디오 코드에서도 찾기뿐만 아니라 찾아서 바꾸기 기능을 사용할 수 있다는 사실 알고 계셨나요? 왜 이 편리한 기능을 여태 몰랐을까... 저는 그것도 모르고 일일이 찾아서 바꾸고 했
ssimplay.tistory.com
[coding/editor] - vs code에서 코드 한 번에 주석처리하기
vs code에서 코드 한 번에 주석처리하기
코딩을 하다 보면 아 여기서부터 여기까지는 잠깐 주석 처리를 해둬야지.. 하는 생각 해보신 적 있으시죠? 일일이 주석을 타자로 치고 있었는데 이게 단축키가 있다는 사실 알고 계셨나요? 비주
ssimplay.tistory.com
그럼 이만.
총총.
'coding > editor' 카테고리의 다른 글
비주얼 스튜디오 코드 유용한 단축키 - 파일 찾기 (VS code) (6) | 2022.01.29 |
---|---|
VS code 단축키 명령어 팔레트(Command Palette) (6) | 2022.01.28 |
비주얼 스튜디오 코드 prettier (2) | 2021.11.25 |
비주얼 스튜디오 코드 html 태그 자동으로 바꾸기 (2) | 2021.11.23 |
[VS code] css에서 html class 보기 (6) | 2021.11.17 |