동료 개발자와의 원할한 협업을 위해서 Eslint
와 Prettier
를 사용하여 포메팅을 할 것이다.
eslint는 문법 linting과 코드 스타일 포메팅을 동시에 제공하는 라이브러리이다. Eslint는 functions를 설치하면서 같이 설치가 됬다. Vscode
의 ESLint
Extention만 깔아주면 적용이 된다.
Prettier는 Eslint와 다르게 포메팅만 해준다. 줄바꿈이 되는 글자수같이 eslint보다 심화된 포메팅을 해주기 때문에 추가적으로 설치한다.
Prettier도 우선 Extention을 깔아준다.
yarn lint
명령어 실행시에 오류 표시 해준다.yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
-D 옵션은 devDependency로 사용한다는 의미이고 실배포시에 설치하지 않을 패키지라는 뜻이다. 주로 테스트나 포메팅, 빌드 할때 사용되는 라이브러리들을 -D옵션을 사용해서 설치한다.
prettier의 옵션들을 넣어둘 파일이다.
// .prettierrc.js 파일안에 복사해주세요
module.exports = {
bracketSpacing: false,
trailingComma: 'all',
arrowParens: 'avoid',
};
eslint와 prettier를 같이 사용하기위해서 eslint옵션 파일을 수정을 해야한다. 다음과 같이 변경해주면 된다.
저장을 할때마다 이런 버그가 발생한다면 vscode자체 포메터와 prettier가 충돌한 것이다. cmd + shift + p
키를 눌러 팔레트를 열어준뒤 format document
를 검색하여 typescript 기본 포메터를 prettier로 변경해주고 vscode를 껃다키면 해결된다.