본문 바로가기
  • 커뮤니티
  • 블로그
  • 북마크

vscode8

[VS Code]비주얼 스튜디오 익스텐션 sftp, ftp를 이용해서 바로 업로드해 보자 에디트플러스를 사용했을땐 저장하면 바로바로 서버에 업로드되서 편하게 코딩했던거 같습니다. VS Code를 사용하면서도 동일하게 가능합니다. 경로 혹은 설정을 잘못해서 저장 후 파일을 하나씩 올리고 있었다면, 아래방법데로 해보세요. 로컬에서 파일을 저장하면 바로 서버에 올라가게 하는 방법입니다. (모르시는 분들을 위해) SFTP 익스텐션 설치하기 VS Code 익스텐션에서 sftp를 다운로드 받습니다. (여러 ftp 설치파일을 사용해봤지만 개인적으로 이게 편하더군요.) 프로젝트 생성 로컬 프로젝트 폴더를 여시고 설정파일을 생성해야합니다. 그후 설정에서 SFTP:Config를 선택합니다. (윈도우 : ctrl + shift + p 맥 : command + shift + p) 설정 화면이 보이면 아래와 같이 .. 2023. 5. 8.
[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.
[Vue.js]Vs Code Vue.js 필수 확장 프로그램 vue로 개발할때 Vs Code에 필수 적으로 설치해야하는 프로그램입니다. 여기에서 필수는 vue로 코딩을 손쉽게 도와준다고 보시면 됩니다. 1. Vuter vue 코딩시 코드 하이라이팅 지원, 문법 강조, 코드 자동 완성, 디버깅 등 지원 2. HTML CSS Support 여러 기능들이 있지만, 태그를 자동으로 닫아준다던지 자동완성 형태로 코드를 찾아줍니다. 3. Vue 3 Snippets 스니펫을 이용하여 코드 자동 완성 4. ESLint 코드 작성시 문법 오류 및 버그 확인 참고로 vetur은 vue2때 사용했으며, vue3을 사용할경우 호환성 문제로 오류가 발생할 수 있다고 합니다. vue3을 사용하신다면 Vue Language Features (Volar)를 사용하시면 됩니다. 2023. 1. 22.
[SASS]vscode Live Sass Compiler 컴파일 안될때 설정 vscode에서 sass를 쉽고 간편하게 컴파일 해주는 Live Sass Compiler 확장프로그램이 있습니다. node.js와 sass를 이상없이 설치했는데, vscode에서 Live Sass Compiler로 컴파일이 안됐을때는 settings.json 파일을 확인해보셔야합니다. 참고로 node-sass 버전은 아래와 같습니다. node-sass 8.0.0 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++] 먼저 Live Sass Compiler 실행을 했는지 살펴보세요. 실행 방법은 vscode 하단에 Watch Sass로 되어있는걸, 클릭하면 Watching...로 변경됩니다. 출력창을 보시면 Watching... 으로 메시지가 보입니다... 2023. 1. 21.
[VS Code]즐겨쓰는 웹프로그래밍 텍스트 편집 에디터 Visual Studio Code 웹퍼블리셔 일을 하면서, 다양한 프로그램을 사용했고, 현재도 여러 편집툴을 사용하고 있는데요. (깊숙히는 모릅니다. ㅎ) 예전에는 웹디자이너가 코딩까지 같이 했던 시절이 있었습니다. 웹표준이란 개념이 없어서 모두 레이아웃이 table로 제작할정도 였습니다. 그때는 화면을 보는게 편해서 드림위버를 사용했었습니다. 웹퍼블리셔로 일하면서 에디터플러스를 사용하다가, 맥은 에디터플러스가 없어서 서브라임텍스트를 현재도 사용하고는 있습니다만, 터미널을 연결해서 써야할 경우가 많고, 다양한 확장 프로그램이 있어서 업무용으로는 VS Code를 사용하고 있습니다. 드림위버, 에디터플러스, 서브라임텍스트, 브라켓, VS Code 을 사용하면서 어떤게 좋다 안좋다 보다 프로젝트 개발 환경에 맞는 에디터나, 본인이 사용하기에 .. 2023. 1. 17.
반응형

티스토리툴바