2023. 03. 20 ESLint, prettier 설치 및 세팅

홍왕열·2023년 3월 23일
ESLintPrettier
1

개발 관련 좋은 것들

목록 보기
4/5
  • 이 글은 회사에서 세미나를 하기 위해 쓴 글로 다양한 블로그를 보고 참고해서 썼기 때문에 많은 비슷한 점이 있습니다. 이 글보다는 밑에 tag에 달아놓은 글을 보시는 것이 더욱 자세할 수 있습니다.

ESLint와 Prettier

eslint와 prettier는 javascript로 개발을 할 때 우리의 개발자 경험을 향상시킬 수 있는 유용한 도구들이다.
하지만 정확한 eslint와 prettier의 차이가 무엇일까?
그냥 무턱대고 쓰는 사람들도 있을 수 있으니, 정확한 의미를 집고 넘어가자.

대부분 개발자들은 eslint만 사용하지 않고 prettier와 같이 사용한다.
내가 이 글을 쓰면서 알아보고 적용해보려고 한 것도 eslint와 prettier를 같이 사용하기 위해서 찾아보고 적용해 본 것이다.

eslint와 prettier의 차이가 무엇이길래 이 둘 중 하나를 사용하면 되는 것이 아니고 두 개를 같이 사용해야 효율적인 것일까?

한번 그 차이를 알아보자.

ESLint

우리는 개발을 하면서 다양한 방법으로 개발을 하게 된다.
어떤 사람은 function으로 함수를 만들고 어떤 사람은 arrow function을 쓰기도 하고 어떤 사람은 for문을 쓰기도 어떤 사람은 map, forEach, set 등의 내장 함수를 쓰기도 하고.

이처럼 똑같은 기능을 하는 함수를 사용할 때 이렇게 다양한 방법으로 사용을 하게 된다.

여기서 eslint를 사용하는 이유가 나온다.

바로 이러한 다양한 방식을 일관성이 있도록 구현해주는 것이다.

Prettier

prettier는 eslint같은 코드의 구현 방식이 아니라 줄 바꿈, 공백, 들여쓰기 등 텍스트를 일관되게 작성하도록 도와주는 것이다.

즉, 크게 보자면 eslint는 오류를 잡는 용도, prettier는 스타일을 교정하는 용도라고 생각하면 될 것 같다.

ESLint와 Prettier 적용법

일단 나는 extention을 사용하여 적용시켜보기로 했다.

1. 확장프로그램 설치

  • eslint와 prettier를 확장프로그램으로 설치한다.

2. eslint 및 prettier 모듈 설치

  • yarn add --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

? 확장프로그램을 설치하여 사용하는데 eslint를 설치해야하는 이유
ESlint Extension의 설명을 보면 해당 워크스페이스에서 eslint가 설치되어 있는지 확인해보고 없으면 글로벌 eslint를 참조한다고 나와있다.
또한 필요에 따라 .eslintrc 파일이 필요할 수도 있다고 한다.

즉, eslint가 프로젝트 코드에서만 사용하는 것이 아니라 해당 vscode라는 에디터에 적용해서 사용하는 것이다 보니 eslint를 사용하려면 eslint extension이나 eslint library만 설치하는 것이 아니라 둘다 세팅이 되어있어야 한다는 것이다.

하지만 다른 글에서 prettier는 설치를 하지 않아도 된다고 쓰여있었는데, 내가 해 본 경험상으로는 prettier를 설치하지 않으면 동시에 적용이 되지 않는 것을 확인하였다.

3. 초기 세팅으로 설치

  • yarn run eslint --init

설치를 시작한다면 몇 가지 질문들이 나온다.
프로젝트 상황에 맞게 답변을 하면 된다.

? How would you like to use ESLint?
    ❯ 
? What type of modules does your project use?
    ❯ 
? Which framework does your project use?
    ❯ 
? Does your project use TypeScript?
    ❯ 
? Where does your code run?
    ❯ 
? What format do you want your config file to be in?
    ❯

설치를 한다면 .eslintrc가 생길 것이고, 이것이 초기 세팅이다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
  },
};

위 사항을 하나씩 알아보자.

env(환경): 프로젝트의 사용 환경을 설정한다.
예를 들어, ESLint로 린트(lint)를 할 자바스크립트 코드가 브라우저에서 실행될 수도 있고, NodeJS에서도 실행될 수 있다면, 두 가지 실행 환경에서 접근 가능한 모든 전역 객체를 다음과 같이 등록해줄 수 있습니다.

{
  "env": {
    "browser": true,
    "node": true
  }
}

extends: 다른 eslint 설정을 확장해서 사용할 때 설정. 위 파일에서는 airbnb 규칙을 적용하라는 설정이다.

parserOptions: eslint 사용을 위해 지원하려는 javascript 언어 옵션을 설정

overrides: 프로젝트 내에서 일부 파일에 대해서만 살짝 다른 설정을 적용해줘야 할 때 사용.
예를 들어 프로젝트에 자바스크립트 파일과 타입스크립트 파일이 공존한다면 자바스크립트 파일을 기준으로 기본 설정을 하고 타입스크립트 파일을 위한 설정은 overrides 옵션에 명시할 수 있다.
타입스크립트 확장자를 가진 파일에 대해서는 타입스크립트용 파서와 플러그인과 추천 설정을 사용하도록 세팅해주고 있다.

{
  "overrides": [
    {
      "files": "**/*.+(ts|tsx)",
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": ["plugin:@typescript-eslint/recommended"]
    }
  ]
}

plugins: eslint에는 다양한 플러그인이 있다.
적용한 플러그인을 설치를 해놓아야 한다.
보통 패키지 이름은 'eslint-plugin-' 으로 시작한다.
아래는 대표적으로 많이 쓰이는 플러그인이다.

eslint-config-airbnb-base: 에어비엔비 린트 플러그인
eslint-config-next: Next.js 전용 린트 플러그인
eslint-plugin-react: 리액트 전용 플러그인
eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인
eslint-config-prettier: 요건 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인
@typescript-eslint/eslint-plugin: : 타입스크립트 전용 린트

플러그인을 설정할 때 흔히 오해하는 것은 단순히 플러그인을 추가해주면 관련 규칙이 바로 활성화된다고 생각하는 것이다.
플러그인은 새로윤 규칙을 단순히 설정이 가능한 상태로만 만들 뿐, 규칙을 위반하면 오류를 낼지 경고를 낼지 아니면 해당 규칙을 끌지에 대해서는 extends나 rules로 추가 설정을 해주어야 한다.

rules: 설정 파일에서 규칙 하나 하나를 세세하게 제어하기 위해 사용.
일반적으로는 extends 옵션을 통해서 설정된 규칙을 덮어쓰고 싶을 때 유용하게 사용할 수 있다.
rules 옵션으로 명시된 규칙은 extends 옵션을 통해 가져온 규칙보다 우선 시 해준다.

parser와 parserOptions: eslint는 기본적으로 순수한 자바스크립트 코드만 이해할 수 있기 때문에 자바스크립트의 확장 문법이나 최신 문법으로 작성한 코드를 린트하기 위해서는 그에 상응하는 parser를 사용하도록 설정하여야 한다.

예를 들어 타입스크립트와 jsx를 사용하여 작성된 코드를 린트하도록 설정한 예시다.

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 11,
  }
}

bable parser로 사용하도록 설정

{
  "parser": "@babel/eslint-parser"
}

그 외 settings 및 ignorePatterns 옵션과 .eslintignore 파일 옵션 등이 있다.

eslint와 prettier 충돌 방지 설정

eslint-config-prettier 설치

yarn add -D eslint-config-prettier

eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 꺼버림

  • eslint와 중복되는 규칙을 prettier 쪽에서 알아서 꺼주는 역할

적용하려면 extends에 'prettier'를 넣어야 한다.

하지만 내가 써 본 결과로는 prettier extention만 가지고는 적용이 되지 않고 꼭 prettier 및 eslint-plugin-prettier를 설치하여야 동작이 되었다.

//  .eslintrc
{
  "extends": ["plugin:prettier/recommended"],
  "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로 판단하도록 하는 설정.
    "warn"으로 붉은 줄이 아닌 노란 줄, 경고로 바꿀 수 있고 "off"로 끌 수도 있다.

  • "arrow-body-style": 이 규칙은 화살표 함수의 바디(body)가 단일 표현식(single expression)인 경우에 대해 설정할 수 있다.
    바디가 단일 표현식인 경우에는 중괄호를 사용하지 않아도 되며, 화살표 함수가 바로 반환문이 된다.

const add = (a, b) => {
  return a + b;
};

-> 
  
const add = (a, b) => a + b;

"prefer-arrow-callback": 이 규칙을 사용하면 function 키워드 대신 화살표 함수를 사용하여 함수를 작성할 것을 권장한다.

// Bad
someFunction(someArgument, function (error, result) {
  if (error) {
    throw error;
  }
  console.log(result);
});

->
  
// Good
someFunction(someArgument, (error, result) => {
  if (error) {
    throw error;
  }
  console.log(result);
});

결국 마지막으로 내가 셋팅해본 것.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["eslint:recommended", "airbnb", "plugin:prettier/recommended"],
  // parser: '@babel/eslint-parser',
  overrides: [],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["prettier"],
  rules: {
   // 여긴 가리겠다
  },
};

저장 시 자동 실행

결국 eslint와 prettier에서 우리만의 규칙을 잘 적용을 하였다면, 결국 편하게 사용하기 위해서는 저장할 시에 자동으로 수정이 되도록 하는 것이 맞다고 생각한다.

vscode에서 commend + shift + p를 눌러서 Open user settings(JSON)을 부른다.

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
// 이름대로 저장 시 eslint 기준으로 정리해서 저장.
  "[javascript]": {
    "editor.formatOnSave": false
  },
//  formatOnSave 속성은 VSCode의 포매터 플러그인(prettier, beautify 등)을 활용해서 코드를 정리하도록 설정

이런 식으로 추가.
만약 formatOnSave를 true로 설정한다면, 저장이 두 번이 된다.
저장할 때는 모르지만 뒤로돌리기(ctrl + z)를 한다면 두 번 돌려야 원래 모습으로 가는 모습을 볼 수 있다.
이것으로 유추해 본 결과 prettier로 수정을 하고 eslint를 또 한 번 수정되는 것 같다.
하지만 이런 식으로 설정을 한다면 eslint에서 설정한 기준으로 수정을 한다.

마지막 순서 정리

  1. eslint와 prettier 확장프로그램 설치

  2. yarn add --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier 로 모듈 설치

  3. yarn run eslint --init 로 조건에 맞게 설치

  4. .eslintrc 수정

  extends: ["eslint:recommended", "airbnb", "plugin:prettier/recommended"],
  plugins: ["prettier"],
  rules: 선택사항
  필수라고 생각되는 것들
      "prettier/prettier": "warn",
	"react/jsx-filename-extension": [
      1,
      {
        extensions: [".js", ".jsx"],
      },
    ],
  1. 자동 저장 설정
"[javascript]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

이렇게 설정할 예정.

지금 문득 생각해보니 이게 eslint랑 prettier를 같이 쓴다기보다는 eslint에 prettier룰을 넣어서 eslint만 사용하는 것 같기도 하고....

출처: https://www.daleseo.com/eslint-config/
https://yrnana.dev/post/2021-03-21-prettier-eslint/
https://feynubrick.github.io/2019/05/20/eslint-prettier.html
https://helloinyong.tistory.com/325

eslint rules 공홈: https://eslint.org/docs/latest/rules/

profile
홍왕열
코딩 일기장
이전 포스트

rsi, rcc

다음 포스트

리액트 렌더링에 대한 내용

0개의 댓글