📚ESLint?

ESLint란 ES(EcmaScript) + Lint(에러 코드 표식) 합성어로 Javascript코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어줍니다.

---

🧰설치 및 설정

🛠 ESLint 설치

• ESLint를 설치하려면 다음과 같이 입력합니다:

npm install eslint --save-dev

⚙ 설정 파일 생성 및 초기화

• ESLint 패키지를 설치 후 환경 설정 파일이 생성되지 않았기에 초기화를 위해 다음과 같이 입력합니다:

npx eslint --init 

• 위 명령어 입력하면 여러 선택지가 나오는데, 프레임워크나, 타입스크립트 사용 여부 등은 각자 상황에 맞게 선택하면 됩니다.

📝 .eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 13
    },
    "rules": {
    }
};

• env : 프로젝트 환경 설정
• extends : ESLint 확장
• rules : 프로젝트 내에서 강제할 규칙 정의
  
  

---

📖사용법

🔍 검사하기

npx eslint 검사하고_싶은_파일명.js
npx eslint 검사하고_싶은_파일명.js --fix// 자동 코드

• 터미널 창에서 오류 확인 가능
• npx eslint 원하는_파일명.js --fix 명령어로 자동 교정
• 하지만, 이처럼 파일마다 검사하는 것은 비효율적
  
  

🔍 ESLint 효율적으로 이용하기

• ESLint 확장 프로그램을 이용하면 저장 시 자동으로 교정
• VS Code에서 ‘ESLint’ 확장 프로그램 설치
  

• 기본 설정(Ctrl + . ) 창에서 ‘code action on save’입력

  "editor.codeActionsOnSave": {
				  "source.fixAll": true, 
  },    
  "editor.formatOnSave": true,

• ‘settings.json에서 편집’을 눌러 위와 같이 파일 추가 or 수정
  
  

---

📌 참고

• https://lakelouise.tistory.com/199
• https://kavoom2.github.io/node.js/Eslint/
• https://deku.posstree.com/ko/react/eslint/
• https://eslint.org/docs/latest/use/getting-started

---

✨기타

• ESLint & Prettier 사용해보기
  https://velog.io/@taro_77/VSCode-%EC%97%90%EC%84%9C-Eslint-Prettier-%EC%82%AC%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

---