[VS code] 유용한 확장팩 (HTML & CSS & JS & React)

1. Prettier - Code formatter

코드를 자동으로 정렬해준다.

설치 후 내 스타일로 세팅을 좀 맞추고 싶다면 File->Preferences->Extension(단축키 ctrl+,)->Prettier 에서 바꿀 수 있다.

 혹은 우측 상단에 있는 저 아이콘(settings.json)을 클릭하여 변경 가능하다.

 

• ctrl+, 로 설정에 들어가서 상단에 formatter 검색 후 없음(null)을 Prettier 로 바꿈.
• editor format을 검색해  Format On Save 체크 시 저장하면 이제 자동으로 바뀐다.

 

2. Material Theme , Material Icon Theme , Material Theme Icons

VS Code의 테마, 아이콘을 변경해준다. (시각적 효과)

 

3. Auto Close Tag , Auto Rename Tag 

자동으로 닫힘 태그를 만들어 주고, 태그 명을 바꿀 시 닫힘 태그의 이름이 자동으로 바뀐다. 

 

 

4. htmltagwrap

엘리먼트를 감싸는 태그를 만들고 싶을 때 사용한다. (alt+w)

 

 

5. html meta tags hero

meta 태그 작성을 조금 더 쉽게 해준다.

 

 

6. HTMLHint

 html 작성 시 틀린 부분을 알려준다.

 

 

7. HTML CSS Support, HTML to CSS autocompletion

html에서 css 선택자를 쓸때 자동 완성 기능을 지원해준다. (ctrl + space)

아래처럼 추가 설정 시 다른 언어에서도 사용 가능하다.

//* HTML CSS Support 추가 설정
"css.enabledLanguages": [
  "html",
  "javascriptreact",
  "typescriptreact",
  "typescript",
  "javascript",
  "njk",
  "nunjucks",
  "html-nunjucks",
  "php"
],

html to css 는 반대로 CSS에서 작성 시 HTML에서 사용한 속성이름을 자동 완성해준다.

 

 

8. CSS Peek

파일에서 class에 적용된 css 속성으로 바로 이동(ctrl+클릭)하게 해준다.

 

 

9. CSS Initial Value

css 속성 기본값을 보여준다.

 

 

10. Autoprefixer

css3에 밴더 프리픽스를 자동으로 붙여준다.

 

 

11. px to rem

px로 작성한 값을 rem, vw등으로 변경할 수 있다.

px => rem , rem => px  : (Alt+z)

px => vw, vw=> px  : (Alt+v, Alt+w)

 

 

12. ftp-simple 

VS Code에서 ftp연결을 쉽게 도와준다.

 

 

13. ESLint

자바스크립트의 문법을 잡아준다. (단 node.js 필요)

 

• Node.js 설치
• VS Code에서 ESLint 설치
• 터미널에서 npm install -g eslint 실행  (npm init , yes로 넘기다 보면 package.json이 생성.)
• eslint –init 실행 (여기서 설정한 것은 나중에 다시 수정 가능하다. yes로 넘기다 보면 eslintrc.js이 생성.)
• .eslintrc.js의 rules에 원하는 규칙을 입력 (eslint의 rules 참조 :  https://eslint.org/docs/rules )
• settings.json 수정 (F1-> 기본 설정 수정(settings.json) 하단에 추가

"eslint.validate": [
	 	{"language": "javascript"},
	 	{"language": "html"},
],

 

•  .eslintrc.js 파일 수정

"extends": "eslint:recommended",
    "rules": {
        "indent":[
            "error",
            4
        ],
        "no-unused-vars": 1,
        "no-use-before-define": 1,
        "no-redeclare": 1,
        "no-console":0,
    }

 

14. ES7 React/Redux/GraphQL/React-Native snippets

React 작성 시 간편하게 코드를 작성하도록 도와준다.

 

 

15 vscode-styled-components

리액트 환경에서 css문법 표현을 사용해줄때 자동 완성이 된다.

 

16. wsl 

윈도우에서 리눅스를 사용하기 편하게 만들어준다.

사용법이 좀 길기 때문에 사이트를 참고하는 것이 좋다.

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl 

 

17. Live Server

작성한 코드를 브라우저에 반영해준다. (우측 하단 Go Live 클릭)

 

 

18. Korean Language Pack for Visual Studio Code

VS Code 용 한국어 팩이다.