본문 바로가기

Front-end/Visual Studio Code8

[VS Code]Vs Code 유용한 단축키 Visual Studio Code (VS Code)는 다양한 단축키를 제공하여 개발자들이 빠르고 효율적으로 코드를 편집하고 관리할 수 있도록 도와줍니다. 다음은 일반적으로 사용되는 몇 가지 VS Code 단축키입니다. 기본 단축키와 함께 확장(Extensions)을 통해 추가적인 단축키를 사용할 수도 있습니다. 파일 및 에디터 작업 - 파일 열기: `Ctrl + O` (또는 `Cmd + O` Mac) - 파일 저장: `Ctrl + S` (또는 `Cmd + S` Mac) - 파일 닫기: `Ctrl + W` (또는 `Cmd + W` Mac) - 모든 파일 저장: `Ctrl + K, S` (또는 `Cmd + K, S` Mac) - 되돌리기: `Ctrl + Z` (또는 `Cmd + Z` Mac) - 앞으로 가기.. 2023. 9. 25.
[VS Code]비주얼 스튜디오 익스텐션 sftp, ftp를 이용해서 바로 업로드해 보자 에디트플러스를 사용했을땐 저장하면 바로바로 서버에 업로드되서 편하게 코딩했던거 같습니다. VS Code를 사용하면서도 동일하게 가능합니다. 경로 혹은 설정을 잘못해서 저장 후 파일을 하나씩 올리고 있었다면, 아래방법데로 해보세요. 로컬에서 파일을 저장하면 바로 서버에 올라가게 하는 방법입니다. (모르시는 분들을 위해) SFTP 익스텐션 설치하기 VS Code 익스텐션에서 sftp를 다운로드 받습니다. (여러 ftp 설치파일을 사용해봤지만 개인적으로 이게 편하더군요.) 프로젝트 생성 로컬 프로젝트 폴더를 여시고 설정파일을 생성해야합니다. 그후 설정에서 SFTP:Config를 선택합니다. (윈도우 : ctrl + shift + p 맥 : command + shift + p) 설정 화면이 보이면 아래와 같이 .. 2023. 5. 8.
[VS Code]gulp he following tasks did not complete: default 에러해결 gulp 실행시 he following tasks did not complete: default 에러메시지가 보인다면, 아래 소스를 gulpfile.js로 만든후 다시 실행해보세요. const gulp = require('gulp'); gulp.task('default',async function() { console.log('gulp start'); }); gulp 2023. 3. 4.
[VS Code]git 소스제어 삭제 (git repository) VS Code에서 git 폴더는 삭제를 했는데 소스제어에서 계속 남아있을경우 삭제 방법입니다. 폴더는 삭제를 했지만, .git에 기존에 만들어논 폴더가 남아있기 때문입니다. 먼저 터미널에서 아래 명령어를 입력하세요. (cd를 이용해서 삭제했던 폴더 위치로 이동해주세요.) git rev-parse --show-toplevel 그리고 ls -a 명령어로 .git를 찾습니다. .git 폴더가 보인다면 아래명령어로 삭제해주세요. rm -r -f .git 그럼 사라진걸 확인할수 있습니다. 2023. 3. 3.
[VS Code]vscode 창이 예기치 않게 종료되었습니다(원인: 'killed', 코드: '3') 해결방법 vs code(visual studio code)에서 익스텐션 삭제 혹은 다른 이유로 vs code가 실행되지 않을때 해결방법입니다.오류 메시지 "vscode 창이 예기치 않게 종료되었습니다(원인: 'killed', 코드: '3')" Mac 기준으로 설명을 드리자면, 터미널을 여시고 아래 명령어를 입력해주세요.open /Applications/Visual\ Studio\ Code.app -n그리고 vs code를 재실행하면 됩니다. 2023. 3. 3.
[VS Code]Visual Studio Code javascript 확장 익스텐션 code runner 설치 및 사용방법 Visual Studio Code에서 javascript 출력을 도와주는 code runner 확장 익스텐션 입니다. "code runner" 이라고 확장 익스텐션 검색창에 입력하시면 첫번째 나오는 확장프로그램입니다. 설치를 하시고, js 파일을 만드셔서 아래 문구를 작성해보세요. var a='hello world'; console.log(a); 그리고 단축키 + 마우스 우클릭으로 "code run"을 눌러 확인해보세요. 윈도우 : ctrl + alt + n 맥 : control + optiion + n 하단 출력부분에 출력이 됩니다. 크롬 개발자 도구로 하셔도 되지만, vs code로 바로 확인이 가능합니다. 2023. 2. 11.
[VS Code]비주얼코드 Live Server 확장팩 사용법 로컬에서 작업한 문서를 손쉽게 확인하려면 Live Server 확장팩을 설치해주시면 됩니다. 저장할때마다 새로고침을 할 필요성이 없습니다. html,css 작업물을 바로바로 확인한다고 보시면 됩니다. 먼저 확장 프로그램 설치하면 하단 우측에 Go Live 버튼이 생성됩니다. Go Live 버튼을 클릭하면 Port : 5500 으로 바뀝니다. 브라우저 주소창에 http://localhost:5500 으로 접속하시면 됩니다. 작업문서를 저장하면 새로고침을 안해도 실시간으로 변경되는 장점이 있습니다. 2023. 2. 5.
[VS Code]즐겨쓰는 웹프로그래밍 텍스트 편집 에디터 Visual Studio Code 웹퍼블리셔 일을 하면서, 다양한 프로그램을 사용했고, 현재도 여러 편집툴을 사용하고 있는데요. (깊숙히는 모릅니다. ㅎ) 예전에는 웹디자이너가 코딩까지 같이 했던 시절이 있었습니다. 웹표준이란 개념이 없어서 모두 레이아웃이 table로 제작할정도 였습니다. 그때는 화면을 보는게 편해서 드림위버를 사용했었습니다. 웹퍼블리셔로 일하면서 에디터플러스를 사용하다가, 맥은 에디터플러스가 없어서 서브라임텍스트를 현재도 사용하고는 있습니다만, 터미널을 연결해서 써야할 경우가 많고, 다양한 확장 프로그램이 있어서 업무용으로는 VS Code를 사용하고 있습니다. 드림위버, 에디터플러스, 서브라임텍스트, 브라켓, VS Code 을 사용하면서 어떤게 좋다 안좋다 보다 프로젝트 개발 환경에 맞는 에디터나, 본인이 사용하기에 .. 2023. 1. 17.