[코딩에디터] 비주얼스튜디오 코드(Visual Studio Code) 설치 , 확장 플러그인(Extension) 설치 방법

 

비주얼스튜디오 코드설치, 확장 플러그인설치 방법

 

 

https://visualstudio.microsoft.com/ko/

Visual Studio: 소프트웨어 개발자 및 Teams용 IDE 및 코드 편집기

 

 

비주얼스튜디오 코드설치

비주얼스튜디오 코드설치

 

1. "동의합니다(A)"를 선택

2. "다음(N) >"을 선택해 다음 단계로 이동후 "다음(N) >"을 누르고  "설치(I) "  마지막으로 "종료"

 

3. 설치완료 후 바탕화면 아이콘 실행

비주얼스튜디오 코드설치

 

 

# 확장 플러그인(Extension) 설치 방법

비주얼 스튜디오 코드 - 확장 프로그램 
visual studio code extension 

마켓플레이스 부분에 검색어 입력 

​1) Korean Language Pack for Visual Studio Code​ : 메뉴한국어

2) VS Color Picker​ : 코드에서 컬러선택가능

3) Auto Close Tag : 태그 마감태그 자동으로 변경

4) Auto Import :

5) Auto Rename Tag : 태그명변경시

6) HTML to CSS autocompletion : html 문서에서 생성한 클래스명 및 아이디명을 사용할 css에서 자동완성 기능가능

7) Live Server : 브라우저바로 보기

8) vscode-icons : 파일 확장자 아이콘 설정

9) Color Highlight : 컬러색

10) Code Runner : javascript 결괏값확인

12) colorize : 컬러 배경색 입혀서

 

13) Simple React Snippets

14) Markdown All in One

15) Peacock

16) Auto-Open Markdown Preview

17) VSCode Pets

18) Figma for VS Code

19) POWER MODE

20) Prettier

21 ) ESLint : JavaScript 코드에서 문제(에러코드) 찾기 및 수정을 해주는 분석 도구.

 

Material Icon Theme
Image Preview
Active File In StatusBar : 작업파일 경로 확인
CSS Variable Autocomplete
Path Intellisense
SCSS IntelliSense
Svg Preview
Code Spell Checker
Error lens

 

 

확장플러그인

 

 

 

 

Prettier

 

Format on Save  체크 , default farmatter

format on save

format

 

settings.json

 

"editor.formatOnSave": true,
"prettier.printWidth": 100,
"prettier.tabWidth": 4,
"prettier.useTabs": false,
"prettier.semi": true,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",

 

 

기본값

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

 

 

code runner

 

 

 

 

나중에 추가

 

EJS language support 설치

EJS language support

 

 

 

EJS Beautify 설치

 

 

"html.validate.scripts": false,
"emmet.includeLanguages": {
    "ejs": "html"
},
"[html]": {
    "editor.defaultFormatter": "j69.ejs-beautify"
},
"js-beautify.extra_liners": [],
"js-beautify.indent_inner_html": true,
"js-beautify.indent_handlebars ": false

 

 

 

 

 

[코딩폰트] 비주얼 스튜디오 코드 - D2coding

 

폰트설정

 

 

https://github.com/naver/d2codingfont

 

GitHub - naver/d2codingfont: D2 Coding 글꼴

 

 

1. 다운로드

d2coding

 

 

2. 설치

3. vscode 설정 

4. D2coding

 

d2coding

 

 

새 탭으로 열기

설정 -> enable preview 검색 

아래 이미지 참고 : 체크해제

 

vscode 새탭

 

 

 

 

https://nodejs.org/en

Node.js — Run JavaScript Everywhere