prettire, eslint의 충돌 문제

ESLint와 Prettier가 함께 사용될 때 충돌이 발생하는 것은 흔한 문제입니다. 이러한 충돌을 해결하려면 두 도구가 서로의 설정에 영향을 미치지 않도록 조정해야 합니다. 다음은 ESLint와 Prettier를 함께 사용할 때 충돌을 해결하는 방법입니다:

eslint-config-prettier 설치: 이 패키지는 ESLint의 포맷팅 규칙 중 Prettier와 충돌하는 규칙을 끕니다. npm을 사용하여 설치할 수 있습니다:

arduino
Copy code
npm install --save-dev eslint-config-prettier
ESLint 설정 파일 수정: .eslintrc 파일 (또는 ESLint 설정이 포함된 다른 파일)에서 eslint-config-prettier를 extends 배열의 마지막 항목으로 추가합니다. 이렇게 하면 Prettier와 충돌하는 ESLint 규칙이 비활성화됩니다.

json
Copy code
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
eslint-plugin-prettier 사용 (선택사항): 이 플러그인은 Prettier를 ESLint 규칙으로 실행하게 해줍니다. 이렇게 하면 ESLint를 실행할 때 Prettier 포맷팅이 적용됩니다. 설치는 다음과 같이 합니다:

css
Copy code
npm install --save-dev eslint-plugin-prettier
그리고 ESLint 설정에 플러그인을 추가합니다:

json
Copy code
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
VSCode 설정 (선택사항): 만약 Visual Studio Code를 사용한다면, Prettier와 ESLint가 자동으로 코드를 포맷하도록 설정할 수 있습니다. settings.json 파일에 다음 설정을 추가합니다:

json
Copy code
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
}
}
이 설정은 모든 파일에 대해 저장 시 자동 포맷을 활성화하고, JavaScript 파일에 대해서는 ESLint를 통한 자동 수정만 활성화합니다.

이 단계들을 따라하면 ESLint와 Prettier 사이의 충돌을 해결하고, 두 도구를 함께 사용하여 코드의 일관성을 유지할 수 있습니다.