[React] ESLint + Prettier 찍먹해보기

React

[React] ESLint + Prettier 찍먹해보기

zl존석동

2022. 5. 14. 12:42

ReactJS 팀 프로젝트를 위해 ESLint + Prettier 설정 했던 것을 기록하였다!

ESLint란?

Ecma Script, 즉 Javscript를 위한 것인데 코드를 보고 사소한 것부터 심각한 것 까지 발생될 문제들을 미리 찾아주는 도구이다.

소스 코드를 분석해서 문법오류, 스타일 오류, 부적절한 구조를 가지는 코드를 식별할 수 있게 해준다.

자바 코드를 칠 때 IDE에서 Sonarlint 를 늘 사용중이기 때문에 Lint 라는 단어를 보고 뭐하는 놈인지 바로 이해했다.

Prettier란?

개발자들에게 일관적인 코딩 스타일을 유지할 수 있게 도와주는 코드 포매터이다.

소스코드 작성 시 미리 정해진 스타일 가이드를 따라줄 수 있도록 코드를 자동으로 변환해주는 도구다.

왜 사용하기로 했나요?

기본적인 문법이나 스타일도 아직 잘 알지 못하는 햇병아리이기 때문에 의문의 빨간줄들은 도움이 상당히 많이 될 것이라고 생각헀다.

인터프리터 언어이기 때문에 사전에 조금이라도 오류를 식별할 수 있다면 개발속도를 오히려 더 향상시킬 수 있을 것이라고 기대했다.

같이 작업하기 때문에 사전에 정해진 규칙대로 코드 포맷팅을 해 자동으로 정렬시켜주는 것은 매우 유용할 것 같았다!

시작하기

에어비엔비 스타일은 아직 팀원과 자신 모두 너무 햇병아리라 적용하지 않기로 하였다.

ESLint 설치

$ npm install eslint --save-dev

Prettier 설치

$ npm install prettier --save-dev --save-exact

Prettier + ESLint 모듈

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

프로젝트 루트 경로에 .eslintrc.js 파일 추가

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
        es2020: true,
        jest: true,
    },
    parserOptions: {
        sourceType: 'module',
        allowImportExportEverywhere: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:react/recommended',
        'prettier',
    ],

    rules: {
        'react/jsx-uses-react': 'off',
        'react/react-in-jsx-scope': 'off',
        'react/prop-types': 0,
        'react/jsx-filename-extension': [1, { extensions: ['js', 'jsx'] }],
    },
};

프로젝트 루트 경로에 .prettierrc.js 추가

module.exports = {
    singleQuote: true, // 문자열은 따옴표
    semi: true, //코드 마지막에 세미콜른 있게
    tabWidth: 2, // 들여쓰기 너비는 2칸
    trailingComma: 'all', // 객체나 배열 뒤에 항상 콤마를 붙임
    printWidth: 100, // 코드 한줄에 쓸 수 있는 코드 길이
    arrowParens: 'avoid', // Arrow Function 하나의 매개변수를 받을 때 괄호를 생략
    bracketSpacing: true, // 중괄호 사이 공백 지정 
  }

VSCode 에 적용하기

Extension 에서 ESLint 와 Prettier 를 설치하고 활성화 해줍니다.

ctrl + shift + p 를 누르고 settings.json 검색후 아래와 같이 설정하기

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

느낀점

ESLint 의 경우 강해지면 강해질수록 룰을 추가하고 규제를 많이 걸 수 있지 않을까 라는 생각이 들었다.

규제가 많을 수록 배울 수 있는 점도 많을 것 같다.

Prettier 의 경우는 사용해보니 마약이 아닐까 싶다!

비록 최소한의 설정으로 최소한으로 사용해본 것이지만..

그러고 보니 VSCode Extension 중 Sort-Imports 라는 것을 다운받아서 사용해보았는데

import 순서를 알아서 지정해줘서 이것도 굉장히 편했다.

import 순서로 인해 발생될 문제라던가 협업시 충돌과 같은 문제를 미리 방지 해줄 수 있을 것 같아 사용에 문제가 없다면 계속 사용할 것 같다는 생각이 든다.

인텔리제이에서 자바 코드 칠 때도 저런 기능이 없나 꼭 찾아봐야겠다!

References

Prettier · Opinionated Code Formatter

Opinionated Code Formatter

prettier.io

https://velog.io/@njh7799/Eslint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95

DSLOG