coding/editor 50
VS code 단축키 명령어 팔레트(Command Palette)
VS code 단축키 중 알아두면 유용한 명령어 팔레트 단축키를 알려드립니다. 1. 명령어 팔레트 Command Palette VS code에서 명령어 팔레트(Command Palette)의 단축키는 Ctrl + Shift + P 입니다. 그 외에도 F1 키를 눌러도 명령어 팔레트를 열 수 있습니다. 명령어 팔레트는 위의 이미지처럼 명령어를 검색해서 사용할 수 있습니다. - 키워드 입력 명령어 팔레트에 찾고자 하는 키워드를 입력하면 키워드가 포함된 작업이 쭉 뜨는데 여기서 원하는 작업을 클릭하거나 선택된 상태에서 엔터를 누르면 명령어가 실행됩니다. 특정 명령어의 단축키를 모르거나 찾기 힘들어도 검색해서 찾을 수 있다는 편리함이 있습니다. 2. 명령어 팔레트 사용하기 파일 저장 VS code에서 명령어 팔..
visual studio code 유용한 확장 기능 모음 7가지
비주얼 스튜디오 코드에서 유용한 확장 기능 몇 가지를 소개해드릴게요. 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/..
비주얼 스튜디오 코드 prettier
코드의 형식을 정해주는 확장 기능 prettier을 설치하고 설정해보겠습니다. 1. 설치 방법 확장 기능 설치 ① 비주얼 스튜디오 코드 왼쪽 메뉴에서 확장을 선택한다. ② 확장 탭 검색창에 prettier 검색. ③ Prettier - Code formatter 설치. 오른쪽 아래에 있는 파란색 설치 버튼을 누르셔도 설치가 되고, 그냥 확장 기능을 눌러서 상세페이지에서 설치를 눌러도 설치가 됩니다. 2. 설정 방법 단축키 [Ctrl + ,]를 누르면 설정창으로 바로 이동할 수 있습니다. 맥에서는 [Cmd + ,]를 눌러주세요. 설정 검색창에 save를 검색하시면 가장 위에 Format On Save를 설정할지 말지 결정하는 체크 박스가 보이실 겁니다. 우리가 설정하는 포맷. 즉, 형식을 저장하려면 체크를..
비주얼 스튜디오 코드 html 태그 자동으로 바꾸기
html 태그를 수정할 때 여는 태그와 닫는 태그를 모두 수정하는 번거로움이 있죠. 비주얼 스튜디오 코드의 auto rename tag 확장 기능을 사용하면 한 곳만 바꿔도 자동으로 바꿔줍니다. 편리하죠? 1. Auto rename tag 다운로드하기 확장 기능 설치 포스팅을 보셨던 분들이라면 많이 익숙해지셨을 화면이죠? 왼쪽 아이콘 중 가장 아래에 있는 확장 탭을 선택한 뒤 검색 창에 auto를 입력해줍니다. 가장 위에 Auto Rename Tag 확장 기능이 보이시죠? 설치해줍니다. Auto Rename Tag 설치 방법 정리 ① 확장 탭 선택 ② 검색창에 auto 검색 ③ Auto Rename Tag 설치 2. 기능 살펴보기 확장 기능의 상세페이지로 들어와서 어떻게 사용하는지 살펴봅시다. gif 이..
[VS code] css에서 html class 보기
css를 작성하다가 내가 클래스명을 뭐라고 적었더라? 하고 다시 html로 돌아가신 적 있으시죠? 이 확장 기능은 그 불필요한 동작을 줄여주는 좋은 친구입니다. 1. 설치하기 설치방법 ① vs code 에서 왼쪽 메뉴 가장 아래 확장 메뉴를 선택한다. ② 검색창에 html to 를 검색한다. ③ HTML to CSS autocompletion 확장 기능을 설치한다. 확장 기능 HTML to CSS autocompletion 상세 페이지를 보시면 css에서 클래스를 작성할 때 아래 그 이름이 들어가는 클래스명들을 쭉 보여주는 것을 알 수 있습니다. 2. HTML to CSS autocompletion 사용 방법 ① html과 연결된 css에서 클래스 이름을 적는다. ② [.+클래스명]을 입력하고 아래로 나..
![[VS code] css에서 html class 보기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/c0IOv8/btrkAN1qGNB/aWNdFQsKllZGrQ1tyI0RaK/img.png)
