[ESLint] ESLint 설치하기, 설정 방법

🎯 ESLint 설치 및 사용법

• 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일을 유지(포맷팅)하여 개발자가 쉽게 읽도록 코드를 만들어준다.

 

📝 설치 및 설정

# install ESLint 
npm install eslint --save-dev

# set up a configuration file
npx eslint --init

질문	해석	나의 답변
How would you like to use ESLint?	ESLint를 어디에 사용할거니?	To check syntax and find problems
What type of modules does your project use?	플젝에서 어떤 타입의 모듈을 사용할거야?	CommonJS (require/exports)
Which framework does your project use?	프레임워크 뭐 사용해?	None of these
Does your project use TypeScript?	TS 사용할거야?	No
Where does your code run?	코드 어디서 실행 시킬거야?	Browser, Node
What format do you want your config file to be in?	파일 포맷 어떤걸로 할거야?	JavaScript
Would you like to install them now with npm?	이렇게 설정한 내용을 바탕으로 npm으로 설치할거야?	Yes

 

📝 .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 저장 시 자동교정

• 확장 프로그램 설치

 

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

• settings.json에서 위 설정 추가

 

📌 참고

• Getting Started with ESLint
• VS Code ESLint 저장 시 자동 Fix, Format 설정하기
• [React] ESLint
• ESLint 설치와 사용법