[리액트] 리액트 프로젝트에서 기본적인 ESLint, Prettier, setting.json 설정해주기

 

1. 개발용으로 prettier, eslint-config-prettier 패키지 설치해주기

prettier: 코드 포매팅

eslint-config-prettier: eslint 와의 호환을 위한 패키지

yarn add --dev prettier eslint-config-prettier

 

2. .eslintrc 파일을 만들어 아래의 코드 추가해주기

extends: 누군가 미리 만들어놓은 규칙을 가져와서 사용하고자 할 때 명시하는 

react와 prettier를 위한 코드 작성 규칙을 가져와서 사용

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

 

3. .prettierrc 파일을 생성한 후 아래의 코드를 추가해주기

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

 

4. .vscode 폴더 만들고 setting.json 파일을 생성한 후 아래의 코드를 추가해주기

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}