TDD를 위한 ESLint Prettier 적용

TDD를 위한 ESLint Prettier 적용

TDD를 위한 ESLint Prettier

React TDD 개발할 때 eslint와 prettier를 활용하는 방법에 대한 포스팅입니다. ESLint와 Prettier는 그냥 코드를 작성할 때에도 유용하지만, Test 코드를 작성할 때에도 많은 도움이 됩니다. 테스트 코드에 ESLint와 Prettier를 적용함으로써 코드 품질이 향상될 수 있고, 오류를 예방할 수 있습니다.

ESLint Setup

1. npm install eslint-plugin-testing-library eslint-plugin-jest-dom

npm install eslint-plugin-testing-library eslint-plugin-jest-dom

2. package.json에서 eslintConfig 삭제

package.json에서 보이는 eslintConfig부분을 삭제하고, eslintrc.json 파일을 만들 예정입니다.

package.json

3.eslintrc.json  파일 추가

{
  "plugins": [
    "testing-library",
    "jest-dom"
  ],
  "extends":[
    "react-app",
    "react-app/jest",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

4. extension에서 ESLint 다운로드 

5. setting.json 추가

.vscode 폴더를 추가하고, 그 안에 settings.json 파일을 작성합니다.

.vscode settings.json

{
  "editor.codeActionsOnSave": {"source.fixAll.eslint":true}
}

6. gitignore에 .vscode .eslintcache 추가

.vscode
.eslintcache

---

Prettier Setup

1. .vscode settings.json에 설정 추가

 "editor.defaultFormatter": "esbenp.prettier-vscode", 
"editor.formatOnSave": true,}

2. extension에서 Prettier 다운로드

---

settings.json을 default로 설정하고 싶을 때

이 폴더 안 settings.json을 설정해 놓는다면, project를 시작할 때마다 settings.json을 추가하지 않아도 된다고 합니다.

• Windows %APPDATA%\Code\User\settings.json.
• macOS $HOME/Library/Application\ Support/Code/User/settings.json.
• Linux $HOME/.config/Code/User/settings.json.

출처: https://code.visualstudio.com/docs/getstarted/settings

Visual Studio Code User and Workspace Settings