본문 바로가기

vscode8

[VS Code] 중첩된 서브 폴더가 1개인 경우, 안 펼쳐지는 현상 해결 # VS Code에서 서브 폴더 1개 일 때, 안 펼쳐지는 현상 Visual Studio Code에서 디렉터리 구조상, 부모 폴더의 자식 폴더가 단 1개만 있을 경우, 아래와 같이 서브 폴더가 펼쳐지지 않고 상위폴더/하위폴더 상태로 표시될 수 있다. 별거 아닐 수 있지만, 디렉터리 구조 파악이 한 눈에 안 들어오고, 폴더를 잘못 선택하게 될 수도 있다. # 해결 방법 1. Settings 진입 2. Compact Folders 검색 3. Compact Folders 의 체크 해제 완벽하게 해결 되었다. 이제 서브 폴더가 1개만 있어도, 모든 디렉토리가 펼쳐져서 노출되는 것이 디폴트가 된다. 2023. 5. 2.
[VS Code] Enter 개행 다음줄 들여쓰기 간격(Indent) 문제 조정 방법 Visual Studio Code 에서 Enter를 치고 다음 행으로 내려가면 앞에 특정 간격(Indent)으로 들여쓰기 된다. 이 때 간혹 아래의 2가지 문제가 발생하는 경우가 있다. # VS-Code 들여쓰기 간격 문제 ▶ 1번째 문제: Indent가 사라진다. - 엔터를 치면 간격이 생기는데, - 방향키로 커서를 위로 올리면 간격이 사라진다. ▶ 2번째 문제: indent 간격이 안 맞는다. - 엔터를 치면 간격이 생기는데, - 설정한 값과 불일치하는 다른 탭 간격이 적용된다. * 탭 간격 설정은 Preference>Setting의 Editor: Tab Size, 혹은 prettier 사용시 printWidth 등으로 할 수 있다. 이런 사소한 문제가 코딩의 생산성과 효율성에 영향을 미칠 수 있으므.. 2022. 8. 21.
[VS Code] .git 등 숨김 파일/폴더 표시 방법 # Visual Studio Code 에디터에서 .git 등 숨김 파일/폴더 표시 방법 VS-Code 에서 .git 등의 숨김 폴더/파일을 표시하는 방법을 정리한다. 1. 설정 화면 진입 - Settings 항목을 클릭한다. 2. "exclude" 검색 - Files:Exclude 항목에 **/.git 등 숨김 폴더/파일들이 설정되어 있다. 3. 표시하고 싶은 숨김항목을 Files: Exclude 에서 제거 - 마우스를 올리면 나타나는 X버튼을 클릭하여 숨김항목을 제거한다. * 연필 모양 아이콘을 클릭하며 편집 가능하다. * Add Pattern 버튼을 클릭하여 추가도 가능하다. 2022. 8. 19.
VSCode 캔버스(Canvas), WebGL 자동완성 안됨 해결 방법: @type VIsual Studio Code 상에서 html canvas나 WebGL 작업을 하는데, 아래처럼 아무런 자동완성이 뜨지 않을 때가 있다. 매번 명령어를 검색해보기도 귀찮다. # 해결방법 : @type을 통해 VS Code에게 힌트를 주면, Canvas나 WebGL 컨텍스트 객체도 자동완성이 된다. 1. CanvasRenderingContext2 : canvas컨텍스트 객체 생성 전에, 아래처럼 @type 태그 주석을 달아준다 /** @type {CanvasRenderingContext2D} */ const canvas = document.getElementById("canvas_main"); /** @type {CanvasRenderingContext2D} */ const ctx = canvas.ge.. 2021. 6. 14.
VS CODE: JS 함수 주석 문서화하는 방법(자동완성 툴팁 노출) 자바스크립트 작업을 할 때, 함수에 주석을 달아서 문서화(Doc?)해두면, 함수를 호출할 때 아래처럼 자동완성 툴팁이 노출되어 아주 편하다. 즉, 함수의 파라미터 타입, 반환값에 대한 정보를 보면서 프로그래밍할 수 있게 된다. (작업 환경: VSCode 자바스크립트 개발) # JS 함수의 문서화 주석 만드는 방법 1. 함수 선언 ▶︎ 평소처럼 함수를 만들어준다. ▶︎ 여기서는 id, name을 파라미터로 받아서 반환하는 getInfo 함수를 선언했다. 2. 주석 생성 ▶︎ 함수의 바로 윗부분에서 /** 까지만 입력한다. ▶︎ 아래와 같은 자동완성이 노출되면 엔터를 쳐준다. 3. 파라미터 타입 ▶︎ @param {*} 파라미터 형식의 주석이 자동완성 되면, ▶︎ 대괄호 { } 사이에 number, stri.. 2021. 5. 9.
[VS Code] HTML 템플릿 자동완성 기능 사용 방법 기초/기본(Emmet: 에밋) Visual Studio Code에는 Emmet(에밋)이라는 플러그인이 기본으로 내장되어 있는데, 코딩을 아주아주 빠르게 할 수 있게 해주는 자동완성 기능이라고 보면 된다. 예를 들어, html 파일을 만들고, 느낌표( ! )만 입력하면 아래 화면 처럼 Emmet 자동완성 창이 뜨는데, 그대로 Enter를 치면, HTML기본 왁구가 완성된다. 또한 아래처럼 리스트를 만들려면, ul태그 쓰고, li태그 쓰고, 클래스 쓰고, 내용 쓰고, li 태그 닫고,,, 등을 반복해야 하지만. Emmet 자동완성 기능을 이용하면 아래 한 줄이면 끝난다. 클래스와 내용의 번호를 순차적으로 1씩 증가 시킨 것도 확인할 수 있다. 이번 글은 코딩 효율성을 엄청나게 높여주는 Visual Studio Code의 Emmet 기초 .. 2021. 3. 26.
[VS Code] 탭(Tab)으로 세미콜론, 괄호, 브래킷, 따옴표 점프 이동 방법(건너뛰기) VS코드에서 코드를 작성하다 보면, 따옴표"", 괄호(), 브래킷, 콜론:, 세미콜론; 입력 시, 매번 화살표로 조작해야해서 불편할 때가 많습니다. 다른 에디터(이클립스 등)에서는 Tab키만 누르면 자동으로 따옴표나 괄호, 세미콜론을 건너뛰어서 점프시켜주는데, VSCode는 그런 내장 기능은 찾기가 힘듭니다. 하지만 Tabout이라는 익스텐션을 설치하면 브래킷, 따옴표, 콜론, 세미콜론, 괄호 등을 탭으로 이동할 수 있습니다. 아래의 방법으로 설치하고 사용해보시면 신세계를 경험하실 겁니다. # 탭 이동 익스텐션: Tabout 설치 및 사용 방법 1. VSCode에서 Extension 설치 메뉴 선택 : 왼쪽 사이드바에서 Extenstion 메뉴를 선택합니다. 2. Tabout 검색 및 설치 : 검색창에서.. 2021. 3. 26.
[VS Code] 자주 사용하는 기본 핵심 단축키(shortcuts) 정리 모음 VS CODE에서 HTML, CSS, Javacscript 개발할 때, 자주 사용하는 단축키를 정리해 보았습니다. 글로만 읽으면 이해가 안 될 수 있으나, 그냥 한 번씩 눌러보면, 아~~! 하실겁니다. (문제가 발생할만한 단축키는 없으니 걱정 마시길!) ### VSCode 핵심 단축키 모음### # 기본 에디터 단축키 1. 사이드바 접기/펴기 Command + B 2. 코드 위/아래 이동 Option + 위/아래 3. 코드 위/아래 복사 Option + Shift + 위/아래 4. 한 행 삭제 Command + Shift + K 5. 행 삽입 위에 행삽입 : Command + Shift + Enter 아래행 삽입 : Command + Enter 6. 동일 단어 찾아서 한번에 수정 Command + D 연.. 2021. 3. 26.

티스토리툴바