[VSCode] 유용한 Extensions

React Snippet

{
  "reactFunction": {
    "prefix": "rfc",
    "body": "import React from 'react';export default function ${1:${TM_FILENAME_BASE}}() {return (<div></div>);}",
    "description": "Creates a React Function component"
  },
  "reactStatelessImplicitReturn": {
    "prefix": "rsi",
    "body": "import React from 'react';export const ${1:${TM_FILENAME_BASE}} = (props) => ();",
    "description": "Creates a React Function component"
  },
  "Import Module CSS": {
    "prefix": "si",
    "body": ["import styles from './$TM_FILENAME_BASE.module.css'"],
    "description": "Import PostCSS"
  },
  "ClassName": {
    "prefix": "cn",
    "body": ["className={styles.$1}"],
    "description": "Adding className"
  }
}

크롬 브라우저: https://www.google.com/chrome/

리액트 개발툴 익스텐션: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi



유용한 VS Code 익스텐션

- Material Theme: 현재 사용하고 있는 테마(dark)
- Material Icon Theme: 현재 사용하고 있는 아이콘들
- Auto Import: 자동으로 import 해줌
- Prettier - Code formatter: 코드를 이쁘게 포맷 
- CSS Modules: 나중에 PostCSS 쓸때 유용함


기타 HTML & CSS 관련 익스텐션
- IntelliSense for CSS class names in HTML
- HTML to CSS autocompletion
- HTML CSS Support
- CSS Peek
- Auto Rename Tag