[JavaScript] naver ESLint 적용하기

본 게시글은 next14 버전과 ESLint 8버전을 바탕으로 작성되었습니다.

 

---

 

목차

eslint 버전 8

naver eslint 적용해 보기

 

 

---

 

 

---

[eslint 버전 8]

이전 게시글에서는 ESLint의 개념과 필요성에 대해 살펴보았다.

// 개념 url

이 글에서는 ESLint를 설치하고 설정해 보면서 어떻게 동작하는지 보겠다.

 

폴더에 package.json을 생성해 준다.

npm init

저는 각 항목들은 스킵해 주었습니다. (항목들 모두 엔터)

npm init

<항목 내용 정리>

• package name : 패키지 이름
• version : 프로젝트의 버전
• description ; 프로젝트에 대한 설명
• entry point(index.js) : 프로젝트의 진입점 파일
• test command : npm 스크립트를 정의하는 부분
• git repository : 깃 리포지터리
• keywords : 패키지를 설명하는 키워드
• author : 이 프로젝트의 작성자 정보(이름, 이메일, 웹사이트 등을 포함)
• license : (ISC) : 이 프로젝트의 라이선스 종류

<예시로 완성된 형태>

{
"name": "a",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
"author": "",
"license": "ISC"
}

 

폴더에 package.json이 생성됩니다.

package.json

 

이제 eslint 버전 8을 설치해 보도록 하겠습니다.

eslint 버전 9가 나왔지만 주요 변경사항의 안정성 확보를 위해 검증된 버전 8을 사용했습니다.

 

npm install -D eslint@8.57.1

<-D>

• 의미 : --save-dev의 축약형
• 용도 : 개발 중에만 필요한 패키지로 설치
• 설치한 패키지를 devDepencies 항목에 추가

{
	"devDependencies": {
		"eslint": "8.56.0"
	}
}

npm install -D eslint@8.57.1

 

.eslintrc.js : eslint 설정 파일을 생성한 후 규칙을 생성하였다.

규칙 생성

 

이 규칙은 코딩라인 끝에는 세미콜론을 항상 붙여주고 따옴표는 큰따옴표를 사용한다는 규칙이다.

module.exports = {
    rules: {
        semi: ["error", "always"],
        quotes: ["error", "double"],
    },
    env: {
        es6: true,
    },
};

index.js를 생성한 후 코드를 작성하였다.

index.js

const a = '문자열 입니다.';
const b = "b";
const c = 1;
function Test() {
    console.log(a)
}

 

<동작 확인>

ESLint 동작을 확인하는 방법은 두 가지 방법이 있다.

1. lint 명령어를 통한 수동 확인
2. VSCODE에서 실시간 확인

 

1. Lint 명령어를 통한 수동 확인

eslint 명령어를 입력하면 다음과 같은 결과가 나타난다.

명령어를 입력하면 모든 파일에 대해 규칙을 검사한다.

npx eslint .

npx eslint .

quote의 규칙은 doublequote 인데 singlequote를 사용해서 규칙에 어긋났다.

 1:11  error  Strings must use doublequote  quotes

 

semi의 규칙은 항상 콜론을 붙여야하는데 콜론을 붙이지 않아서 규칙에 어긋났다.

  5:19  error  Missing semicolon             semi

이런 오류들을 ESLint가 잡아준다.

ESLint는 오류만 잡는게 아니라 --fix를 통해서 코드를 수정할 수 있다.

npx eslint . --fix를 입력하면 코드가 자동으로 수정된다.

npx eslint . --fix

npx eslint . --fix

 

2. VSCODE에서 실시간확인

비록 지금은 코드가 간결해서 명령어를 입력해도 번거로움이 없지만 프로젝트가 점점 커지기 시작하면 터미널로 eslint를 확인하는 것은 불편하다.

vscode extention에서 eslint를 검색해서 설치한다.

vscode extention서

설치 후 코드를 확인해 보면 빨간 줄이 나타나는 것을 볼 수 있다.

빨간줄

devDependencies에 있는 eslint는 CLI로 실행하게 된다.

devDependencies

 

자바스크립트 파일에 있는 빨간 줄은 개발자가 설정한 .eslintrc.js 파일에서 vscode extention이 실시간으로 오류를 탐지해 준다.

그래서 CLI로 매번 터미널에서 실행시키지 않아도 된다.

 

---

[naver eslint 적용해 보기]

프로젝트에 eslint를 적용해 보자

next14 버전과 eslint는 naver를 사용했다.

npx create-next-app@14.2.29 프로젝트 명

프로젝트를 생성할 때 ESLint와 함께 설치한다.

프로젝트 설치

프로젝트 설치

프로젝트 생성이 완료되면 

npm install eslint-config-naver

npm install eslint-config-naver

npm install --save-dev eslint-config-prettier

npm install --save-dev eslint-config-prettier

 

.eslintrc.json에 "naver", "prettier"추가

naver 추가

// .eslintrc.json
{
    "extends": ["next/core-web-vitals", "next/typescript", "naver", "prettier"]
}

 

npm run lint

오류가 없다면 성공이다.

하지만 나는 오류가 났다.

npm run lint 오류

React 오류

24:13  Error: 'React' is not defined.  no-undef

이 오류는 React를 import 하지 않아서 생긴 오류이다.

React를 import 한 후 npm run lint를 하면 오류가 발생하지 않는다.

import React from "react";

 

naver에서 사용하는 eslint가 적용되었다.

naver eslint 적용 성공

 

// 충돌 해결법 url

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

https://www.youtube.com/watch?v=RYTWkWOI_eg

 

https://www.youtube.com/watch?v=Be9q0k5BJ_s

 

https://www.youtube.com/watch?v=M6NVLZx2m5Y

 

https://github.com/naver/eslint-config-naver/blob/master/STYLE_GUIDE.md

eslint-config-naver/STYLE_GUIDE.md at master · naver/eslint-config-naver