ESLint 와 Prettier 설정해보기

* ES 가 뭐에요?

ES 는 ECMA Script를 뜻하고,
자바스크립트를 표준화 하기위해 만들어진 규격이다.

 

* lint (린트)는 뭐에요?

lint는 소프트웨어 개발에서 코드의 오류, 버그, 스타일 문제 등을 찾아내는
정적 분석 도구 이다.

따라서 lint는 코드 오류 및 스타일 문제를 찾아내는 도구로 일반적인 용어이고,
ESLint는 JavaScript에서 사용되는 구체적인 린트 도구 중 하나이다.

 

 

* ESLint 를 적용하는 순서

 

1. Node.js 설치:

ESLint를 사용하려면 Node.js가 설치되어 있어야 한다.

Node.js는 공식 사이트(https://nodejs.org/)에서 다운로드하여 설치할 수 있다.

2. 프로젝트 디렉토리 설정:

ESLint를 사용할 프로젝트 디렉토리로 이동한다.

3. npm 초기화:

프로젝트 디렉토리에서 npm을 사용하여 프로젝트를 초기화한다.

터미널 또는 명령 프롬프트에서 다음 명령을 실행해주면 된다.

 

   npm init -y

 

 

 

4. ESLint 설치:

npm을 사용하여 프로젝트에 ESLint를 설치한다.

 

   npm install eslint --save-dev

 

 

 

5 - 1. 설정 파일 생성:

ESLint 설정 파일을 생성해준다.

보통 .eslintrc  또는 .eslintrc.json 파일로 생성하고 저장한다.

수동으로 생성해도 된다.

프로젝트 루트 디렉토리에 .eslintrc.json 파일을 생성해주면 된다.

 

 

5 - 2. 명령어를 통해 생성하는 방법:

 

   npx eslint --init

 

이 명령을 실행하면 몇 가지 질문을 받게 되는데

예를 들어,

사용하려는 스타일 가이드 (예: Airbnb, Standard, Google 등)를 선택하고

필요한 구성 옵션을 설정할 수 있다.

 

6. 코드에 ESLint 적용:

ESLint를 사용하여 JavaScript 파일을 분석하고 코드의 문제를 표시.

프로젝트 내 JavaScript 파일에 ESLint를 적용하려면

터미널에서 다음 명령을 실행하면 된다.

 

   npx  eslint  실행할파일이름.js

 

 

 

* eslint 확장자

ESLint는 

JSON, YAML, JavaScript와 같이 다양한 형식의 설정 파일을 지원한다.
설정 파일의 이름은 항상 .eslintrc가 되야하며, 
원하는 포맷에 따른 파일 확장자를 사용해야 한다.

예를 들어, 

JSON 파일 포맷을 사용하고 싶다면 .eslintrc.json, 
YAML 파일 포맷을 사용하고 싶다면 .eslintrc.yml이나 .eslintrc.yaml 로 생성해서 사용하면 된다.

* eslint 가 설정파일을 탐색하는 방법

ESLint는 현재 린트(lint) 대상의 파일이 위치한 폴더 안에 
설정 파일이 있는지 우선적으로 확인해보고,
없으면 그 상위 폴더를 한 단계 씩 거슬러 올라가면서 설정 파일을 찾게된다.

root 옵션이 true로 설정되어 있는 설정 파일을 만나면
더 이상 상위 폴더로 올라가지 않는다.

예를 들어서,
프로젝트별 설정 파일에는 root 옵션을 false로 설정하고, 
코드 저장소 최상위 경로에는 root 옵션을 true로 설정하면 
코드 저장소의 공통 설정과 
프로젝트 별 특화 설정을 분리해서 
관리할 수 있어서 편하다.

eslint 설정 파일이 하나만 있는 레파지토리에서도 
혹여나 상위 폴더에 있는 설정 파일에 영향을 받는 일이 없도록 
root 옵션을 true로 설정하는게 좋다.

 

 

.eslintrc.js 에 적힌 린트 설정을 알아보겠다.

// .eslintrc.js


module.exports = {
  
    env: {
        browser: true,
        node: true,
        es2021: true, 
    },

    root: true, 
    extends: ["eslint:recommended", "plugin:prettier/recommended"],

    parser: "@babel/parser",
    parserOptions: {
        ecmaVersion: "latest", 
        sourceType: "module", 
    },


    rules: {
        "prettier/prettier": ["error"], 

        "import/no-unresolved": [
            "error",
            {
                caseSensitive: false,
            },
        ],
    },
};

 

 

 

* env

 ESLint는 기본적으로

미리 선언하지 않고 접근하는 변수에 대해서는 오류를 내기 때문에, 
각 실행 환경(runtime)에서 기본적으로 제공되는 전역 객체에 대해서는
설정을 통해 알려줘야 한다. 

이러한 역할을 실행 파일의 env 옵션이 담당한다.

 

ESLint로 린트(lint)를 할 자바스크립트 코드가 
브라우저에서 실행될 수도 있고,
NodeJS에서도 실행될 수 있다면

두 가지 실행 환경에서 접근 가능한 모든 전역 객체를 다음과 같이 등록해줄 수 있다.

browser: true
node: true

 

es2021: true 는

자바스크립트의 최신버전인 ES2021에 대한 지원을 활성화 하는 설정이다. 

   

   env: {

        browser: true,  

        node: true,

        es2021: true,  

    },

 

 

 

* root

root 옵션이 true로 설정되어 있는 설정 파일을 만나면,

설정 파일을 찾기위해 더 이상 상위 폴더로 올라가지 않는다.

 

   root: true

 

 

 

* extends

   

   extends: ["eslint:recommended", "plugin:prettier/recommended"]

 

 

설정 파일의 extends 옵션을 통해서

공개해놓은 설정을 그대로 가져와 설정으로 활용할 수 있다.
대부분의 ESLint 플러그인은 추천 설정을 제공한다.

extends 옵션은 이러한 추천 설정을 사용할 때도 사용된다.
eslint 와 prettier 의 추천 설정을 그대로 가져와 적용함.

 

 

 

* parser 와 parserOptions

 

 

   parser: "@babel/parser",

 

    parserOptions: {

        ecmaVersion: "latest", 

        sourceType: "module"

    }

 

 

 

- parser

 ESLint는 
 기본적으로 순수한 자바스크립트 코드만 이해할 수 있기 때문에 
 자바스크립트의 확장 문법이나 최신 문법으로 작성한 코드를 린트(lint)하기 위해서는 
 그에 상응하는 파서(parser)를 사용하도록 설정해줘야 한다.
  
 parser는 ESLint에서 코드를 해석하는 데 사용할 파서를 지정하는 부분이다.
 이 설정은 Babel이 제공하는 ESLint 파서인 @babel/parser 를 사용하도록 지시하는 것이다.

 

Babel은 주로 최신 JavaScript 기능을 사용하고,
특히 JSX, TypeScript 등과 같은 확장된 문법을 사용하는 프로젝트에서 많이 사용된다. 
@babel/parser 는 이러한 환경에서 ESLint를 사용할 때

Babel의 파싱 능력을 이용하여 코드를 분석하고 검사하는 데 사용된다.

 Babel의 ESLint 파서인 @babel/parser 는

 Babel을 통해 JavaScript 코드를 파싱하고
 AST(Abstract Syntax Tree)를 생성하는 데 사용된다. 

 

* AST에 대한 참고 자료 https://jake-seo-dev.tistory.com/124

 

이를 통해 ESLint가 JavaScript 코드를 이해하고

정적 분석을 수행 하여 코드 품질을 검사할 수 있게 해준다.

- parserOptions

javascript 코드를 분석하는 데에 사용되는 Parser의 옵션을 설정할 때 쓰인다.

 

ecmaVersion:

사용하려는 ECMAScript 버전을 지정한다.

예를 들어,

ecmaVersion: "latest" 는

사용가능한 최신 버전의 ECMAScript 의 가장 최신버전을 사용하도록  지시하는 것이다.

이 옵션을 통해 해당 버전의 새로운 기능과 문법을 지원할 수 있습니다.

sourceType: 

parser의 export 형태를 설정한다.

대부분의 경우 "script"  또는 "module" 값을 가진다.

"script"는 일반적인 스크립트를 의미하고,

"module"은 ECMAScript 모듈을 사용한다는 것을 나타낸다.

 

 

 

* rules

설정 파일에서 rules 옵션은 

각각의 규칙을 제어하기 위해서 사용된다.

사실상 eslint의 핵심이라고 보면 된다.

 

공식 홈페이지에서 여러 rules 들에 대해서 공유하고 있으니

참고해서 적용하면 된다.

설정에 따라서,

어떤 rule에는 error을 띄울 수도 있고,

어떤 rule에는 warning를 띄울 수도 있다.

일반적으로는 extends 옵션을 통해서 설정된 규칙을 덮어 씌우고 싶을 때 사용한다.
rules 옵션에 추가된 규칙은 extends 옵션을 통해서 가져온 규칙보다 우선 시 한다.

 

 - prettier/prettier

   

   "prettier/prettier": ["error"]

 

 

이 설정은 eslint에서 Prettier 규칙을 적용하도록 지시하는 것이다.

 

ESLint와 Prettier를 함께 사용할 때,

코드 스타일을 일관되게 유지하고

통일성 있는 포맷을 유지하기 위해

ESLint와 Prettier를 통합하는데 사용된다.

 

그중에서
"prettier/prettier": ["error"] 는 ESLint의 규칙 중 하나인데, 

이 설정은 Prettier에 의해 정의된 규칙과 충돌하는 ESLint 규칙을 에러로 표시한다.

즉, 코드에서 Prettier에 의해 지정된 스타일과 충돌하는 ESLint 규칙을 발견하면 에러로 표시해준다.

이 설정을 사용하면 

ESLint와 Prettier가 충돌하는 스타일 규칙을 발견하면 

ESLint에서 오류를 표시하여 코드를 Prettier의 스타일로 통합하도록 유도할 수 있다.

 

- import/no-unresolved

 

        "import/no-unresolved": [

            "error",

            {

                caseSensitive: false,

            }

        ]

 

 

import/no-unresolved는 

ESLint 플러그인인 eslint-plugin-import에서 제공하는 규칙 중 하나이다.

 

이 규칙은 import 구문에서 사용된 모듈 경로가 해석되지 않는 경우를 감지하고 보고하는 역할을 한다.

 

JavaScript 또는 TypeScript 파일에서

import 구문을 사용하여 모듈을 불러올 때, 

해당 모듈의 경로가 잘못되었거나 해석되지 않는 경우에

ESLint에서 경고 또는 에러를 표시해준다.

 

"error"

=> 이 설정은 import 문에서 사용된 모듈 경로가 해석되지 않는 경우에 에러를 발생시킨다.

 

caseSensitive: false

=> 이 설정은 대소문자 구분을 무시하도록 ESLint에 지시하는 옵션이다.

 

보통 파일 경로나 모듈 이름과 같은 문자열은 대소문자가 구분되어야 하지만, 

때로는 파일 시스템이나 특정 환경에서 대소문자를 구분하지 않는 경우가 있다.

 

이 옵션을 사용하면

ESLint가 모듈 경로 또는 파일 경로를 검사할 때,

대소문자를 무시하고 일관된 규칙을 적용할 수 있다.

 

참고로 최신 eslint에서는 코드 포매터 기능을 제거했다고 한다.

https://eslint.org/blog/2023/10/deprecating-formatting-rules/

Deprecation of formatting rules - ESLint - Pluggable JavaScript Linter

지난 11월 3일 릴리스된 ESLint v8.53.0에서 포매팅 규칙을 deprecate 처리되었고, 

이후 v10에서 완전히 제거할 계획을 발표했다.
주된 이유로는 언어적 발전에 따른 구문들의 변화와 

프레임워크 (주로 React )의 사용이 폭발적으로 증가함에 따라

스타일 규칙을 동결해 관리하고자 했지만,

더 이상 이러한 변화들과 사용자 요구를 따라잡기 어려워졌기 때문이라고 밝히고 있다.

대신 코드의 형식을 관리하고자 한다면, 

코드 포매터인 Prettier 또는 Rust 기반의 dprint 를 사용할 것을 권장한다.

 

 

 

 

 

Prettier

 

Prettier는 코드 포맷팅 도구로,
코드의 가독성을 향상시키고 일관된 스타일을 유지하는 데 도움을 주는 도구이다.
코드의 포맷을 자동으로 조정하여 
일관된 스타일로 통일시켜주고,
들여쓰기, 공백, 따옴표 사용, 줄 바꿈 등을 
자동으로 처리해준다.

 

 

 

어? 그렇다면 ESLint 랑 Prettier는 결이 비슷한거 같은데,
둘의 차이점이 뭐에요?

eslint는
코드의 품질을 검사하고,
문제가 있는 패턴을 식별하여
개발자에게 알려주는 목적을 가지고 있고.

Prettier는
코드를 자동으로 포맷팅해서
일관된 스타일을 유지하고 가독성을 높여주는데에 목적을 가지고 있다.

 

 

 

 

1. Prettier 설치

Prettier를 사용하기 위해 

프로젝트 디렉토리에서 다음 명령어를 사용하여 Prettier를 설치해준다.

 

   npm install --save-dev prettier

 

 

 

 

2. 설정 파일 생성 (선택 사항)

프로젝트 루트에

.prettierrc 또는 prettier.config.js 파일을 생성해서

Prettier 설정을 할 수 있다.

이 파일을 사용하지 않으면 Prettier의 기본 설정이 적용된다.

 

다음은 .prettierrc 을 생성해서, 설정을 해보겠다.

 

.prettierrc

 

   {

       "singleQuote": true,

       "printWidth": 120,

       "semi": false,

       "trailingComma": "none",

       "arrowParens": "avoid",

       "useTabs": true

   }

 

 

* singleQuote

문자열을 기본적으로 " 기호(쌍따옴표)를 사용해서 표시한다. 
대신에 ' 기호(홑따옴표)를 사용하고 싶다면 
singleQuote 옵션을 true로 설정해주면 된다.

 

* printWidth 
기본적으로 한 줄에 글자수를 최대 80자로 제한하고 있다. 
한 줄에 최대 글자수를 늘리고 싶다면
printWidth 옵션을 사용하면 된다.

 

* semi 
각 문장(statement) 뒤에 ; (세미콜론)을 자동으로 붙여준다. 
이 세미콜론을 생략하고 싶다면
semi 옵션을 false로 설정해주면 된다.

* trailingComma 
여러 줄에서 걸쳐서 배열이나 객체, 매개변수가 작성된 경우 
Prettier는 마지막 요소 뒤에도 , 기호(쉼표)를 붙여준다.
이 쉼표를 제거하고 싶다면 
trailingComma 옵션을 "none"으로 설정하면 된다.

trailingComma 옵션의 기본값을 "all"로 하는 이유는 
코드 리뷰를 할 때 이점이 있기 때문이라고 한다.
이렇게 마지막 요소 뒤에도 쉼표가 없으면
코드 변경과 전과 후를 비교하는 결과가 지저분하게 나오는 경향이 있다고한다.

 

* arrowParens
화살표 함수를 작성하면 매개변수가 하나 밖에 없더라도 
매개변수 부분을 () 기호(소괄호)로 감싸준다.
 매개변수가 하나일 때는 굳이 () 기호를 사용하고 싶지 않다면 
arrowParens 옵션을 "avoid"로 주면 된다.

 

* useTabs 
들여쓰기를 할 때 기본적으로 
탭 문자 대신에 여러 개의 공백 문자를 사용한다.
만약에 탭 문자로 들여쓰기를 하고 싶다면 
useTabs 옵션을 true로 설정해주면 된다.