본문 바로가기
반응형

vsCode12

VSCode Tip - HTML 기본 구조 자동완성 Emmet HTML 문서를 작성하다보면 기본 HTML 구조를 매번 타이핑 하기가 번거롭다. VSCode에서도 이부분에 대해서 알고 있는지 파일이 HTML인 경우 다음 단축키를 이용해서 자동으로 기본 내용을 작성해 준다. ! 후 Tab 입력 사용방법은 먼저 !(느낌표)를 입력하면, Emmet abbrevia.. 이라는 내용이 나타난다. 실제로 내용을 살펴보면, ! 입력 이때 Tab를 누르게 되면 HTML 기본 구조를 입력해주게 된다. Emmet를 수정하고 싶거나 보다 자세히 알고 싶다면, 아래 공식 문서를 참고하면 좋을 듯 하다. https://code.visualstudio.com/docs/editor/emmet Emmet in Visual Studio Code Using Emmet abbreviations ins.. 2023. 1. 2.
Svelte - VSCode Can't find stylesheet to import scss prependData 설정 문제 해결 오랫만에 Svelte 코드를 수정할 일이 있어서 파일을 열었는데 온통 붉은 빛으로 물든다... 확인해보니, Can't find stylesheet to import scss 오류와 함께, svelte.config.js에서 지정한 prependData 설정이 잘못되었다고 한다. 흠... 한참을 들여다보다가, 문제의 원인을 확인한 부분은 바로... 경로에 있다는 것을 알게 되었다. 위 경로를 보면, ./src/scss/main.scss 상대 경로로 되어 있어 실제 사용할 때에는 문제가 없지만, VSCode입장에서는 어디인지 위치 확인이 원할하지 않은 문제.. 그래도 붉은색은 개발자에게 있어서 매우 불길한 색상이기에 검색을 해본 결과 절대 경로로 설정할 수 있는 방법을 찾았는데 아래와 같다. import pa.. 2022. 12. 15.
VScode - (Azure, AWS) Ubuntu SSH 연결하기 with pem 아마 대부분 SSH 연결하는 방식이 비슷 할것이며 몇가지 다른부분에 대해서 정리해 본다. VSCode는 현재 많은 개발자가 사용하고 있고, SSH 관리 프로젝트를 효율적으로 관리할 수 있도록 제공하는 만큼, VSCode를 이용하여 SSH를 연결하는 것이 큰 이점이라고 할 수 있다. 그럼 간단히 VSCode를 이용해서 SSH를 연결하는 방법에 대해서 알아보고자 한다. 1. VSCode SSH 설정 with pem 가장 먼저 SSH 확장 프로그램을 이용하도록 하자. 바로가기 단축키는 아래와 같다. 맥은 CMD, 윈도우는 Ctrl 키를 사용한다. shift+CMD(Ctrl)+P, "SSH" 만약 확장 프로그램을 설치하지 않았다면, 왼쪽에 위치한 확장 아이콘을 클릭하여 ssh를 검색해 Remote - SSH를 .. 2022. 12. 13.
VSCode - IntelliCode 신기능 API 사용 VSCode를 확장기능을 보다가 IntelliCode 의 신규 기능 IntelliCode API 를 보게 되었다. IntelliCode는 기본적으로 코드를 타입핑하면, 가장 알맞은 기능 코드를 보여주는데 초점이 맞춰져있다. 그리고 해당 함수의 파라미터 값들을 사전에 보여줌으로써, 사용자의 코드 작성을 도와주는 확장팩이다. IntelliCode API 는 여기에 Github에 있는 다량의 코드 정보를 이용해서 가장 알맞은 코드를 찾아주는 기능을 한다. 백문이 불여일견이라는 말에 필자도 직접 requests 라는 Python 유명 라이브러리를 해본결과 파라미터 값에 따라서 GIthub 코드를 확인할 수 있어 매우 휼륭하다는 생각이 들었다. 특히 코드 사용에 대해 여러 경우를 비교해 볼 수 있어서 더욱 좋았던.. 2022. 12. 6.
VSCode - Django 자동 완성 않될때 해결 방안 마지막 업데이트 221018 Django에서 자동완성이 되지 않는 상황에서 어떻게 해결할 수 있을까 정리해본다. 보통 이런 상황은 가상 환경이거나, Docker 환경등에서 발생할 가능성이 높다. 이유는 현재 VS Code에서 바라보는 Python 실행 환경이 django 라이브러리를 인식할 수 없는 상태이다. 즉 다중 환경으로 개발을 하는데 현재 VSCode의 환경에서는 사용이 불가능 하다는 얘기이다. 따라서 해결 방법으로는 2가지가 있다. 1. 현재 환경에 Django 환경과 동일하게 라이브러리를 설치해준다. 2. Django 를 개발하는 환경의 Python 경로를 입력한다. 첫번째 방법은 개발 환경마다 따로 구성할 필요가 없도록 구성하여 개발 편의성은 있지만, 라이브러리의 기능적 문제나 환경 문제등에.. 2022. 10. 18.
VSCode - 파일 저장시 공백 자동 제거 코드를 작성하다보면 불필요한 공백이 발생하는 경우가 많다. 이러한 공백은 코드를 읽는데는 문제가 없지만, Python은 컴파일 기반이 아닌 라인 방식으로 읽어 들이는 Interpreter 방식이기 때문에 불필요한 공백이 존재하면 해당 코드가 의미가 있는것인지를 계산하는 시간이 필요하기 때문에 이를 제거하는 것이 깔끔하다고 할 수 있다. VSCode에서 이를 자동 제거해주는 옵션을 제공하는데 아래와 같이 옵션 활성화가 가능하다. VSCode에서 Preferences로 들어가서 Settings로 들어가, WhiteSpace 관련 옵션을 검색한다. 그럼 아래와 같이 Trim Trailing Whitespace 옵션을 찾을 수 있고, 이를 활성화 하면, 이후 부터 아래와 같은 불필요한 공백으로 판단되는 마지막 .. 2022. 9. 13.
VSCode(Visual Studio Code) - 코드 펄치기 접기(Fold/UnFold) 단축키 코드 리뷰등 한번에 볼 때 유용한 코드 펄치기 접기(Fold/UnFold) 설명 단축키 현재 영역 접시 Ctrl + Shift + [ 현재 영역 펼치기 Ctrl + Shift + ] 전체 접기 Ctrl + K + 0(숫자) 전체 펼치기 Ctrl + K + J 2022. 9. 2.
VSCode(Visual Studio Code) - 단축키 확인 및 변경 단축키 변경/확인 View 메뉴에서 Command Palette를 실행하고, 이후 Keyboard Shortcuts 를 실행하여 현재 설정된 단축키를 볼 수 있다. 내용을 보면 상당히 다양한 단축키가 설정되어 있는 것을 알 수 있다. 단축키 검색 검색을 할때 따옴표로 묵어서 검색을 하면 Keybinding을 검색하며, 따옴표 없이 검색을 하면 Command로 검색이 가능하다. 변경하거나 새로 등록하고 싶은 Command에서 Keybinding을 더블 클릭하여 원하는 키를 누루고 엔터를 입력하자. (잘못 입력했을 경우 esc를 통해 취소할 수 있다.) 주요 단축키 Visual Studio Code의 주요한 단축키는 아래에서 확인이 가능하다. PDF 파일 위치 keyboard-shortcuts-windows.. 2022. 9. 2.
Visual Studio Code - Python 자동 주석 생성 autoDocstring 코드를 작성하다보면, 코드가 점점 길어지고, 작성한 함수에서 사용하는 파라미터를 일일이 기억해서 사용하는것이 어려워진다. 이때 함수에 작성해 놓은 주석 생성을 도와주는 유용한 앱이 있다. autoDocstring 앱을 설치하고 쌍따옴표 3개를 입력하면 Docstring을 생성할 것인지를 확인하는 창이 나타난다. 여기에서 엔터를 누르면, 현재 기준으로 함수 설명, 입력 값, 출력 값의 기본 포맷을 만들어 주어서 쉽게 설명을 작성할 수 있다. 2022. 8. 1.