프로젝트에 ESLint 적용하기

ESLint는 일관된 스타일의 코드를 작성할 수 있도록 도와주는 도구(라이브러리?)이다.

EcmaScript와 Lint를 합친 이름으로 ES문법에 적합하지 않은 코드를 찾아 오류를 표시해준다.

협업 시 Prettier와 함께 거의 필수로 사용되는데 Prettier와 목적은 비슷하지만, 기능은 다른 도구이다. 

 

Prettier는 공백, 따옴표, 줄바꿈 등 개인마다 다르게 작성하는 코드 스타일을 일관되게 바꿔주는 도구이다. 

반면 ESLint는 어떤 코드를 작성하는데 있어서 일관된 형태를 유지하도록 도와준다.

const doSomething = function() {}
const doSomething = () => {}

예를 들어 위와 같이 함수를 선언할 때 쓰일 수 있는 다양한 방식 중 한 가지 형태로 코드를 작성하고 싶을 때

ESLint에서 규칙을 정해 다른 형태의 코드는 오류가 나도록 설정할 수 있다. 

그렇기 때문에 많은 사람들이 함께 작업할 때 규칙을 정해 일관된 코드를 작성할 수 있고, 유지보수에도 도움이 된다. 

 

또한 ESLint는 개인의 선호도에 따라 규칙을 정할 수 있을 뿐만 아니라, 기존의 다른 설정들을 가져와 사용할 수 있다.

예를 들어 에어비앤비에서 사용하는 규칙에 따라 코드를 작성하고 싶다면 에어비앤비의 설정을 가져와 사용할 수 있다. 

전세계적으로 많은 개발자들이 사용하는 자바스크립트 스타일 가이드를 에어비앤비에서 포함하고 있고, 이 설정에 따라 내 코드를 작성하면 더 정확하고(?) 완성도 있는 코드가 되며 누군가 이 코드를 만질 때 도 수월하다는, 결국 협업에 유리하다는 것과 비슷한 맥락의 설명을 봤다. (왜 에어비앤비 설정이 대중화됐는지는 찾지 못했다.)

이외에도 타입스크립트, 리액트, prettier를 사용할 때 등 여러 환경에서 적합한 설정을 plugsins 속성으로 추가할 수 있다.

---

ESLint를 내 프로젝트에 적용하기 위해서는 몇 가지 절차가 필요했다.

우선 나는 cra로 프로젝트를 생성하고, 타입스크립트를 써보고 싶었기 때문에 프로젝트 생성 시 추가했다.

코드 작성은 airbnb의 설정을 따르고, 여기에 prettier로 내가 선호하는 스타일을 설정해보기로 했다. 

cra로 프로젝트를 생성하면 eslint가 내장되어 있지만, 추가 설정을 위한 패키지는 따로 설치해야 한다.

yarn eslint --init //명령어를 사용해 eslint 설정을 쉽게 시작할 수 있다.

세팅을 위해 여러 질문이 주어지는데 원하는 항목을 선택해 eslint를 설정한다. 

설정을 마친 후 airbnb와 prettier, typescript와 관련된 패키지도 추가로 설치해야 한다. 

위 과정이 끝나도 다양한 에러메세지가 나와 당황스러웠다. 

그 에러메세지는 .eslintrc.js 에서 여러 설정을 만져보면서 해결할 수 있다. (js외에도 다른 확장자를 사용할 수 있다. 검색하면 json형태로 된 예제가 대부분이라 다음에는 json형식의 파일을 사용하려 한다.)

.eslintrc.js는 eslint와 관련된 여러 속성을 관리하는 파일로 여기에서 모든 설정을 조작할 수 있다. 

env: {
    browser: true,
    node: true,
},
extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
    ecmaFeatures: {
        jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
},
plugins: ['react', '@typescript-eslint', 'better-styled-components'],
rules: {
    'react/jsx-filename-extension': [
        2,
        { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ],
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
    'import/no-unresolved': 0,
    'react/function-component-definition': [
        2,
        { namedComponents: 'arrow-function' },
    ],
    'react/jsx-fragments': 0,
    'better-styled-components/sort-declarations-alphabetically': 0,
},

이런 식으로 각 속성을 통해 eslint의 설정을 바꿀 수 있다.

여기에서 env, parser와 같은 옵션은 각각 eslint의 실행환경과 eslint로 코드를 읽기 위한 설정이다.

plugin은 규칙을 정하려는 문법이 포함된 패키지를 적어준다.

extends는 airbnb와 같이 기존에 정해져 있는 규칙 모음을 가져다 쓰기 위해 작성한다. 대부분의 플러그인은 recommended, all 등 가져다 쓸 수 있는 설정이 존재한다. 

rules에서는 내가 직접 규칙을 정할 수 있는데, 위에서 설정한 규칙보다 우선해 적용된다.

rules에서 설정할 수 있는 규칙이 정말 다양해 eslint 공식문서에서 검색해 가져다 쓸 수 있다.

 

정리해서 적어보면 아주 복잡하지는 않지만, 막상 적용할 때는 많은 시간이 걸렸다.

특히 코드 한 줄 칠 때 마다 계속해 나오는 에러메세지가 처음에는 계속 발목을 붙잡았다.

하지만 규칙을 정하면서 코드를 작성해 나가니 확실히 일관된 코드를 작성할 수 있다는 eslint의 장점이 돋보인 것 같다. 

설정을 이것저것 바꾸면서 연습하다보니 airbnb규칙이 제대로 설정된건지 조금 헷갈린다. 

다음 프로젝트에서는 이 부분을 확실히 확인하며 진행해야겠다.  

---

https://eslint.org/

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

개념정리: https://velog.io/@yrnana/ESLint-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90

ESLint 알고 쓰기

에러관련:  https://velog.io/@sonic/CRA%EC%97%90-ESLint-%EC%99%80-Prettier-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

CRA에 ESLint 와 Prettier 적용하기