ESLint는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출하는 도구다.
코딩 컨벤션이란 변수 선언 시 카멜 케이스로 작성해야한다거나,
전역 변수는 사용하지 않는 것 등의 코드 작성 시의 규칙을 뜻하고,
안티패턴은 성능, 디버깅, 유지보수 시에 부정적 영향을 줄 수 있어 지양하는 패턴이다.
Prettier는 사용자가 작성한 코드를 정해진 포맷대로 자동으로 변환해주는 도구다.
npm install -D eslint eslint-config-prettier eslint-plugin-prettier prettier
ESLint와 Prettier는 모두 코드의 품질 향상을 위한 도구인데,
두 도구는 각각 다른 코드 스타일을 적용하는 것을 지향하고 있어
두 도구를 같이 사용 시 충돌이 일어날 수 있다.
참고로 eslint-config-prettier는 "Prettier와 충돌될 수 있는 규칙들을 전부 적용하지 않는다" 고 하며
eslint-plugin-prettier는 "Prettier를 ESLint의 규칙에 따라 작동하도록 한다" 라고 적혀있다.
React + JavaScript로 프로젝트를 했을 때 적었던 eslint 설정이다.
// .eslintrc.cjs
module.exports = {
root: true, // root 옵션이 true라면 설정 파일이 있는지 찾아보기 위해 상위 폴더로 가지 않는다.
env: { browser: true, es2020: true }, // 사전 정의된 전역 변수 사용 정의
extends: [ // 추가한 플러그인에서 사용할 규칙 설정
'eslint:recommended', // 기본
'plugin:react/recommended',
'plugin:react/jsx-runtime', // jsx 파일을 사용한다면 추가 필수, react/recommended 뒤에 추가
'plugin:react-hooks/recommended', // 훅 사용에 대한 규칙 추가
],
ignorePatterns: ['dist', '.eslintrc.cjs'], // eslint 검사를 건너 뛸 디렉토리/파일 설정
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, // 검사 시 설정할 자바스크립트 옵션
settings: { react: { version: '18.2' } }, // eslint-plugin-react 플러그인 추가 시 버전 지정이 필요함
plugins: ['react-refresh'], // 추가할 플러그인
rules: { // 검사 규칙을 필요에 따라 끄거나 변경할 수 있다.
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
// 컴포넌트만 export 가능하다는 규칙 중 상수 export도 허용한다.
},
};
prettier 설정이다.
{
"singleQuote": true, // 홑따옴표(') 적용할지 여부 (false면 곁따옴표로 적용)
"semi": true, // 코드 뒤에 세미콜론(;) 붙일지 말지
"useTabs": false, // 들여쓰기를 할 때 공백으로 띄울지 탭으로 띄울지
"tabWidth": 2, // 탭 한 번에 공백 몇 번 적용할지
"trailingComma": "all", // 배열, 객체 마지막에 콤마(,) 붙일지 말지
"printWidth": 120, // 너비 120보다 코드가 길어지면 자동 줄바꿈 적용
"bracketSpacing": true, // 객체 작성 시 대괄호의 처음과 끝에 공백 적용 여부
"arrowParens": "always", // 화살표 함수 작성 시 괄호 적용 여부
"endOfLine": "lf" // 줄바꿈 시 lf를 적용할지 crlf를 적용할지
}