3️⃣

🖥 린트(Lint)

4 - 1. ESLint

• 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적
• 포맷팅 / 코드품질
• 포맷팅 : 코드를 일관되게 만드는것
• 코드품질 : 코드가 오류를 가지고 있을때 사전에 체크

• 😶 설치 및 사용법
• $ npm i eslint
• .eslintrc.js 생성 / eslint는 이파일을 읽고 eslint를 실행한다.
• eslint rules 코드를 검사하는 규칙, 환경설정에 추가해야만 코드를 검사
• rules

// .eslintrc.js
module.exports = {
    rules : {
        "no-unexpected-multiline" : "error"
        // 위의 규칙과 어긋나는게 있다면 "error" 를 반환
    }
}

//app.js
console.log()
(function() {})()

• $ npx eslint app.js

• app.js에 세미콜론을 붙여주면 에러는 발생하지 않는다.
• .eslintrc.js 에 “no-extra-semi” 를 붙여준다면 세미콜론이 많은 경우에도 “error”을 반환한다.
• 이때 터미널에 –fix 가 뜨는데 $ npx eslint app.js –fix 입력하면 자동으로 수정된다.

• 해당 랜치 모양이 있는 규칙들은 자동으로 수정이 된다.

• 이러한 규칙을 세트로 만들어 놓은것 -> Extensible Config

// .eslintrc.js
module.exports = {
  extends: ["eslint:recommended"],
  // 규칙들 중 왼쪽 체크된 규칙들을 모두 사용할수있음
};

• 위 뿐만 아니라 eslint에서 제공하는 설정 외의 자주 사용하는 두가지 : airbnb / standard

• eslint 설정은 .eslintrc.js 로 직접 작성하기 보다는 init 명령어 사용하는것이 훨씬 수월 ($ npx eslint –init)
• To check syntax only : 신택스만 체크할것인가?
• To check syntax and find problems : 신택스체크, 코드포맷팅, 품질까지 체크할것인가? (기본)
• To check syntax, find problems, and enforce code style : 신택스체크, 코드포맷팅, 품질, 코드 스타일(airbnb ,,)까지 체크할것인가 ?

기본값

• .eslintrc.js 에 내용들도 위에 셋팅한 값으로 업데이트 된다.

4 - 3. ESLint(풀이)

• $ npx eslint –init 이후 package.json scripts에 “lint”: “eslint src –fix” 추가

  src 안에있는 모든 코드를 eslint로 검사하겠다. –fix 로 자동수정하겠다.

• $ npm run lint

4 - 4. 프리티어

• eslint 보다 코드를 더 예쁘게 만들어준다.
• 코드를 일관적으로 만들어주는 포맷팅 -> eslint 보다 더 강화
• 😶 설치 및 사용법
• $ npm i prettier
• $ npx prettier app.js
• $ npx prettier app.js –write -> –write 옵션을 주면 파일이 변경된다.
• eslint 가 고치지 못해서 개발자에게 직접 고치라고 던져주는 부분을 prettier은 자동으로 고칠수 있다.

• eslint 와 Prettier를 같이 사용해야 한다 -> 하나로 통합
• $ npm i eslint-config-prettier

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "eslint-config-prettier"],
    // recommended 설정들 중에 prettier와 겹치는게 있다면 꺼버리는 설정
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};

• $ npx eslint app.js –fix
• $ npx prettier app.js –write
• 하지만 매번 이렇게 두번 쓰는것은 불편 -> $ npm i eslint-plugin-prettier
• eslint-plugin-prettier : prettier에 있는 모든 규칙을 eslint에 넣어버리는 것. -> eslint만 돌리면 prettier까지 같이 돌려지는 효과

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "eslint-config-prettier"],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    // 추가되는부분
    plugins: [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error"
    }
};

• $ npx eslint app.js –fix
• 위의 방법과 문서처럼 npm 으로 두개의 패키지 설치 -> 아래처럼 설정을 추가하면 된다.
• 위, 아래 모두 같은 효과가 나온다.

// .eslintrc.js
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

4 - 7. 자동화

• 작업하는동안 명령어로 수작업하기에는 무리가 있기때문에 자동화 필요
• 깃 훅 이용 -> $ npm i husky

// package.json
  "husky": {
    "hooks": {
      "pre-commit": "echo \"이것은 커밋전에 출력됨\""
      // 커밋되기전에 위의 메세지가 출력된다.
    }
  }

  를 아래와 같이 수정했다.
"husky": {
    "hooks": {
      "pre-commit": "eslint src/app.js --fix"
    }
  }

• 하지만 내용이 점점 많아지게되면 lint가 느려지게된다.
• git 으로 commit 할때 commit한 파일만 Lint를 돌리면 lint시간이 단축된다. -> $ npm i lint-staged
• package.json 에 설정을 추가해준다.

// package.json
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --fix"
  }

• 린트에 통과하지 못하면 커밋도 못하게된다.
• 이런식으로 코드검사하는 부분을 자동화 해야만 일관되게 코드를 유지할 수 있다.

• 에디터확장도구
• vscode 마켓에서 eslint 설치
• 저장할때 자동으로 eslint확인
• 설정 settings.json

// - 설정 settings.json
"editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },