git · node.js · vscode 설치하기

git은 프로젝트의 버전관리를 위해 사용되고 있으며 페키지관리 및 테스트상황에서 node.js를 필수적으로 사용하고 있다. 

vscode는 MS에서 무료로 배포되는 ide툴로 다양한 extension을 사용하여 프론트앤드 및 node와 같은 백앤드 개발에 매우 넓게 사용하고 있다.

 

git 설치하기

https://git-scm.com/downloads

standalone 64비트 를 선택하여 다운로드

깃 디폴트로 다음을 계속 진행해서 인스톨

맨 마직막에 Launch Git Gash   하고 Finish 하거나

찾기 창에서 git bash를 입력하면

 

아래와 같이 사용자 정보 등록을 한다.

git config --global user.name "이름" 
git config --global user.email "이메일"

 

 

node.js 설치하기

https://nodejs.org/en/

왼쪽 마이너버전을 선택하여 다운로드 하고 디폴트 설정으로 진행한다.

다음과 같이 node와 npm버전을 확인할 수 있다.

 

Visual Studio Code 설치하기

https://code.visualstudio.com/.

다운로드 후 설치 진행

 

주요 Extension설치

익스텐젼 설치를 위해  vsc우측하단 아이콘을 선택한 뒤 검색창에 찾고자 하는 확장팩을 찾아서 설치한다.

 

GitLens : GIT 버젼 관리와 코딩을 동시에 수행하는데 가능하게 하는 최강의 익스텐션이다.

Auto Rename Tag : Auto rename paired HTML/XML tag

Auto Close Tag : Automatically add HTML/XML close tag, same as Visual Studio IDE

To add close tag manually, use shortcut Alt+. (Command+Alt+. for Mac), or press F1 and then select/type Close Tag

Auto Import : Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX

htmltagwrap : 감싸고자 하는 블록에 놓고 alt + w

 

Highlight Matching Tag : 태그의 시작과 끝을 표시

Html Auto Completion : !html , !table , !form 치고 엔터

CSS Navigation : 클래스명에 마우스 커서를 갖다대고 F12를 누르거나 ctrl + 클릭하면  해당 선택자로 이동

 

px to rem & rpx & vw (cssrem) : px -> rem (Shortcut key: Alt + z) , rem -> px (Shortcut key: Alt + z)

JavaScript (ES6) code snippets

Javascript Auto Backticks : 일반 문자열(' ")에서 ${} 를 감지하면 자동으로 백틱(`) 으로 변경

es6-string-html : html 태그를 문자열로 받아 사용해야될때 어 역따옴표 앞에 /*html*/ 을 붙이면 색깔이 입히지게 한다.

JS Quick Console : console.log()를 일일히 치지 않고 변수를 드래그하고 Ctrl+Shift+L 를 누르면 자동 생성 

npm Intellisense : 코드 작성 중 설치된 module 자동완성 기능 제공

Project Manager : 폴더를 프로젝트로 저장, 자동 git, svn repos검출 

Live Server : ​ctrl + shift + p 를 눌러 커맨드창을 열고 liver server: open with live server 를 클릭하면 실행된다.
혹은 vscode하단에 Go Live를 누르고 localhost:5500으로 접속하면 된다.

Tabnine AI : 코드 자동완성 기능을 딥러닝 AI가 조정해준다. 무료는 다만 하루에 제한량이 있다.

Code Runner : IDE처럼 자바, C, 파이썬 등 다양한 언어를 컴파일 실행하도록 지원

• To select language to run, use shortcut Ctrl+Alt+J, or press F1 and then select/type Run By Language, then type or select the language to run: e.g php, javascript, bat, shellscript...

• To run custom command, then use shortcut Ctr

Surround : 코드를 선택하고 ctrl + shift + T 를 누르고 제어문을 선택하면 자동완성 된다.

Demo 1: Choosing a wrapper snippet from quick pick menu

Demo 2: Wrapping multi selections

 

Inline SQL Syntax : 인라인으로 sql문을 작성할때 하이라이트 색깔을 넣어준다.

Highlight and lint inline SQL strings. Supported languages are Python, Go, JavaScript, TypeScript, Ruby, Java, C#, Rust, PHP, Lua.

Syntax highlighting works for strings starting with --sql or any of the SELECT, INSERT, INTO, DELETE, UPDATE, CREATE TABLE.

Also works with ES6 Template Strings:

const query = sql`
select * from book;
`;

Thunder Client : Postman을 대신하여 VSCode에서 바로 API테스트

 

Material Theme : Ctrl + Shift + P

Material Icon Theme : 파일 확장자에 따른 여러 아이콘을 보여줌

 

리액트 설치

react 관련 dependency library 설치를 위해  커맨드창이나 vs코드 터미널창을 열어서 다음과 같이 명령어 엔터

-g 옵션은 global로 전체 개발환경에 공통적용

npm install -g create-react-app

 

 

[참고]

https://inpa.tistory.com/entry/VS-Code-%E2%8F%B1%EF%B8%8F-HTML-CSS-%EB%8F%84%EA%B5%AC-%EC%B6%94%EC%B2%9C

[VSCode] 💽 HTML / CSS 코딩하는데 유용한 확장팩 💯 추천

 

https://parkjh7764.tistory.com/93

비주얼 스튜디오 코드 익스텐션 28개 추천 / 확장 프로그램 설치 및 웹 개발 환경 설정 (Visual Studio