ESLint 커스텀 룰 적용기
안녕하세요 원티드랩 개발플랫폼팀의 박연빈입니다.
이번 원티드랩 내의 eslint 커스텀 규칙을 만들었던 경험을 공유하고자 작성하게 되었습니다.
ESLint란?
ES(ECMA Script) + Lint 로써 자바스크립트 문법에서 에러를 표시해주는 도구입니다.
왜 사용하나요?
프로젝트 크기가 커지고 참여하는 사람이 많을 수록 각자의 코딩 스타일이 드러나기 마련입니다. 작성법을 합의봐도 세세하게 지키기엔 어려운 점이 있습니다. 따라서 코딩 컨벤션에 맞춰 강제적으로 적용할 수 있기 때문에 내가 놓친 점을 바로잡아 줄 수 있습니다!
ESLint의 동작 방식
Parser
- ESLint를 실행하면 Parser가 자바스크립트 코드를 분석하여 AST(Abstract Syntax Tree)를 만듭니다. 사용할 파서는 babel-eslint, Esprima 등이 있고 기본적으로는 Espree를 사용합니다.
AST
- 컴파일러에서 사용되는 자료구조로, 소스코드의 구조를 트리 형태로 표현한 것입니다. AST를 구성하고 있는 노드는 노드 타입, 노드의 위치, 하위 노드들에 대한 레퍼런스 등을 가지고 있습니다.
const url = "https://www.wanted.co.kr"위와 같이 원티드의 주소를 담고 있는 url이란 변수를 선언했다고 가정했을 때, 그림으로 나타내면 다음과 같습니다.
- VariableDeclaration, Identifier, Literal등이 노드 타입입니다.
JSON형태로 표현하면 다음과 같습니다.
{
"type": "Program",
"sourceType": "module",
"body": [
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
"id": {
"type": "Identifier",
"loc": {
"identifierName": "url"
},
"name": "url",
"_babelType": "Identifier"
},
"init": {
"type": "Literal",
"extra": {
"rawValue": "https://wanted.co.kr",
"raw": "\"https://wanted.co.kr\""
},
"value": "https://wanted.co.kr",
"_babelType": "StringLiteral",
"raw": "\"https://wanted.co.kr\""
},
"_babelType": "VariableDeclarator"
}
],
"kind": "const",
"_babelType": "VariableDeclaration"
}
]
}Linter + Rule
- Linter는 설정에 있는 규칙들을 생성한 뒤, Parser가 생성한 AST를 순회하며 AST 노드 타입과 같은 이름의 이벤트를 발생시킵니다.
- 발생한 이벤트는 규칙의 리스너에게 전달되고, 해당 노드가 규칙을 지키고 있는지 검사합니다. 규칙에 어긋난 경우 보고하고, 가능한 경우 코드를 수정해주는 Fixer를 생성할 수 있습니다.
커스텀 규칙
커스텀 규칙이 왜 필요할까요?
→ jquery가 http로 불러와져 https 보안에 막혔다는 이슈가 있었습니다.
너무나 간단하지만 https가 아닌 http로 적혀있다는 것을 발견하는데는 긴 시간이 걸릴수도 있습니다.
따라서 오타로 인한 실수를 방지하고 프론트엔드 팀의 코딩 가이드에 맞춰 개발하는데에 도움을 줄 수 있습니다.
커스텀 규칙 만들기
export default function (context) {
return {
Literal(node) {
const { value } = node;
if (typeof value === "string" && value.startsWith("http:")) {
context.report({
node,
message: `WANTED:: http보단 https를 써주세요😢`,
fix: (fixer) =>
fixer.insertTextAfterRange(
[node.range[0], node.range[0] + 5],
"s"
)
});
}
},
TemplateElement(node) {
const { raw } = node.value;
if (typeof raw === "string" && raw.startsWith("http:")) {
context.report({
node,
message: `WANTED:: http보단 https를 써주세요😢`,
fix: (fixer) =>
fixer.insertTextAfterRange(
[node.range[0], node.range[0] + 5],
"s"
)
});
}
}
};
}- 노드의 타입이 문자열일 경우, 템플릿 리터럴일 경우에 검사합니다.
- 타입이 string 이며, http:로 시작하는 경우 감지가 됩니다.
- 검사에 감지된 경우, 에러 메시지를 보여주고 수정 추천을 해줍니다.
이제 만든 플러그인을 적용해볼까요??
저희는 패키지를 만들어 사용하고 있어서 해당 패키지를 설치 후, eslint 설정파일에 넣어주었습니다.
http:로 시작하는 경우 https로 변경해달라는 메시지가 나오게 됩니다!
추가로 이러한 규칙에 대해서도 구현했습니다!
- 배열의 이름은 List로 끝나야 한다는 규칙
- 함수 이름에 대한 규칙
앞으로도 팀원들이 개발하는데에 보탬이 될 수 있는 작업들 많이 진행하고 싶습니다
읽어주셔서 감사합니다😁
참고자료
현재 원티드에서는 다양한 포지션을 채용하고 있습니다.
