ESLint
ESLint는 Javascript 코드를 실행하지 않고 코드에서 문법적인 오류를 찾아주거나 일부는 더 나은 코드로 정정하는 린트 도구 중 하나다. 코드 품질과 포맷팅을 검사한다.
- 포맷팅
일관된 코드 스타일을 유지하도록 하여 개인이나 팀 단위에서 일관되고 가독성 좋은 코드를 만들 수 있도록 도와줍니다. 예를 들면 들여쓰기 규칙이나 작은따옴표나 큰따옴표의 통일 등을 통해 코드를 일관되게 만들어서 가독성을 올려준다.
- 코드 품질
어플리케이션의 잠재적인 오류나 버그를 예방하기 위해서 검사한다. 세미콜론의 위치에 따라 발생할 수 있는 잠재적 위협이나 사용하지 않는 변수를 경고해줘서 잠재적인 오류 발생을 줄여준다.
설치
npm i -D eslint설정 파일 작성
root노드에 .eslintrc.js 환경 설정 파일을 생성한다.
// .eslintrc.js
module.exports = {}세부 설정들을 알아보자
rules 속성
규칙을 하나하나 세세하게 제어하기 위해 사용되는 속성이다. ESLint 공식 문서의 Rules 메뉴에서 세세한 규칙 목록을 확인 할 수 있다.
// .eslintrc.js
module.exports = {
rules: {
"no-unexpected-multiline": "error",
},
}위의 예시는 no-unexpected-multiline 규칙을 적용한 것이다. 이 규칙은 세미콜론을 사용하지 않고 줄바꿈을 하는 등의 혼란스러움을 유발하는 여러 줄의 코드를 경고해 준다.
extends 속성
rules에서 설정할 수 있는 규칙들을 모아놓은 통합 설정이라고 보면 된다. ESLint 에서는 기본적으로 eslint:recommended 설정을 제공한다.
// .eslintrc.js
module.exports = {
extends: [
"eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
],
}만약 이 설정 외에 규칙이 더 필요하거나 설정 중 일부를 변경하고 싶다면 rules 속성에 추가하거나 덮어씌울 수 있다.
ESLint에서 제공해주는 설정 외에도 자주 사용하는 두가지 설정이 있다.
-
airbnb
airbnb 스타일 가이드를 따르는 규칙 모음이다. eslint-config-airbnb-base 패키지로 제공된다.
-
standard
자바스크립트 스탠다드 스타일을 사용한다. eslint-config-standard 패키지로 제공된다.
env 속성
eslint:recommended extends를 사용하거나 no-undef rules가 적용되어 있을 경우 /*global */주석 에서 언급되지 않는 한 선언되지 않은 변수의 사용을 허용하지 않는다. 이 경우 env 속성에 허용할 전역 객체를 등록하여 해결 할 수 있다.
대표적으로 3가지가 있다.
- browser: 브라우저에서 사용되는
document나window객체들을 등록한다. - es2022:
const,let,Promise등 최신 Javascript에서 사용되는 객체들을 등록한다. - node:
require문 등 node.js 에서 사용되는 객체들을 등록한다.
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2022: true,
node: true,
},
}plugins 속성
ESLint가 기본으로 제공하는 규칙(rule) 외에도 추가적인 규칙을 사용할 수 있도록 만들어 주는 플러그인들을 등록한다. 대표적으로 prettier, react, @typescript-eslint 플러그인 등이 있다.
// .eslintrc.js
module.exports = {
plugins: ["prettier", "react"]
}parser와 parserOptions 속성
자바스크립트 코드들은 실제로 브라우저에서 작동하는 코드와는 다른 형식의 코드를 짜는 경우가 다수 있다. 대표적으로 타입스크립트나 JSX같은 자바스크립트 확장 문법을 사용하는 경우가 있다. ESLint는 기본적으로 순수한 자바스크립트 코드만 이해할 수 있기 때문에 자바스크립트 확장 문법으로 작성한 코드를 린트하기 위해서는 그에 맞는 파서(parser)를 사용하도록 설정해야 된다.
// .eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
parserOptions: {
// 프로젝트에 사용할 ECMAScript 버전을 명시
ecmaVersion: "latest",
// import, export 구문을 사용하기 위한 설정
sourceType: "module",
},
}위에 예시는 parser에 @typescript-eslint/parser 를 설정하고 parserOptions을 설정한 예이다.
기본 설정 파일
위에서 설명한 옵션들로 기본 설정 파일을 생성해보자
// .eslintrc.js
module.exports = {
extends: [
"eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
],
env: {
// 브라우저에서 사용되는 `document` 나 `window` 객체들을 등록한다.
browser: true,
// `const`, `let`, `Promise` 등 최신 Javascript에서 사용되는 객체들을 등록한다.
es2022: true,
// `require`문 등 node.js 에서 사용되는 객체들을 등록한다.
node: true,
},
parserOptions: {
// 프로젝트에 사용할 ECMAScript 버전을 명시
ecmaVersion: "latest",
// import, export 구문을 사용하기 위한 설정
sourceType: "module",
},
}.eslintignore
예외를 원하는 폴더를 설정할 수 있다.
.eslintignore 파일을 root폴더에 생성한 후 다음 내용을 추가해 보자
dist
build빌드 결과물이 생성되는 폴더인 dist, build 폴더를 예외로 둘 수 있다.
Prettier
Prettier는 실행 전의 코드를 분석하여 깔끔하고 일관된 코드스타일을 유지시켜 주는 코드 포매터이다. ESLint의 포매팅 보다 더 많은 업무를 수행할 수 있다. 반면 코드 품질과 관련된 기능을 하지 않는 것이 ESLint와 다른 점이다. 서로 특화된 역할이 다르기 때문에 Prettier는 ESLint를 함께 사용한다.
설치
npm i -D prettier eslint-config-prettier eslint-plugin-prettier설정 파일 작성
root노드에 .prettierrc.js 환경 설정 파일을 생성한다.
// .prettierrc.js
module.exports = {
// 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 줄바꿈) : 기본: 80
printWidth: 100,
// 탭 너비 설정 - 기본: 2
tabWidth: 2,
// 들여쓰기에서 공백 대신 탭 사용 여부 - 기본: false
useTabs: false,
// 세미콜론(;) 사용 여부 - 기본: true
semi: true,
// 작은따옴표 인용 부호('') 사용 여부 - 기본: false
singleQuote: false,
// jsx파일에서 작은따옴표 인용 부호('') 사용 여부 - 기본: false
jsxSingleQuote: false,
// 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부 - 기본: es5
trailingComma: "es5",
// 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar }) - 기본: true
bracketSpacing: true,
// 화살표 함수 식 매개변수 한개일 때 () 생략 여부 (ex: (a) => a) - 기본: always
arrowParens: "always",
};자주 사용되는 설정들은 기본 값으로 설정되어 있기 때문에 변경할 옵션만 적용하도록 하자. 더 많은 옵션은 전체 옵션에서 볼 수 있다.
ESLint와 통합
이제 코드 품질의 관리는 ESLint, 포매팅은 Prettier를 사용하여 함께 쓰는 방법을 알아보자
중복되는 규칙 처리
ESLint와 Prettier 모두 포매팅을 수행하기 때문에 서로 옵션이 충돌 할 수 있다. 그중에 우린 Prettier를 메인으로 사용하기 때문에 중복되는 ESLint 규칙을 비활성화 하겠다. Prettier는 이러한 ESLint와 통합 방법을 제공한다. eslint-config-prettier 는 Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 한다.
ESLint 설정 파일의 extends 배열에 eslint-config-prettier" 를 추가한다.
// .eslintrc.js
{
extends: [
"eslint:recommended",
"eslint-config-prettier"
]
}Prettier 규칙을 ESLint 규칙에 추가하기
eslint-plugin-prettier플러그인을 사용하면 Prettier 규칙을 ESLint 규칙에 추가할 수 있다. Prettier의 모든 규칙이 ESLint로 추가 되기때문에 ESLint만 실행하면 모두 적용된다.
ESLint 설정 파일에서 pulugins와 rules에 설정을 추가한다.
// .eslintrc.js
{
plugins: [
"prettier"
],
rules: {
"prettier/prettier": "error"
},
}단, 여기서 추가하는 prettier 설정은
.prettierrc.js파일로 바꾼 설정이 아닌eslint-plugin-prettier플러그인에 기본적으로 설정된 규칙이 추가된다.
기본 제공과 다른 설정을 추가 하고 싶다면 rules에 prettier 옵션을 추가하면된다.
// .eslintrc.js
{
"prettier/prettier": [
"error",
{
singleQuote: true,
endOfLine: "auto",
}
]
}.prettierignore
ESLint와 마찬가지로 예외를 원하는 폴더를 설정할 수 있다.
.prettierignore 파일을 root폴더에 생성한 후 다음 내용을 추가해 보자
dist
build빌드 결과물이 생성되는 폴더인 dist, build 폴더를 예외로 둘 수 있다.
참고 자료
