내가 레퍼런스가 되자 내가 레퍼런스가 되자

기존 프로젝트에서 eslint-plugin-prettier를 사용하여 eslint 설정에서 prettier 설정을 같이 하여 code formatting을 하고 있었습니다. 여러 레퍼런스와 prettier 공식 문서에서도 해당 라이브러리를 사용하여 lint에 묶어서 처리하는 것을 추천하지 않습니다. 그래서 eslint-plugin-prettier를 제거하고 eslint 설정과 prettier 설정을 분리하는 과정을 포스팅하게 되었습니다. eslint-plugin-prettier? or eslint-config-prettier? eslint 설정과 prettier 설정을 분리하기 전에 제거할 eslint-plugin-prettier와 추가할 eslint-config-prettier 두 개의 라이브러리에 대..

팀 단위로 개발 시 팀원들과 코드 컨벤션을 맞추거나 코드의 문법적 오류를 막기 위해 Eslint, Prettier를 사용하고 있습니다. TypeScript 환경의 초기 프로젝트 구축 시 또는 프로젝트 도중에 ESlint, Prettier가 필요하다면 어떻게 설정할지 알아보겠습니다. ESlint 설정하기 ESlint? ESlint는 ECMAScript Lint로 ECMAScript/자바스크립트 환경에서 문법적 오류와 안티 패턴을 에러로 잡아주는 Linter입니다. 그뿐만 아니라 Tab, 줄바꿈 처리 등의 코드 스타일도 지정할 수 있습니다. ESlint 설치 및 설정 ESlint를 설치 후 ESlint config 파일을 생성합니다. # ESLint는 전역 설치를 권장하지 않음 npm install esli..

ESLint와 Prettier을 통해 기본적인 코드 컨벤션을 잡아 사용하던 중에 import 구문에 대한 컨벤션 필요성을 느끼게 되었습니다. 개발자마다 import구문을 추가하는 방식과 순서가 다르다 보니 가독성이 많이 떨어졌기 때문입니다. 그래서 import 구문을 lint로 잡고자 eslint-plugin-import를 찾아 도입하게 되었습니다. eslint-plugin-import? eslint-plugin-import의 GitHub을 보면 다음과 같이 설명하고 있습니다. This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths..