ESLint, Prettier에 대하여

date

Apr 4, 2023

slug

eslint;prettier

author

status

Public

tags

ESLint

Prettier

summary

type

Post

thumbnail

category

💻 Develop

updatedAt

May 10, 2023 02:02 AM

ESLint와 Prettier 차이

• ESLint : ES는 Javascript를 의미 Lint는 에러가 있는 코드에 표시를 달아놓는것

• Prettier: 코드 정리 규칙을 세부적으로 설정해놓으면, 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있는 플러그인.

예시(ESLint)

// ESLint 적용 전
a = 2;
console.log(a) // 2
var a = 3;
console.log(a) // 3

// ESLint 적용 후
a = 2;  // 'a' is not defined.
console.log(a) // 'a' is not defined.
var b = 3; // 'b' is assigned a value but never used.

예시(Prettier)

// a개발자가 작성한 코드
const test = () => {
----alert('테스트를 진행 중입니다.') // tabSize 4, no semi 
}
// b개발자가 작성한 코드
const test2 = () => {
  alert("두번째 테스트를 진행중입니다."); // tabSize 2, semi
};

// 탭사이즈 2, 코드 종료시 세미콜론 작성으로 Prettier 설정
// a개발자가 작성한 코드
const test = () => {
----alert('테스트를 진행 중입니다.')
}
// Prettier 검사 후
const test2 = () => {
  alert("두번째 테스트를 진행중입니다.");
};

ESLint 세팅

• 참고: npm뒤에 -D 를 붙이는 이유는 -dev 약자로 개발용 패키지로 설치한다는 뜻이다. 자세히

.eslintrc

{
    "root": true,
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    }
}

• eslint-config-airbnb-base: 에어비엔비 린트 플러그인

• eslint-config-next: Next.js 전용 린트 플러그인

• eslint-plugin-react: 리액트 전용 플러그인

• eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인

• eslint-config-prettier: 요건 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인

• @typescript-eslint/eslint-plugin: : 타입스크립트 전용 린트

Prettier

1. 별도의 prettier 관련 플러그인을 npm, yarn으로 설치하지 않고 VSCode의 extension을 설치.

2. prettier 플러그인을 직접 설치 후 eslintrc에 세팅.

Prettier Extension 설치

Prettier 직접 설치

$ npm install -D prettier
// or
$ yarn add -D prettier

// .eslintrc
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

• "extends": ["prettier"]: eslint-config-prettier를 실제로 활성화시켜서 중복되는 룰을 끄도록 하는 설정.

• "plugins": ["prettier"]: prettier 플러그인 등록하는 설정.

• prettier/prettier: "error": eslint 내에서 prettier가 돌아갈 때, prettier 규칙에 맞지 않는 요소들을 error로 판단하도록 하는 설정.

• "arrow-body-style": "off", "prefer-arrow-callback": "off": eslint와 같이 사용하는 부분에 있어, 내부적인 이슈가 있어서, 임의로 두 설정을 꺼야 함.

// .eslintrc
{
  "extends": ["plugin:prettier/recommended"]
}