(기본) vscode에 추가하기

vscode에 eslint와 prettier 설정하기 | NOT_NULL

진짜 그대로 따라 하면 된다.

CRA에 추가하기

CRA에 ESLint와 Prettier 추가하기

원래 ESLint를 사용하려면 프로젝트에 install 해야하지만, CRA는 기본적으로 ESLint 세팅이 되어있다. ESLint의 결과는 dev server를 띄운 터미널에도 계속 나오고, 브라우저 console창에도 계속 나온다. 하지만 rule을 무시했다고 error가 뜨는 것은 아니며, code style도 다 지적해주는 것이 아니므로 개발하는데는 아무 지장이 없다.

Editor에 ESLint와 Prettier 플러그인을 설치하여 개발단계에서 룰을 적용할 수 있도록 바꿔보겠다.  공식 문서에 잘 나와있다.

CRA에 ESLint 추가하기

1. CRA를 한다
2. vscode의 extensions에 ESLint를 검색하고 설치한다.
3. 프로젝트 root에 .eslintrc.json라는 파일을 추가한다.

{
"extends": "react-app"
}

CRA에 Prettier 추가하기

1. vsCode에서 Prettier 플러그인 설치
2. Prettier와 ESLint를 연결한다

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

1. .eslintrc.json 코드를 다음과 같이 업데이트 한다

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

1. setting.json에 다음의 코드를 추가한다