vsCode 설정 (4) 썸네일형 리스트형 없어도 되지만 있으면 편리한 vsCode 확장프로그램 [ Auto Complete Tag ] : Auto Complete Tag는 Auto Close Tag, Auto Rename Tag 가 합쳐진 확장프로그램이다. Tag를 쓸때 시작과 동시에 자동으로 끝 Tag를 시작 Tag와 동일하게 바꿔주고 생성한다. [ Auto Import ] : import 해야되는 파일이 있을때 자동으로 인식하여 상단에 import 부분을 자동생성해준다. [ Autoprefixer ] : scss 같은 스타일 관련된 파일에서 브라우저마다 접두어가 다른 경우가있다 -webkit- : 구글 , 사파리 -moz- : 파이어폭스 -ms- : 익스플로러 (보통생략) -o- : 오페라 예를 들면 #div{ background: -webkit-linear-gradient(left ,red .. Prettier (코드 자동 정렬) 설정 [사용 이유] Prettier를 사용하게 되면 코드를 정해진 방식대로 자동으로 정렬을 시켜주어 가독성을 높일 뿐만 아니라 팀원들과 같은 조건에서 정렬이 되므로 소스 충돌도 줄이게 됩니다 [설치] Extention에서 prettier를 검색하여 설치해준다 [설정 방법] 1. File(파일) > Preferences(기본 설정) > Setting(설정) 으로 이동 (= 화면 왼쪽 하단 톱니바퀴 클릭, 단축키 Ctrl + , 이용 ) 2. User(사용자) > TextEditor(텍스트 편집기) > Formatting(서식) - Format On Paste : 사용자가 코드를 붙여넣기 했을 때, 자동으로 코드를 정렬 - Format On Save : 사용자가 코드를 저장 했을 때, 자동으로 코드를 정렬 -.. VScode Snippets 직접 만들기 [Snippets를 사용하는 이유] Snippets 을 사용하는 이유는 반복적인 소소의 틀이 있다면 그 틀을 미리 저장해두고 저장한 소스를 약어를 사용하여 불러오는 매우 편리한 기능이다. Extention을 통해 받은 Snippets은 편리하긴하나 단축키를 다 외우기 귀찮고 내가 원하는 스타일이 아닌경우 직접 만들어서 써보는걸로ㅋ [설정] [파일(File)] - [기본 설정(Preferences)] - [사용자 코드 조각(User Snippets)] 경로로 들어간다. 사용자 코드 조각 버튼을 누르고 새 코드 조각을 눌러준다. 상단에 기존 코드 조각은 미리 만들어두었던 snipptes 파일들이다. 새 코드 조각을 누르게 되면 파일이 생성되는데 이안에 해당 Snipppets을 입력하면 된다. view.. Debugger for Chrome(vsCode에서 디버그 사용하기) [설치] 1. 링크를 통해 설치 - https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 2. VScode 확장 관리에서 검색 후 설치 빨간색 표시한 부분을 보면 설치하고 사용할 수 있는 부분이 있습니다 제대로 사용하고 계시다면 저 처럼 보여집니다. [설정] 1. F5 키를 누르거나 상단 메뉴에서 Run(실행) - Start Debugging(디버깅 시작) 를 누르게되면 Select Environment 창이 뜨는데 거기서 Chrome을 선택합니다. 2. launch.json 파일의 내용을 사진과 같이 바꿉니다. [사용방법] Debugger for Chrome을 사용하기 위해서는 우선 현재 개발중인 웹 어플리케이션.. 이전 1 다음
