자바스크립트 프로젝트에 ESLint, Prettier 저장시 자동 고침 설정하기

README.md

💁 설명

여러 사람이 같이 작업하는 환경에서 ESLint와 Prettier를 사용해야 할 때가 있다.

VSCode에서 저장시 자동 바꿔주기 기능을 사용하기 위한 준비

1. npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier 글로벌로 설치도 가능하긴 하다
2. VSCode 확장앱 ESLint, Prettier - Code formatter 설치
3. VSCode Workspace 설정 (한 사람이 하고 Git에 올리면 됨)

{
  // Set the default
  "editor.formatOnSave": false,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
  }
}

이 작업을 하면 .vscode 폴더에 settings.json이 생성되며 Git에 올리면 모든 사람들이 받아서 쓸 수 있다.

4. 환경설정 만들기 (이 작업도 한 사람이 하면 된다)

• npx eslint --init 하고 질문에 대답한다. (포맷은 JSON으로 한다)
• prettier와 연결 시켜주기 위해 .eslintrc.json에 다음의 옵션을 추가한다

// 복붙하지 말고 중복된 부분을 찾아서 잘 이어줘야한다
{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

• .prettierrc.json도 위와 같이 만들 수 있으나 미리 설정 된 파일을 수정하는게 더 빠르다

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

📑 체크리스트

ESLint와 Prettier를 둘 다 사용하는 이유?

• 두개의 역할이 겹치는 부분도 있지만 안 겹치는 부분도 있어서

VSCode 확장앱을 설치하는 이유?

• 확장앱은 node_modules 폴더에서 eslint 모듈을 찾아서 VSCode와 연결시켜준다

🚧 주의 사항

참고한 사이트

https://code.visualstudio.com/docs/editor/multi-root-workspaces

https://velog.io/@recordboy/ESLint-Prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0