여러 작업자들의 코딩 스타일을 일치시키기 위한 Lintter와 Code Formatter이다.
- Lintter -> ESLint
- Code Formatter -> Prettier
ESLint
ESLint 공식 문서
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
구글번역
ESLint는 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구로, 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 합니다.
즉, ESLint는 보다 좋은 품질의 자바스크립트 코드를 작성하기 위한 일종의 코드 스타일 가이드이다.
작성된 코드의 구문을 분석하여 버그가 발생할 여지가 있거나, 불필요한 코드, 혹은 보안상 위험한 코드 등에 대한 경고를 띄어준다.
Prettier
Prettier 공식 문서
Prettier removes all original styling and ensures that all outputted code conforms to a consistent style.
구글번역
Prettier는 모든 원래 스타일을 제거하고 출력되는 모든 코드가 일관된 스타일을 준수하도록 합니다.
ESLint는 코드 자체의 문법 교정과 더불어 스타일링 기능도 포함되는 반면,
Prettier는 자동으로 코드의 스타일을 맞춰주는 보다 강력한 기능을 지원하기 때문에 ESLint와 함께 사용된다.
ESLint & Prettier 설치방법
eslint-plugin-prettier, eslint-config-prettier를 함께 설치해서 사용하는 이유
- ESLint에게 linting을, Prettier에게 code formating을 전담시키기 위해 : eslint formatting rules와 prettier rules가 충돌하기 때문에 공식문서에서도 권장한다.
.eslintrc,.prettierrc등의 설정파일을 활용하기 위해 설치한다.- VSCode에서 코드를 입력할 때 실시간으로 수정사항을 코드에 반영하기 위해 설치한다.
CRA(create-react-app)으로 시작할 경우, package.json에서 확인할 수 있듯이 ESLint는 기본적으로 설치되어있다.
1. VSCode의 Extention으로 설치
User 탭
- 설치후,
설정 - Preference에서 각각의 Extention 설정이 적용될 범위를 Commonly Used로 정해주면 된다. - 설정의 범위가 VSCode를 사용하는 로컬 유저가 된다.
- 즉, User로 설정한 값들은 모든 workplace에 적용되겠지만, 해당 프로젝트를 clone 받은 다른 사용자 같은 다른 환경에서는 적용되지 않게 된다.
WorkPlace 탭
- 프로젝트 루트 경로에
.vscode폴더가 생성되며settings.json이 해당 폴더 안에 생성된다. - 이 파일에 작성한 내용으로부터 vscode에 관한 설정을 적용받는다.
- 즉
.vscode가 git에 함께 업로드 된다면, 이 파일이 포함된 프로젝트 폴더에서 작업을 하는 사용자는 해당 workplace에 대하여.vscode/settings.json에 작성된 값에 따른 동일한 설정을 적용받는다. - 다만, 여기에 포함된 설정은
eslint/prettier뿐만 아니라tap width/terminal에 관한 설정 또한 포함되어 다른 팀원의 에디터의 영향을 미칠 수 있다. - 컨벤션에 맞는 내용을 작성해 사용하고, 그렇지 않을 예정이라면
.gitignore에 추가하면 된다
2. npm 패키지로 설치
CRA에는 eslint가 내장되어있기 때문에 eslint는 추가설치할 필요가 없다
따라서 eslint 추가 설정을 위한 패키지만 설치해주면 된다.
$ npm install -D prettier eslint-config-prettier eslint-plugin-prettier추천하는 설정
- 다양한 설정파일이 존재할 경우
settings.json->.editorconfig->.prettierrc의 순서로 설정이 적용된다. - 자동으로 포맷팅 하기 위한 최소한의 사항이기 때문에 컨벤션에 따라 추가하거나 제거하면 된다.
.vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"javascript.format.enable": false,
"eslint.alwaysShowStatus": true,
"files.autoSave": "onFocusChange"
}.eslintrc
{
"extends": ["react-app", "plugin:prettier/recommended"],
"rules": {
"no-var": "warn", // var 금지
"no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
"no-nested-ternary": "warn", // 중첩 삼항 연산자 금지
"no-console": "warn", // console.log() 금지
"eqeqeq": "warn", // 일치 연산자 사용 필수
"dot-notation": "warn", // 가능하다면 dot notation 사용
"no-unused-vars": "warn", // 사용하지 않는 변수 금지
"react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
"react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
"react/no-direct-mutation-state": "warn", // state 직접 수정 금지
"react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
"react/no-unused-state": "warn", // 사용되지 않는 state
"react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
"react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
"react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
"prettier/prettier": [
"error",
{
"endOfLine": "auto",
"singleQuote": true, // 홑따옴표로 지정
"semi": false // 세미콜론제거
}
]
}
}.prettierrc
{
"tabWidth": 2,
"endOfLine": "lf",
"arrowParens": "avoid",
"singleQuote": true, // 자동으로 홑따옴표로 저장
"semi": false // 자동으로 세미콜론제거되면서 저장
}dependencies vs devDependencies
- 프로젝트에 필요한 외부 패키지들은
package.json에 담겨야 한다 - 왜냐하면
node_modules폴더의 용량이 상당하기 때문에 다른 소스 코드들과 github에 함께 업로드 할 수 없기 때문이다. - 따라서 npm을 기반으로 작성된 프로젝트를 clone 받았을 경우
package.json의 정보를 기반으로 -> 필요한 의존성들을 재구성(설치)하게 된다. - 하지만 개발단계에서 사용되는 패키지와 프로젝트가 빌드된 후, 실제 서비스 단계에서 사용되는 패키지는 다를 수 있다.
- eslint, prettier 등 전자(개발 단계)에서만 사용되는 대표적인 예시- build할 때는 의존성에서 제외함으로써 최종 결과물의 크기를 줄일 수 있다.
