VSCode - 익스텐션 및 셋팅 [React]

sunone-lee·2022년 8월 31일

1. Auto Import - ES6, TS, JSX, TSX

파일명을 입력하면 자동으로 import가 된다.

2. ESLint

자바스크립트 문법, 코드 스타일을 검사해준다. 문법 오류를 발견하고 수정까지 해줌👍

심지어 규칙을 본인에게 맞게 설정할 수도 있다.

ESLint와 Prettier를 같이 쓰는 경우가 대다수이다.

코드 문법 오류를 잡아내기 위해 ESLint를 사용하고,

문법적으로 문제는 없지만 가독성이 떨어지거나 보기에 마음에 들지 않는 것(?)들을 고치기 위해 Prettier를 사용한다.

VScode 또는 node.js 로 따로 설치가능
- Prettier가 js파일이 자기 주관에 맞게 이쁘게 바꿔본 대안을 제시하여 보여줌
- VScode에서 Default Formatter로 사용하고 옵션을 이리저리 만지면 코딩이 편해짐

4. JSX내에서 emmet을 쓰고 싶다면 VS CODE에서 설정해 줍니다.

"emmet.includeLanguages": {
   "javascript": "javascriptreact"
},

5. ES7 React / Redux / GraphQL / React-Native snippets
아직도.. 이런거 한줄 한줄 쓰고있다면.. 여기 알면 참 간편한 스니펫 여기 몇가지 추렸읍니다. 참고하세요~

리액트 가져오기
//imr →
import React from 'react'

리액트 + Component 가져오기
//imrc →
import React, { Component } from 'react'

import a default module (기본 모듈 가져오기)
//imp →
import moduleName from 'module'

명명된 함수
//nfn →
const functionName = (params) => {

React stateless component skeleton 생성
//rsc →

React stateless named function skeleton 생성
//rsf →

React Developer Tools (Chrom Extension)