vs코드 기본 세팅

=========익스텐션 설치==========

Sass

 SCSS(Sass) : css에서 반복되는 내용을 줄이고 보다 효율적으로 css를 관리하기 위해 나온 스크립트 언어

Live Sass Compiler

 CSS를 실시간으로 Sass로 컴파일 해주는 익스텐션

Mithril Emmet 

 html에서 반복 타이핑을 줄일 수 있는 여러 기능을 제공하는 익스텐션

live server

 html의 변경된 부분을 실시간으로 미리볼 수 있도록 지원해주는 익스텐션

Auto Rename Tag

태그 이름 자동으로 수정해주는 익스텐

indent-rainbow

 들여쓰기 수준에 따라 들여쓰기에 무지개 색을 입혀주는 익스텐션

px to rem & rpx & vw (cssrem)

 px과 rem 단위를 교차로 보여주는 익스텐션

Prettier

자동으로 줄맞춤

Lipsum Generator

텍스트 더미 익스텐션

react (ES7 + React/Redux/React...)

리액트 snippets (축약형) 익스텐션

 -rafce (react 기본세팅)

 -clg : console.log(object)

CSS Peek

 class를 ctrl+click하면 해당 css 부분을 보여줌

Material Icon Theme

파일들을 아이콘으로 적용하여 보여줌

Tailwind CSS IntelliSense

테일윈드 관련 코드들을 미리 보여줌

 

=========JSON설정==========

설정 > 설정 열기(JSON) > 아래 내용 입력

{

  "editor.mouseWheelZoom": true, //ctrl+휠로 확대/축소 설정

  "emmet.variables": {

    "lang": "ko" //html 기본언어 한글로 설정

  },

  "explorer.confirmDelete": false, //삭제할 때 물어보기 비활성화

  "workbench.editor.enablePreview": false, //무조건 새탭열기

  // ----- Sass 설정 -----

  "liveSassCompile.settings.formats": [

    {

      "format": "expanded",

      "extensionName": ".css",

      "savePath": null

      // .css파일 생성

    }

  ],

  "liveSassCompile.settings.generateMap": false,

  // .map파일 생성하지 않기

  "editor.fontFamily": "'D2Coding',Consolas, 'Courier New', monospace",

  // 글꼴 수정

  "terminal.integrated.defaultProfile.windows": "Command Prompt",

  //터미널 기본 설정 : cmd로 설정

  "workbench.iconTheme": "material-icon-theme",

  // 아이콘 테마 : material-icon테마로 변경

  //------prttier 설정-----

  "editor.formatOnSave": true,

  "editor.showUnused": true,

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.tabSize": 2,

  "editor.minimap.enabled": false,

  "javascript.updateImportsOnFileMove.enabled": "always",

  "editor.detectIndentation": false,

  "security.workspace.trust.untrustedFiles": "open",

  "prettier.trailingComma": "all",

  "prettier.useTabs": true

}

 

=========글꼴 설정==========

구글 > 'd2coding' 검색 > ver 1.3.2 다운로드 > D2Coding-Ver1.3.2-20180524.zip 다운 > D2CodingAll 설치
톱니바퀴(manage) > 설정 > 텍스트 편집기 > 글꼴 > FontFamily에 'D2Coding'추가

https://github.com/naver/d2codingfont/releases/tag/VER1.3.2

 

=========노드 설치(자바스크립트)==========

 1)node설치
https://nodejs.org/ko/ > 16.17.0 LTS 다운로드 > 기본 설치

 

 2)nodemon 설치

vs코드 재시작(필수!!!)

vscode > 터미널 > 새터미널 클릭 후 터미널 입력창에

npm install nodemon -g 입력(-g:전체 적용)

 

 3)버전 확인법

터미널 또는 cmd(Command Prompt)에서 아래 내용 입력

node -v

node --version

 

 4)파일 실시간 확인하는법 (nodemon)
터미널에 > nodemon '일부 파일명' 입력 후 tab하여 파일명 자동완성 + enter

*안되는 경우 command prompt 등으로 변환하여 확인

*nodemon 죵료하는 법 : Ctrl + C

 

=========yarn 설치(리액트)==========

-----yarn 설치-----
npm install -g yarn

 

-----yarn 버전 확인하는법 -----

yarn -v

-----react 기본파일 생성----
원하는 폴더에 가서 터미널 연 후 아래 내용 입력
yarn create react-app 원하는폴더명

 

----서버(브라우저) 여는법---
npm start / yarn start

 

----라이브러리 설치----

npm install / yarn add

 

테일윈드

npm install -D tailwindcss

uuid

npm install uuid

react-icons

npm install react-icons --save

react-bootstrap

npm install react-bootstrap bootstrap

react-spinners

yarn add react-spinners   //  npm install react-spinners --save

lite-server

npm install lite-server --save-dev  //  yarn add lite-server --dev

react-router

npm install react-router-dom // yarn add react-router-dom

sass

yarn add sass

json-server(가상 서버)

npm install -g json-server (설치가 안될때는 npx)

 

axios

$ npm install axios

 

 

=========git 설치==========

git 다운로드, 설치

https://git-scm.com/download/win

>standalone installer > 64-bit Git for Windows Setup 클릭
 -중간에 visualcode 기본값으로 설정