에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 11. 10. 17:01

비주얼 스튜디오 코드(vs code) 가 업데이트 했네요.1.18버전 이 버전에서 업데이트 한 내용은 이젠 정말 서브라임에서 이사를 가도 될 정도로 훌륭했습니다.https://code.visualstudio.com/updates/v1_18 여러가지 업데이트가 이루어 졌지만 가장 가슴을 뛰게하는건 바로 이 기능이 아닐까 합니다.(GIF 이미지가 깨져보일 수 있습니다. 클릭해서 봐주세요.) 왜 이게 글케 좋은거냐면 기존에 비주얼 스튜디오 코드는 작업 폴더를 하나만 등록해서 작업할 수 있었습니다.서브라임 처럼 여러개의 폴더를 열어서 작업이 불가능 했죠.이건 정말 좋은 패치인거 같습니다. 이번 업데이트 중 가장 맘에 드네요!

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 22. 14:03

에디트 플러스, 서브라임 텍스트 처럼 작업 폴더를 vscode 에서도 추가 하고 싶을 때가 있습니다.그래서 스택오버 플로우로 검색해 봤더니 답변이 있네요.https://stackoverflow.com/questions/30234146/open-multiple-folders-in-visual-studio-code 답변 에서 이런 부분이 있습니다.Simply put, the folder you open is the root you work with. But of course there is nothing from stopping you to open multiple windows.여러개의 창을 여는건 괜찮은데 니가 작업하고 있는건 그건 루트임. 그냥 써야해.이러는거 같아요. 넵 아무튼 그런거 안됩니다 ㅠ

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 22. 13:45

비주얼 스튜디오 코드(vscode) 의 폰트 변경 방법 입니다.상단 메뉴중 파일 -> 기본설정 -> 설정 으로 들어갑니다. 그러면 다음과 비슷한 창이 뜨는데요.상단 중앙쯤에 검색창이 있습니다. 거기서 font 라고 검색해 보시면 폰트 옵션이 나옵니다.그 중 "editor.fontFamily" 부분을 복사해서 우측에 붙혀넣습니다. 그리고 스샷에서 처럼 원하시는 폰트를 지정하시면 됩니다.

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 22. 13:36

비주얼 스튜디오 코드 테마를 변경할 수 있습니다.상단 파일 -> 기본설정 -> 색 테마 를 선택 그러면 이런 창이 뜹니다.단축키는 컨트롤 + K 를 누르고 컨트롤 + T 를 다시한번 눌러주시면 뜹니다.원하는 테마로 변경하시거나 맨아래 에서 원하는 테마를 다운받아 사용할 수 있습니다.

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 22. 13:04

vscode 도 live. server 기능을 사용할 수 있습니다.동일한 기능을 하는 다른 에디터의 패키지아톰 : http://recoveryman.tistory.com/302브라켓 : http://recoveryman.tistory.com/139웹스톰 : http://recoveryman.tistory.com/359 live server 패키지는 에디터 에서 저장을 하는 즉시 브라우저에 반영이 됩니다아래 GIF 처럼 사용합니다. 설치 : 컨트롤 + 쉬프트 + X -> 좌측 상단 검색창에 live server 검색 Live Server 설치 클릭 설치가 되었으면 버튼이 '다시 로드' 로 바뀜니다. 다시 로드를 클릭해 줍니다. 창을 다시 로드하겠냐고 뜨는데 해줍니다. 그래야 제대로 적용이 됩니다. 단축키는..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 11. 16:18

비주얼 스튜디오 코드 에서도 이런 병맛 확장 기능이 있었네요. ㅋㅋ 파워 모드 덕분에 제 블로그가 알려지게 된 계기가 있었습니다. 동일한 기능을 하는 다른 에디터의 패키지 아톰 : http://recoveryman.tistory.com/244 개발자라면 역시 파워 코딩이죠 ㅋㅋ 그 파워 코딩 비주얼 스튜디오 코드 에서도 할 수 있습니다. GIF 이미지가 깨져보이는 경우 : https://goo.gl/rxv9ZL 패키지를 설치하기 위해 상단 메뉴의 보기 -> 확장 을 클릭하시거나, 단축키 컨트롤 + 쉬프트 + X 를 눌러 줍니다. 좌측 상단 검색하는 부분에 power mode 를 검색후 맨 위에 나오는 패키지를 설치 합니다. 설치가 완료되면 다시 로드 버튼을 눌러 에디터를 재실행 시켜 줍니다. 창 다시 로..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 11. 15:27

비주얼 스튜디오 코드는 긴 장문의 문단 또는 코드일 경우 자동으로 줄바꿈이 되지 않고 결국엔 가려져서 나오게 됩니다.이런 경우 간단한 설정을 통해 보기 편하게 바꿔줄 수 있습니다. /* S: 180103 수정 */ 우전 에디터 한글 설정이 되어 있다는 전제 하에 진행하겠습니다.에디터 한글 설정: http://recoveryman.tistory.com/464 에디터 좌측 상단의 파일 -> 기본설정 -> 설정 을 누릅니다.단축키: 컨트롤 + 쉼표 그후 나오는 셋팅 에서 wordWrap 를 입력 후 줄 바꿈 여부를 on 으로 바꿔 줍니다.이것으로 줄바꿈 설정이 완료 되었습니다. 혹시 옛날 json 스타일이 편하시다고 생각 되시면 셋팅 창이 뜨는것 까지 동일하게 진행하시되 우측 상단에 { } 표시가 있습니다. ..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 11. 14:37

비주얼 스튜디오 코드 에서 스니펫 사용하는 방법 입니다.동일한 기능을 하는 다른 에디터의 패키지서브라임 텍스트 : http://recoveryman.tistory.com/39아톰 : http://recoveryman.tistory.com/237브라켓 : http://recoveryman.tistory.com/142 비주얼 스튜디오 코드 는 emmet (zencoding) 같은 패키지는 따로 설치 안하셔도 됩니다.이미 기본 내장되어 설치되어 있습니다.emmet 의 단축키는 Tab 키 또는 컨트롤 + 스페이스바 둘 중 원하시는거 선택하셔서 쓰시면 됩니다. 그냥 이런 겁니다.키워드를 입력하면 내가 저장했던 코드 양식이 자동완성 됩니다. 설치법은 이전에 view in browser 설치 했던 것과 같습니다.상단..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 11. 11:58

비주얼 스튜디오 코드는 다른 IDE 나 에디터 처럼 단축키 한번에 작업중인 웹사이트를 볼 수 있습니다. 이 기능을 하는 확장 기능의 이름은 '뷰 인 브라우저(View in Browser)'입니다. 동일한 기능을 하는 다른 에디터의 패키지 서브라임 텍스트 : http://recoveryman.tistory.com/8 아톰 : http://recoveryman.tistory.com/239 확장 기능 설치도 굉장히 쉬운편입니다. 이 화면은 비주얼 스튜디오 코드 설치 후 나온 화면입니다. 여기서 상단 보기 -> 확장 을 클릭해 주시거나 단축키 컨트롤 + 쉬프트 + X 를 눌러봅니다. 그럼 좌측에 마켓플레이스 리스트가 나옵니다. 상단에 확장 기능을 검색할 수 있습니다. view in browser 을 검색해 봅니..

에디터/비주얼 스튜디오 코드(Visual Studio Code)2017. 9. 11. 11:26

Vue js를 공부하려 하는데많이 쓰이는 에디터로 이 비주얼 스튜디오 코드를 추천하는거 같습니다.이 에디터는 Vue js 전용이 아닙니다. 퍼블리셔, 프론트엔드개발자 모두 사용할 수 있으며, 본인 입맞에 맞게 확장 기능을 늘려 주시면 됩니다.이 에디터는 '무료' 이며 또 한글 메뉴라서 에디트 플러스 등을 사용해 보신 분이라면 익숙하게 사용할 수 있을듯 합니다.저는 간단한 사용법과 추천 패키지 등을 소개해 드릴려고 합니다. 설치 URL : https://code.visualstudio.com/어려운거 없이 그냥 구글 에서 비주얼 스튜디오 코드 를 검색하시거나위의 URL 을 누르면 비주얼 스튜디오 코드 홈페이지가 뜹니다.(비주얼 스튜디오 와 비주얼 스튜디오 코드는 다릅니다.) 맥 이라면 아마 Download..