이번 팀 프로젝트를 진행하면서 일관된 코드 스타일을 유지하고, 팀원들이 서로의 코드를 읽기 쉽고 이해하기 쉬운 형태로 통일시키기 위해 ESlint 와 Prettier 두 가지의 분석 도구를 같이 사용하기로 했다.
ESLint와 Prettier의 역할
ESLint는 자바스크립트 코드에서 발생할 수 있는 오류나 잠재적인 문제를 검사하는 분석 도구로 코드 품질을 향상시키고 버그를 사전에 예방해준다.
Prettier는 코드 포맷팅 도구로 자동으로 코드를 정리하고 일관된 스타일로 포맷팅해준다.
ESLint와 Prettier 충돌 이유
ESLint와 Prettier는 모두 코드의 품질을 개선하는 데에 중점을 둔 자바스크립트 도구이지만 ESLint와 Prettier는 각각 다른 목적을 가지고 있으며, 이로 인해 충돌이 발생할 수 있다.
ESLint와 Prettier가 충돌하는 이유는 두 도구가 각각 다른 코드 스타일을 적용하기 때문이다. 예를 들어, ESLint는 따옴표를 사용하는 방법에 대한 규칙을 single quotes(')를 사용하도록 강제할 수 있다. 하지만 Prettier는 double quotes(")를 사용하는 것을 선호한다. 이와같이 서로 다른 스타일을 적용할 때 충돌이 발생하게 된다.
ESLint와 Prettier 충돌 에러
실제로 오늘 프로젝트에 두 가지 분석 도구를 적용하면서 충돌 에러가 발생했다. 아래와 같은 에러가 발생하고 브라우저가 정상적으로 출력되지 않았다.
[eslint] failed to load config "prettier" to extend from.ESLint와 Prettier 충돌 해결 방법
충돌 에러 해결 방법으로는 충돌 방지 플러그인 설치 후 ESLint 파일 설정을 수정하여 해결했다. 자세한 방법은 아래 적힌 내용과 같다.
1. 프리티어 설치 및 충돌 방지 플러그인 설치
npm install --save-dev --save-exact prettier
npm install --save-dev eslint-plugin-prettier--save-exact는 버전이 달라지면서 생기는 스타일 변화를 막기 위해 사용
2. ESLint 파일 설정
{
"extends": ["prettier", "eslint:recommended", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}-
extends : ["prettier"]
eslint-config-prettierPrettier와 충돌하는 일부 ESLint 규칙을 해제하는 구성을 활성화 -
"plugins": ["prettier"]
해당 플러그인을 등록 -
prettier/prettier: "error"
ESLint 내에서 Prettier를 실행하는 이 플러그인에서 제공하는 규칙을 킴
ESLint 추가 정보 (TSLint ?! )
TypeScript를 사용해서 팀 프로젝트를 진행하다 보니 자연스럽게 TypeScript에서 사용할 수 ESLint Prettier가 따로 존재하지 않을까? 라는 고민에 구글링을 해보니 실제로 TSLint가 존재했었다. 하지만, 2019년 부터 업데이트가 중단됐으며 중단된 이유는 Typescript는 순수 Javascript로 작업 하여도 문제가 없을 정도의 호환성을 보장하지만, TSLint는 순수 Javascript 코드를 Linting 하는데, ESLint 보다 효과적이 못했기 때문이라고 한다.
향후 TSLint 팀은 ESLint의 마이그레이션을 지원하고 ESLint의 Typescript 지원을 개선 하는데 집중한다고 밝혔고 다만, TSLint를 새로운 컴파일러 버전 및 기능과 호환성을 보장하도록 지원은 할 예정이라고 한다.
