'IDE/VSCode' 카테고리의 글 목록

VSCode

💽 TypeScript 코딩하는데 유용한 VSCode 확장팩 추천

타입스크립트 확장팩 모음 이번 포스팅에서는 VSCode에서 Typescript를 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 아무래도 타입스크립트를 개발한 본고장(마이크로 소프트)이 밀어주는 에디터 이기 때문에, 왠만한 유료 IDE보다 훨씬 편하고 기능이 더 많다. 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. Code Runner + ts-node C/Java 와 같이 타입스크립트 파일을 바로 컴파일하여 실행 결과를 얻을수 있다. 따로 자바스크립트 변환(컴파일) 필요가 없어, 곧바로 타입스크..

인파_

2022.08.27

2

VSCode

💽 유용한 VSCode 단축키 모음 - 개발을 누구보다 빠르게

VSCode 유용한 단축키 모음 개발(코딩) 하는데 있어 적당히 타이핑하면 되지 굳이 단축키(shortcut)를 익혀야 하나 싶겠지만, 단축키를 아냐 모르냐 유무에 따라 개발 생산성 차이가 어마어마 해진다. 심지어 부트캠프 같은 학원에서도 강사들이 코딩열정과 더불어 강조하는것이 바로 에디터 단축키 활용이다. 또한 인프런 같은 코딩 인강 사이트에서도 따로 단축키 강좌가 있을 정도이다. 이처럼 코딩하는데 있어 에디터의 단축 기능들을 활용하는 것은 생각보다 굉장히 중요하다. 이번 시간에는 전세계에서 가장 인기있는 VSCode의 유용한 단축키 기능들을 모아 추려보는 학습을 해보자. 단축키 - Visual Studio Code tutorial 단축키 파일 > 기본 설정 > 바로가기 키 에서 현재 활성화된 키보드 ..

인파_

2022.07.19

16

VSCode

💽 VSCode Remote SSH 사용법 (+ AWS에 접속)

VSCode - Remote SSH 가상머신 혹은 외부 컴퓨터의 리눅스에 접속해서 파일이나 소스를 수정할 일이 있다고 하자. 보통이라면 putty 같은 ssh 툴로 접속해서 vim 에디터를 이용해서 수정할 것이다. ...하지만 불편하다. SSH 란 무엇인가? SSH란 Secure Shell의 약자로 원격 접속을 이용하여 터미널 환경을 사용할 수 있도록 고안된 인터넷 프로토콜이다. SHELL로 원격 접속을 하는 것이므로 기본적으로 CLI상에서 작업을 하게 되고, 기본 포트는 22번이다. 자주 사용되는 SSH접속 프로그램으로는 Xshell, PuTTY, MobaXterm 등이 있다. vim 에디터가 후졌다기 보다는 친숙하지않고, 친숙하지 않으니 1초만에 수정할거 5초 걸리고 그런다. 뿐만 아니라 인텔리센스가..

인파_

2022.07.15

3

VSCode

💽 SCSS 코딩하는데 유용한 VSCode 확장팩

SCSS 확장팩 모음 이번 포스팅에서는 VSCode에서 css 전처리기인 SCSS 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 또한 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. Live Sass Compiler 원래라면 노드 터미널에서 커맨드를 통해 scss를 css로 컴파일 해주지만, 이 익스텐션을 사용하면 저장만 하면 알아서 css파일로 컴파일 해준다. Live Sass Compiler - Visual Studio Marketplace Extension for Visual Studio C..

인파_

2022.07.15

1

VSCode

💽 개발하는데 유용한 VSCode 확장팩 - 유료 IDE 못지않게 ❗

편리하게 개발할 수 있는 확장팩 VSCode는 전세계에서 가장 많이 사용하는 코딩 에디터이다. 그 자체로 가벼워서 많은 사람들이 이용하지만, 이 또한 가벼운 에디터이기 때문에 같은 회사 제품인 Visual Studio에 비해 코딩하는데 있어 편리한 부가 기능들이 기본적으로 빠져 있다. 그럼에도 불구하고 부동의 1위를 지키고 있는 이유는 정말 많은 유저들이 부족한 부분을 매꾸기 위해 확장팩(Extenstion)을 개발하고 무료로 배포함으로서, 개발자들은 이 익스텐션은 입맛대로 설치해 나만의 개발환경을 구성할 수 있다는 점이다. 이번 포스팅에서는 VSCode에서 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결..

인파_

2022.06.19

10

VSCode

💽 Node / JavaScript 코딩하는데 유용한 VSCode 확장팩

자바스크립트 확장팩 모음 이번 포스팅에서는 VSCode에서 자바스크립트 / 노드 프로젝트를 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 또한 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. JavaScript (ES6) code snippets 짧은 문장으로 자주 사용하는 메소드 구성 코드를 사용할수있다. JavaScript (ES6) code snippets - Visual Studio Marketplace Extension for Visual Studio Code - Code snippets..

인파_

2022.06.19

2

VSCode

💽 PHP 코딩하는데 유용한 VSCode 확장팩

PHP 코딩에 도움되는 확장팩 이번 포스팅은, php를 코딩하는데 있어 편리하게 사용할수 있는 vscode 익스텐션을 추천 해보려고 한다. 다음 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워 여러분께도 소개하는 것이다. 만일, 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. PHP Formatter - PHP코드 정렬 Format HTML in PHP - PHP에서 HTML코드 정렬 PHP Intelephense - 문서, 작업 영역, 기본 제공 생성자, 메서드 및 함수에 대한 자세한 서명 도움 - 오류 허용 구문 분석기를 통해 열린 파일에 대한 여러 구문 분석 오류 진단 PHP IntelliSense php 코딩하는데 있어 코드 자동 완..

인파_

2022.06.19

(0)

VSCode

💽 HTML / CSS 코딩하는데 유용한 VSCode 확장팩

이번 포스팅에서는 VSCode에서 HTML과 CSS를 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 또한 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. 도움되는 HTML 코딩 확장팩 HTML CSS Support html 요소의 class에서 css 선택자 요소를 쓸때 자동 완성 기능을 지원해주는 익스텐션이다. 부트스트랩 같은 거대한 css 프레임워크를 사용할때 매우매우 유용하다. 아주 빠르게 클래스 속성 코딩이 가능하다. HTML CSS Support - Visual Studio Marketp..

인파_

2022.06.18

8

VSCode

💽 console.log 개선 VSCode 확장팩 모음

Dot Log console.log 스니펫이다. 단순히 console.log 문장을 자동시키는게 아니라, 변수 + .log를 통해 console.log에 변수 매핑까지 해주는 강력한 도구이다. Dot Log - Visual Studio Marketplace Extension for Visual Studio Code - Make it easy to console.log info marketplace.visualstudio.com xxx.log => console.log('xxx', xxx) xxx.clg => console.log('xxx', xxx ) xxx.cwa => console.warn('xxx', xxx) xxx.cer => console.error('xxx', xxx) 'xxxx'.log =>..

인파_

2022.06.18

1

VSCode

💽 GIT 관리하는데 유용한 VSCode 확장팩

GIT 익스텐션 이번 포스팅은, VSCode에서 GIT을 사용하는데 있어 편리하고 더 강력하게 사용할수 있는 vscode 익스텐션을 추천 해보려고 한다. 다음 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워 여러분께도 소개하는 것이다. 만일, 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다. GitLens 레포지토리 내부 파일을 수정할 때 왠만한 내용은 다 오버레이로 보여주게 해주는 익스텐션이다. 코드 작성자를 시각화하고 Git 저장소를 완벽하게 탐색하고 강력한 비교 명령을 지원한다. 사실상 VSCode 내에서 GIT 버젼 관리와 코딩을 동시에 수행하는데 가능하게 하는 최강의 익스텐션이다. GitLens — Git supercharged - ..

인파_

2022.05.16

1

VSCode

[VS Code] 💽 project tree - 파일 트리 구조 자동 생성

project-tree 프로젝트를 진행하다보면, 즐비한 디렉토리의 파일과 폴더들을 정리하고 싶을 때가 있다. 보통 readme.md에 마크다운으로 파일트리를 타이핑하지만, vscode에 자동완성 익스텐션이 있어 소개해 본다. project-tree - Visual Studio Marketplace Extension for Visual Studio Code - A vscode plugin that generates a tree directory in README.md. marketplace.visualstudio.com 위의 링크의 익스텐션을 설치하고 ctrl + shift + p 를 눌러 커맨드 창을 띄운다. 그리고 project Tree 를 검색하여 실행한다. 그럼 Reade.md파일이 자동으로 생성되..

인파_

2022.01.25

9

VSCode

[VScode] 💽 터미널 clear 안되는 현상 해결

윈도우 cmd에서는 cls 명령어를 치거나, ctrl + l 을 하면 자동으로 터미널이 초기화 된다. 하지만 vscode의 cmd에서는 clear을 해도 커서가 위쪽으로 올라가있지, 스크롤을 올려보면 그 전의 내용들이 그대로 남아있음을 알 수 있다. 따라서, 스크롤을 위로 올려도 보여지는 데이터가 없도록 터미널 화면 모든 내용을 깨끗하게 초기화하는 법을 알아보자. 전역 명령 사용 F1 이나 ctrl + shift + p 를 눌러 명령줄을 띄우고 terminal clear을 쳐서 명령을 실행하면 된다. 단축키 지정 옆 사이드바의 톱니바퀴 아이콘을 누르고 바로 가기 키를 누른다. 그러면, 단축키 지정 메뉴가 나오는데, 검색창에 workbench.action.terminal.clear 를 검색한다. termi..

인파_

2022.01.19

(0)

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

You Can Become A

Progr

VSCode

💽 TypeScript 코딩하는데 유용한 VSCode 확장팩 추천

인파_

💽 유용한 VSCode 단축키 모음 - 개발을 누구보다 빠르게

인파_

💽 VSCode Remote SSH 사용법 (+ AWS에 접속)

인파_

💽 SCSS 코딩하는데 유용한 VSCode 확장팩

인파_

💽 개발하는데 유용한 VSCode 확장팩 - 유료 IDE 못지않게 ❗

인파_

💽 Node / JavaScript 코딩하는데 유용한 VSCode 확장팩

인파_

💽 PHP 코딩하는데 유용한 VSCode 확장팩

인파_

💽 HTML / CSS 코딩하는데 유용한 VSCode 확장팩

인파_

💽 console.log 개선 VSCode 확장팩 모음

인파_

💽 GIT 관리하는데 유용한 VSCode 확장팩

인파_

[VS Code] 💽 project tree - 파일 트리 구조 자동 생성

인파_

[VScode] 💽 터미널 clear 안되는 현상 해결

인파_

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역