개발 환경 셋팅
지금까지 프로젝트를 시작하기 전, Eslint와 Prettier을 설치하지 않고 코드를 작성했다. 프로젝트 규모가 커질 수록 협업을 위해 코딩을 하는데 한번에 알아보기 쉬운 코드를 짜야 하며, 협업하는 팀원들끼리 문법 규칙도 맞추어야 한다고 생각이 들었다. 아쉽게도 이번 프로젝트의 Frontend 파트는 혼자 맡게되었다. 따라서, 이미 다른 개발자들이 많이 사용하는 config인 airbnb에서 정의한 자바스크립트 규칙을 따르려고 한다.
Eslint와 Prettier
Eslint는 개발하는 데에 있어 문법을 검사해 주며 커스터 마이징 까지 가능하여 협업하는 사람들 끼리 문법 규칙을 정할 수 있다. Prettier는 코드를 자동으로 정리해 주며 Prettier 또한 설정이 가능하여 개행, 줄당 문자 개수 등 코드 정리를 하는데에 개발 시간을 줄일 수 있도록 도와준다.
Eslint와 Prettier을 사용하기 위해서는 IDE로 VScode을 사용한다면, 자체적으로 패키지를 설치해야한다. 문법 규칙 혹은 코드 스타일 규칙 설정의 경우 VScode의 settings.json 설정파일을 변경해도 되지만, 협업하는 사람이 있다고 가정해 규칙 설정은 Eslint의 경우 package.json내에 규칙을 설정하고 Prettier의 경우 .prettierrc 파일 내에 정의했다.
Eslint, Prettier 패키지 설치
VScode의 패키지 설치 탭을 선택해 다운 받는다.
npm/yarn 으로 필요 패키지 설치
yarn add eslint-config-airbnb eslint-config-prettierairbnb 에서 정의한 자바스크립트 문법 규칙을 준수하기 위해 eslint-config-airbnb을 설치했다. 프로젝트가 React이며 CRAv2을 통해 프로젝트를 생성했을 경우 다른 peerDependencies들은 설치되어 있어 넘어가도 되지만 그렇지 않을 경우 npm info eslint-config-airbnb@latest 명령어를 통해 사전 패키지들도 모두 설치해 주어야 한다.
Eslint 세부 설정하기
프로젝트의 package.json파일 내에 eslintConfig영역에 airbnb를 추가한다.
"eslintConfig": {
"extends": [
"react-app",
"airbnb",
]
}airbnb 규칙 커스터마이징 및 env설정
airbnb에서 정의한 JS문법 규칙은 꽤나 까다롭다 따라서, 대표적으로 지켜주지 않아도 될 규칙들은 마찬가지로 eslintConfig 영역에 rules키워드를 추가하여 VScode내에서 보여주는 규칙을 추가한다. 경고만을 띄우기를 원할 경우 0대신 1로 표기하자.
추가로 브라우저 객체를 사용할 경우 eslint에서 경고를 준다. 따라서 env키워드에 browser: true 값도 추가한다.
"eslintConfig": {
"extends": [
"react-app",
"airbnb"
],
"rules": {
"react/prefer-stateless-function": 0,
"react/jsx-filename-extension": 0,
"react/jsx-one-expression-per-line": 0
},
"env": {
"browser": true
}
}
특정 파일에 eslint검사가 불필요할 경우 파일 상단에 /* eslint-disable */을 추가하자.
Eslint로 문법 수정
F1 키를 눌러 Eslint: Fix 로 처리하거나 VScode에서 Problem탭에서 보여주는 문제를 보며 오른쪽 클릭하여 문법 수정하기 버튼을 클릭하면 된다.
Prettier 환경 설정
VScode에 내장되어 있는 자바스크립트 포맷팅 기능을 비활성 해야한다.
Settings => Preference을 클릭하여 format on save 키워드를 컴색하여 해당 체크박스를 해제한다. 그리고 마찬가지로 package.json파일에서 eslint>extend 영역에 prettier을 추가한다. ESlint 규칙을 비활성화 하기 위함이다.
"eslintConfig": {
"extends": [
"react-app",
"airbnb",
"prettier"
],
}Prettier도 마찬가지로 F1>Format Document을 통해 코드 스타일을 정해진 규칙대로 변경해 준다. 코드 스타일 규칙은 VScode의 setting.json파일에서 설정하거나 프로젝트 루트 디렉토리 내에 .prettierrc 파일을 통해 규칙을 정해줄 수 있다.
ex)
.prettierrc file
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}