VS Code와 yarn을 기본으로 진행하자면,

1. 패키지 설치

yarn add -D eslint
			prettier
			eslint-config-airbnb-base
			eslint-config-prettier
			eslint-plugin-import

위의 모듈들을 프로젝트에 devDependencies로 추가해준다.

각각 간단히 설명하자면,

1. eslint
   linter로써 자바스크립트 코드의 오류를 잡아준다.
2. prettier
   formatter로써 코드의 스타일을 교정해준다.
3. eslint-config-airbnb-base
   에어비앤비의 코드 스타일 프리셋이라고 생각하면 된다. 대중적으로 가장 많이 쓰이는 config 중 하나이며, -base가 붙으면 리액트 규칙이 제외된 패키지이다.
4. eslint-config-prettier
   eslint와 prettier를 같이 쓸 경우 기능이 겹치는 부분에서 충돌이 발생한다. eslint에서 prettier와 충돌하는 규칙을 꺼주는 기능을 한다.
5. eslint-plugin-import
   import 규칙을 설정해주는 config로 eslint-config-airbnb-base에서 필요한 의존성 패키지이다.

2. 확장 프로그램 설치

VScode의 익스텐션에서 eslint와 prettier를 설치한다.

3. eslint 설정

.eslintrc 파일을 직접 만들어 설정해도 되지만 간단하게 설정하기 위해 eslint --init을 이용하기로 한다.

yarn eslint --init

터미널에서 위 명령을 실행하면 편하게 eslintrc의 설정을 할 수 있다. 만약 eslint를 전역(-g)으로 설치하였다면 yarn은 생략해도 된다. yarn을 붙이는 이유는 npx처럼 전역으로 설치하지 않고 패키지만 실행하기 위한 것이다. 실행하게 되면 다음과 같은 질문들을 물어보는데 각각 원하는 대답을 하면 된다.

√ How would you like to use ESLint?
√ What type of modules does your project use?
√ Which framework does your project use?
√ Does your project use TypeScript?
√ Where does your code run?
√ How would you like to define a style for your project?
√ Which style guide do you want to follow?
√ What format do you want your config file to be in?
√ Would you like to install them now with npm? [이 부분은 이미 설치를 했기에 no를 선택한다]

.eslintrc파일이 원하는 확장자로 만들어졌다면

"extends": ["airbnb-base", "prettier"]

위와 같이 extends에 prettier를 추가하여 충돌을 방지해준다. 항상 맨 마지막에 추가를 해줘야 prettier가 최종적으로 덮어쓰는 개념으로 충돌이 일어나지 않는다.

4. prettier 설정

.prettierrc 파일을 만든다. 만들지 않으면 기본 prettier 설정을 따른다.

5. VS Code 설정

Ctrl + Shift + P 를 눌러 setting.json을 열어 텍스트를 직접 수정하거나 Ctrl + , 로 GUI로 수정할 수 있다.

  "eslint.workingDirectories": [ // 보통 이렇게 디렉토리 설정을 안해서 자동고침이 안된다
    {
      "mode": "auto"
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode", // eslint-plugin-prettier을 추가하지 않을 시! 넣어야 합니다.
  "editor.formatOnSave": true,	//저장 시 자동 수정
  "editor.formatOnPaste": true,	//복붙 시 자동 수정
  "editor.formatOnType": true,	//타이핑 시 자동 수정

이로써 eslint와 prettier의 초기 설정이 끝났다.

참고 링크
https://yrnana.dev/post/2021-03-21-prettier-eslint/
https://chinsun9.github.io/2021/11/20/eslint-init/
https://ldevlog.tistory.com/16
https://heewon26.tistory.com/262