Tools/VSCode7 프론트엔드 개발 시 유용한 VS Code Extensions 5가지 이 블로그에서 Visual Studio Code를 소개한 것이 불과 2년 전이었는데 어느덧 대세 Editor가 되었네요. VS Code는 여러가지 장점이 있지만, 다양한 Extensions을 통해 내 입맛에 맞게 커스터마이징을 할 수 있다는 점도 큰 장점이죠. 오늘 포스팅에서는 제가 프론트엔드 개발할 때 잘 쓰고 있고 추천할 만 한 VS Code Extensions 5가지를 한 번 정리해봤습니다. 1. Javascript (ES6) Code Snippets 유명한 프로그래밍 격언으로 바퀴를 다시 발명하지 말라는 말이 있죠. 개인적으로 "그냥 가져다 쓰자"라는 말을 그다지 좋아하지는 않지만, 이 Javascript Code Snippets 확장을 쓰면 확실히 생산성이 늘어나는데요. ES6 문법을 지원하며,.. 2019. 10. 25. 생산성을 높여주는 VSCode 단축키 및 팁 정리 VSCode는 이제 거의 대세가 된 에디터죠. 많은 분들이 이미 각자의 입맛에 맞게 VSCode를 커스터마이징해서 사용하시고 계실텐데요. 이 포스트서에는 제가 VSCode를 사용하면서 생산성을 높여주는 몇가지 단축키와 VSCode 팁을 정리해봤습니다. 1. Show All Commands (Ctrl + Shift + P) VSCode에서 사용할 수 있는 모든 명령어를 입력할 수 있습니다. 가장 기초 중의 기초라고 할 수 있죠. 2. Keymaps Extensions 설치 VSCode에서는 keymaps Extension을 설치하여 본인이 기존에 사용하던 편집기의 단축키를 그대로 사용하거나 커스터마이징 할 수 있습니다. 3. Process Explorer VSCode를 사용하다보면 가끔 느려질 때가 있습니.. 2019. 7. 16. VS Code에 Git 세팅 및 사용방법 정리 이전 Git 설치 방법 간단정리 (Windows, Mac) Git 초기 세팅 및 사용법 정리 포스팅에 이어 이번에는 Windows VS Code 에서 Git 세팅하는 방법에 대해 정리해보도록 하겠습니다. ** 반응형 광고 ** 1. git init open folder 으로 프로젝트 폴더를 엽니다. 좌측 사이드에 있는 Git 메뉴버튼을 클릭하면 initialize 라는 버튼이 나옵니다. 이 버튼을 누르면 해당 폴더에 git init 이라는 명령을 수행하게 되고 다다음 이미지와 같이 unstaged 된 파일 목록이 나옵니다. 2. git add unstaged 되어 있는 파일을 선택하고 우클릭 후 stage 를 누르면 git add 가 실행됩니다. 이 때 부터 해당 파일들의 git 버전 관리가 시작됩니다... 2017. 3. 7. VS Code 에서 xDebug를 통해 PHP 디버깅하는 방법 지난 번 PHP 디버깅 방법 정리에서 언급했던 xdebug를 통해 PHP 디버깅 하는 방법을 소개해 드리도록 하겠습니다. 저는 IDE 툴을 VS Code 를 사용하고 있기 때문에 VS Code를 기반으로 설명을 드리도록 하겠습니다. 참고로 VS Code는 가볍고 다양하고 편리한 Extension 이 많아 추천드리는 IDE 입니다. (VS Code 설치하기 참조) 1. Extension 설치 우선 기본적으로 VS Code 에 다음과 같은 Extension 이 설치되어 있어야 합니다. 이 중 Debugging 을 위한 핵심적인 Extension 은 PHP Debug 라는 Extenstion 입니다. 2. PHP Debug 세팅 위에서 소개해드린 PHP 관련 Extension 을 다 설치하고 PHP Debug.. 2017. 2. 5. Front-End 개발 시 유용한 VS Code 플러그인 소개 지난번 VS Code 설치 및 VS Code 기본 세팅 포스팅에 이어서 이번 포스팅에서는 VS Code 플러그인, 즉 VS Code Extension의 설치 방법과 프론트앤드 개발 시 유용한 Extension 이 어떤 것들이 있는지 알아보도록 하겠습니다. Extension 설치방법 VS Code에서 Extension 설치를 하려면 좌측 사이드바에서 Extension 버튼을 누릅니다. 그리고 검색창에 본인이 원하는 익스텐션(플러그인)을 검색하거나 우측 상단의 메뉴 아이콘을 클릭하여 현재 설치되어 있는 익스텐션을 확인할 수 있습니다. ** 반응형 광고 ** Front-End 개발 시 유용한 Extension #1 HTML CSS Class Completion CSS class가 많을 때 유용한 익스텐션으로 .. 2017. 1. 26. VS Code 기본 세팅 지난번 VS Code 설치방법 포스팅에 이어서 이번에는 VS Code 기본 세팅 방법에 대해서 알아보도록 하겠습니다. 우선, 가장 기본적인 단축키 Ctrl + P 를 누르시면 파일 find 및 Command 를 입력할 수 있는 창이 생깁니다. (바로 Command를 입력하고 싶다면 F1을 누르면 됩니다.) 1. 언어 세팅우선 IDE 툴에서 사용하고자 하는 언어를 세팅합니다. VS Code 사이트에서 툴을 다운로드 받으면 디폴트로 본인 브라우저의 Locale 정보를 이용하여 언어가 세팅되어 집니다. 혹시 이 언어를 바꾸고 싶다면, Ctrl + P 를 누른 다음 >Configure Language 에서 원하는 언어로 바꾸면 됩니다. 2. theme 세팅VS Code 를 원하는 테마로 변경할 수 있습니다. F.. 2017. 1. 26. VS Code 소개 및 설치방법 한국에서 개발 할 때는 거의 이클립스와 Visual Studio만 사용하다가 본격적으로 Front-End 개발을 할 때는 Sublime Text 를 주로 사용하였습니다. 그러다가 이번에 VS Code로 갈아 타게 되었는데 전반적으로 가볍고 Front-End 개발에 최적화되어 있는 것 같아서 설치 및 사용법을 소개하려고 합니다. 아직 VS Code에 대한 많은 자료나 경험이 없어서 주로 VS Code 사이트에 있는 내용을 익히고 정리한 내용을 포스팅하려고 합니다. 1. VS Code 란? (Visual Studio Code)MS에서 제공하는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension 을 이용한 확장 기능을 제공하고 있습니다. ** 반.. 2017. 1. 26. 이전 1 다음
