ESLint 란?

ECMA 스크립트 / JavaScript 코드에서 발견되는 패턴을 식별하고 보고하기 위한 도구이며 코드를 보다 일관되게 만들고 버그를 방지하는 것을 목표로 한다.

• 작성한 자바스크립트의 코드를 분석해서 문제점을 찾아내서 알려주는 도구이다.
• 작성된 코드의 구문을 분석해서 버그가 발생할 여지가 있거나 불필요한 코드, 혹은 보안상 위험한 코드 등에 대해 경고를 띄워준다.
• 설정 커스터마이징을 허용해 주기 때문에 팀 안에서 필요한 규칙을 정해서 커스텀해서 적용할 수 있다.

작성한 코드에서 문제가 될 만한 부분들을 미리 발견해서 알려주는 역할

Prettier 란?

• 자바스크립트 코드를 일관된 형식으로 포맷팅해주는 도구이다.
• 설정 커스터마이징을 허용해 주기 때문에 팀 안에서 필요한 규칙을 정해서 커스텀해서 적용할 수 있다.

작성한 코드들이 일관된 형식으로 포맷팅 되도록 해주는 역할

ESLint Prettier 사용하는 이유

• 팀 프로젝트는 여럿이 작성하게 되다보니 각자의 코드 스타일은 매우 다양하다
• 한 프로젝트안에 여러 코드 스타일이 공존하면 코드를 읽기 힘들어지고, 팀원들간 소통도 힘뿐 아니라 유지보수하기도 힘들다
• 코드스타일을 수동으로 하나하나 정해서 작성하는 것은 매우 힘들어 보인다
• 따라서 코드스타일, 포맷팅을 담당해 주는 툴들을 이용해서 자동화하고, 설정 커스터마이징을 통해 팀 컨벤션에 맞추는 방식이 효율적이다
• 개발자들은 작성해야 하는 코드 로직에 집중하고 그 외 부분은 툴에 위임할 수 있다

코드 컨벤션 툴 설치

npm 패키지 형태로 설치

1. ESLint
   ESLint 는 CRA에 내장되어 있으므로 따로 설치하지 않는다
   만약 임의로 설치한다면 오히려 내장된 eslint와 충돌할 수 있다

2. Prettier
   npm intall prettier --save-dev 명령어 실행
   --save-dev 옵션 : 개발단계에서만 활용할 devDependencies로 저장하겠다는 의미

3. eslint-config-prettier
   eslint는 linting 기능 prettier는 formmatting을 담당하는 구조가 이상적이다
   eslint에 일부 formmatting rule들이 포함되어 있다 (만약 rule들이 prettier와 다른 설정을 갖고 있다면 설정 충돌 발생)
   eslint에서 formmatting 관련 rule들을 모두 해제해야할 필요가 있다

4. eslint-plugin-prettier
   prettier에서 설정한 포맷팅이 지켜지지 않으면 eslint에러로 해당 항목을 출력하게 해주는 플러그인이다(좀 더 포맷팅을 강제로 적용하고 싶을때 사용)

npm install eslint-config-prettier eslint-plugin-prettier --save-dev 명령어 실행으로 3, 4 한번에 설치

CRA에는 eslint가 내장되어있기에 eslint는 추가 설치할 필요가 없다. 따라서, eslint 추가 설정을 위한 패키지만 설치해주고 package.json의 devDependencies에 아래와 같이 추가가 되어있는지 확인하자.

// package.json

"devDependencies": {
  "eslint-config-prettier": "^8.1.0",
  "eslint-plugin-prettier": "^3.4.1",
  "prettier": "^2.7.1",
  "stylelint": "^14.13.0",
  "stylelint-config-prettier-scss": "^0.0.1",
  "stylelint-config-property-sort-order-smacss": "^9.0.0",
  "stylelint-config-recommended-scss": "^7.0.0",
  "stylelint-scss": "^4.3.0",
},
  

팀 내의 공용 stylelint를 적용하기 위한 패키지들이다. stylelint는 .css파일만 linting 할 수 있습니다. .scss파일을 linting하기 위해서 stylelint-scss 를 추가하고, prettier와의 충돌을 피하기 위해 stylelint-config-prettier-scss를 추가하자.

VSCode의 Extension 설치

Prettier 설치
ESLint 설치

팀 프로젝트시에 커스텀이 개개인 마다 다르면 의미가 없으므로 프로젝트 폴더 안에 설정파일을 같이 저장해 두는 방식으로 설정을 공유할 수 있게 해야한다
프로젝트 폴더안에 설정파일이 있으면 개개인의 설정보다 설정파일의 설정이 우선적용됨

설정 파일 활용

1. _.vscode/settings.json

• VSCode의 설정을 관리하는 파일로 formmater설정, tabSize, formatOnSave 설정 등을 위해 사용

• 일반적으로 VSCode등 에디터의 설정파일은 공유해서 사용하지 않지만 팀프로젝트에서 동일한 세팅을 위해 설정파일 공유

 // .vscode/settings.json

 {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
   "javascript.format.enable": false,
   "eslint.alwaysShowStatus": true,
   "files.autoSave": "onFocusChange"
 }

2. .prettierrc : prettier의 설정을 관리하는 파일

 // .prettierrc

 {
   "tabWidth": 2, 
   "endOfLine": "lf", 
   "arrowParens": "avoid", 
   "singleQuote": true,
 }
   

3. .eslintrc : eslint의 설정을 관리하는 파일

• 팀원모두 맥유저일 경우

 // .eslintrc

 {
   "extends": ["react-app", "plugin:prettier/recommended"],
   "rules": {
     "no-var": "warn", // var 금지
     "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
     "no-console": ["warn", { "allow": ["warn", "error"] }], // 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 내 불필요한 중괄호 금지
   }
 }

• 팀원중 윈도우 유저가 있을경우

// .eslintrc

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-var": "warn", // var 금지
    "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
    "no-console": ["warn", { "allow": ["warn", "error"] }], // 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"
      }
    ]
  }
}

주의할점 : 현재 에디터에서 열려있는 루트 폴더에 있는 설정 파일들을 인식 해서 사용하는 것이 대부분 에디터에서 기본 설정이므로 root폴더에서 설정파일을 생성해 주어야한다

ESLint의 캐시파일 삭제

.gitignore 파일에 .eslintcache추가
:우리가 해당하는 파일들을 .eslintcache파일이 Git으로 추적되지 않도록 설정