[#. React] CRA(create-react-app)에 ESLint, Prettier 적용, 설정하기

 

 

 

 

 

CRA(CRA(create-react-app)로 시작한 React 프로젝트에

ESLint와 Prettier를 적용해 보자

 

 

 

 

ESLint(ES + Lint)

린트(lint)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 말한다

따라서, ESLint는 Javascript 문법에서 에러를 표시해주는 도구다

ESLint를 사용하게 되면 의도치 않은 실수뿐만 아니라 전반적인 코딩 스타일을 표준화한다

=> 협업 시 균일화된 스타일을 유지할 수 있다

 

 

 

Prettier

정해놓은 규칙에 따라 자동으로 코드를 정렬해 준다 Formatting

ESLint에도 Formatting 기능이 있기 때문에 ESLint의 기능은 종료해 둬야 한다

 

 

 

 

 

① VSCode에서 ESLint, Prettier Extension 설치

 

 

 

이렇게 두 가지를 설치한다

 

 

 

 

② React 프로젝트에 설치

 

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

 

 

eslint-config-prettier : ESLint와 Prettier에 중복되는 Formatting 룰 삭제

eslint-plugin-prettier : ESLint에 Prettier의 Formatting 기능 추가

 

 

 

 

③ root 경로에 .eslintrc.json 생성

 

{
    "extends": ["react-app", "plugin:prettier/recommended"]
}

 

 

 

 

④ VSCode - Settings - Settings.json 내용 붙여넣기

 

 

 

우측 상단 버튼 클릭

 

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

 

 

 

 

⑤ Code -  Preferences - Settings

 

formatonsave로 검색 => 체크

 

 

default formatter로 검색

null => esbenp.prettier-vscode로 수정

 

 

 

 

⑥ root 경로에 .prettierrc.js 생성

 

module.exports = {
  printWidth: 100, // 화면 폭
  tabWidth: 2, // 탭 간격, 스페이스 설정 시 2칸 띄어쓰기
  singleQuote: true, // '' 작은 따옴표 사용
  trailingComma: "all", // , 자동으로 붙이기
  semi: false, // ; 사용 안 함
  useTabs: false, // tab키 사용. false 추천 == space 대체
  arrowParens: "always", // (x) => x, x => x로 전자처럼 괄호 유지
  endOfLine: "auto",
  bracketSpacing: "true", // 대괄호 {} 사이 공백
  jsxBracketSameLine: "true", // JSX 요소 > 줄바꿈
};

 

prettier option은 여기를 참고하면 된다

 

prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

 

 

 

 

 

⑦ test.js 테스트하기 위한 파일 작성

 

 

⑴ Prettier 테스트

 

function test() {
  const a = [1, 2]
  const b = "test"

  console.log(a, b)
}

test();

 

 

 

저장 후 Prettier 자동 적용

 

function test() {
  const a = [1, 2]
  const b = 'test'

  console.log(a, b)
}

test()

 

 

⑵ ESLint 테스트

 

function test() {
  const b = 'test'

  const b = 1

  console.log(a, b)
}

test()

 

 

 

위에 있는 이미지에서처럼 잘못된 부분에 빨간색 밑줄이 뜨고 마우스를 가져다 대면 잘못된 이유가 뜬다

 

 

잘못된 코드가 있을 때는 이렇게 파일명 자체가 빨간색으로 뜬다

 

 

해결 후에는 이렇게 초록색으로 변한다

 

 

 

 

 

 

 

 

 

 

 

※ Prettier not work, Prettier 작동 안 될 때 해결방법

 

Code -  Preferences - Settings - Settings.json 파일에 아래 코드 추가

 

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

 

 

 

※ ESLint not work, ESLint 작동 안 될 때 해결방법

 

.eslintrc.json 파일 확인해 보기

 

{
    "extends": ["react-app", "plugin:prettier/recommended"],
}

 

혹시 위에 코드처럼 , 쉼표가 들어가 있으면 작동하지 않으니 확인해 볼 것! ★