개인 프로젝트를 진행할때는 상관없지만 다른 사람과 팀 프로젝트를 진행하게 되면 늘 걱정인게 하나 있습니다
코드 컨벤션!
아무리 머리 속에 코드 컨벤션을 지켜야 한다고 생각하고 있어도 개인의 버릇이나 코딩 스타일에 따라서
코드가 뒤죽박죽 되기 마련입니다.
첫 팀 프로젝트를 진행하면서 프론트엔드 팀원들과 최대한 동일한 스타일로 코드를 작성하기 위해 노력했던 내용을 공유하고자 합니다.
EsLint(이하 린트) 와 Prettier(이하 프리티어) 는 무엇일까요??
간단하게 이해하자면 린트는 규칙에 맞지 않는 코드가 발견되면 경고해 주는 도구 입니다,
그렇다면 프리티어 는 무엇일까요?? 한 마디로 코드를 아름답게 만들어주는 확장 프로그램 이라고 생각하시면 됩니다.
그럼 왜 두 가지를 한번에 사용하고 함께 사용할까요?
린트로 규칙을 체크하고 프리티어로 코드 가독성을 높히기 위해서!
입니다.
하지만 린트에도 약간의 포매팅 기능이 존재하기 때문에 두 프로그램이 서로 충돌하기 때문입니다.
저희 팀에서도 해당 사항을 몰라서 프로젝트 첫 부트캠프 주간에 굉장히 고생했던 기억이 있습니다.
이제부터는 어떻게 충돌을 제거할 수 있는지 알려드리도록 하겠습니다!
본 게시물은 리액트, VScode 환경에서의 설정 방법을 알려드립니다
- 린트 확인하기
생성한 프로젝트에서 린트가 설치되어 있는지 확인해 봅시다npm ls eslint
를 입력해서 린트가 설치되어 있는지 확인할 수 있습니다
npm ls eslint-plugin-react
를 입력해서 eslint-plugin 이 있는지 확인해 봅시다
npm ls eslint-plugin-react-hooks
를 입력해서 eslint-plugin-react-hooks 이 있는지 확인해 봅시다
사실 CRA(create-react-app) 으로 프로젝트를 생성 하면 eslint 관련된 것들이 이미 생성되어 있습니다
- Prettier 설치
npm i -D eslint prettier
를 입력해서 프리티어를 설치해 줍니다
명령어만 입력하면 바로 진행되어서 어려움이 없습니다. - 린트 설정하기
아래 사진을 따라서 진행해 주시면 됩니다
린트를 어떻게 사용할 것인지 체크합니다
린트를 어디서 사용할 것인지 체크합니다 해당 게시글은 리액트를 기준으로 하기 때문에
자바스크립트 모듈을 선택해 주면 됩니다.
타입스크립트를 사용할 것인지 체크합니다 저희팀은 사용하지 않았습니다
어떤 코딩컨벤션을 사용할 것인지 선택해 줍니다. 유명한 스타일을 선택하는게 정신건강에 편합니다
에어비엔비, 구글 등 의 잘 알려진 스타일을 선택하면 됩니다.
자바스크립트는 대부분 에어비엔비 스타일을 이용하는 것으로 알고 있습니다
- Eslint의 prettier 설정과 충돌하는 부분 off + Eslint에서 prettier 포맷팅 이슈를 출력
npm install -D eslint-config-prettier eslint-plugin-prettier
린트 안에 존재하는 프리티어 관련 부분을 삭제합니다 해당 과정을 진행해 주셔야 프리티어와 린트의 충돌을 막을 수 있습니다!
- .eslintrc.js 설정 추가
.eslintrc.js
파일을 만들어서 해당 설정을 추가해 줍시다
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['plugin:react/recommended', 'airbnb', 'prettier'], // prettier => eslint와 출동되는 부분 기능 끄기
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', 'prettier'], // prettier => prettier를 eslint의 plugin으로 등록
rules: {
'react/react-in-jsx-scope': 0, // import React 생략 가능
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }], // js, jsx 모두 가능
'prettier/prettier': 'error', // prettier의 포맷팅 이슈를 출력
},
};
- .prettierrc설정
..prettierrc
파일을 만들어서 규칙을 추가해주면 됩니다
해당 파일에는 팀원간 합의한 규칙을 추가하면 됩니다
module.exports = {
singleQuote: true, // singleQuote 사용
tabWidth: 2, // tapWidth 2
useTabs: false, // space 사용
semi: true, // 문장 끝 세미콜론 사용
bracketSpacing: true, // 중괄호 내에 공백 사용
arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
trailingComma: 'es5', // 꼬리 콤마 사용, 객체, 배열에선 , 추가, 함수 인자
jsxSingleQuote : false, // jsx 파일에서 쌍따옴표(") 대신 홑따옴표(')를 사용하는지 여부
};
- VS code extension 으로 ESlint, Prettier 설치해 줍니다
- VS code 에서 settings 하기
이렇게 하면 린트와 프리티어의 충돌을 최소화 하고 사용할 수 있습니다!