Code convention (eslint + prettier)

코드 컨벤션이란?

코드컨벤션은 프로그래밍에서 코드를 작성하는 일련의 규칙이나 모양을 말한다.

실질적으로 협업을 위해 코드를 만들 때 보편적으로 사용되고 있는 모양과 유사하게 코드를 구성함으로서 협업 시에 불필요한 리딩 오류를 줄이기 위한 노력들로 생각할 수 있다.

 

코드 컨벤션을 준수하고 있는가?에 대한 영역은 여러 현장과 상황에 따라 다르게 받아들여질 수 있으나, 크게 Code Quality와 Code Formatting로 구분하여 생각할 수 있다.

 

Code Quality(코드 품질)는 코드의 성능, 가독성, 유지보수성을 종합적으로 평가하는 것을 말한다. 하지만 개발자가 코드를 작성하는 단계에서 이 모든 것을 스스로 종합하여 평가하는 것은 쉽지 않다. 따라서, 개발 과정에서 코드 품질에 신경을 쓴다 함은 곧 자신이 쓰고 있는 언어가 가진 약점을 인지하고 해당 코드의 문제점이나 잠재적인 오류를 파악하는 것을 말한다. 이렇게 소스 코드에서 잠재적인 오류를 찾아내는 과정을 Linting이라고 부른다. Linting 과정에서는 코드의 문법이나 코드의 스타일, 변수의 유효성 검사, 오류 처리 등을 파악한다. 

 

Code Formatting(코드 서식)은 서식을 굳이 완전히 따르지 않아도, 코드 자체는 실행될 수 있다. 예를 들어 본인이 가장 많이 놓치는 부분인 ; 가 그렇다. 이 외에도 들여쓰기, 줄바꿈 등 코드의 가독성이나 코드에서 사용되는 문법들이 무의식적으로 놓치기가 쉬운데, 이를 바로잡는 과정이 code formatting 이다.

 

웹 프로젝트에서 동료와 협업을 위해 개발자가 코드 작성 중에 코드컨벤션을 의도적으로 준수하면서 작성하는 방법도 있지만, 인적 오류를 보완하기 위해 선배 개발자들께서 만드신 여러 라이브러리와 도구가 있다.

 

ESLint

ESlint는 의심스러운 코드가 발견되면 알려주는 개발자가 정의한 규칙 세트(또는 미리 정의된 세트에서 확장 가능)로 코드를 분석하는 도구이다. 이름에서도 알 수 있듯 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 역할을 한다.

버그와 오류가 발생하기 전에 찾아낼 수 있습니다.
코드가 더 일관성 있게 된다.
다양한 플러그인을 추가할 수 있다.

ESLint를 사용하려면, NPM과 VS Code 확장프로그램 모두를 설치해야 한다. 이후 프로젝트의 root 레벨에서 .eslintrc.json 파일을 생성해주어 lint 사용자 설정을 해줄 수 있다. 이 외에도 기본적인 자바스크립트 외의 모든 라이브러리 및 보조 도구에 대한 추가적인 설치도 필요하다.

# 기본 eslint 설치
npm install --save-dev eslint

# 리액트, 리액트 훅, 프리티어 등을 사용하기 위한 플러그인 추가 설치 
npm install eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier

이후에는 환경설정에서 검사할 항목과 그렇지 않을 항목을 구분해서 살펴볼 수 있다.

일반적으로 ESlint는 JS 환경에서 주로 실행되기 때문에, React와 같은 JS프로젝트에 필요한 여러 플러그인을 제공하며, 불필요한 검사를 피하기 위한 비활성화 기능도 제공한다.

 

다음은 간단한 react 프로젝트에서 사용되는 eslintrc.json 파일의 예시이다.

{
  "env": {
    "browser": true,     // 브라우저 환경에서 실행되는 코드에 대한 규칙 적용
    "es2021": true       // ECMAScript 2021 버전의 기능 사용에 대한 규칙 적용
  },
  "extends": [
    "eslint:recommended",        // ESLint에서 권장하는 규칙 적용
    "plugin:react/recommended",  // React와 관련된 규칙 적용
    "plugin:import/recommended", // import 구문과 관련된 규칙 적용
    "plugin:jsx-a11y/recommended", // 접근성에 관련된 규칙 적용
    "plugin:prettier/recommended" // Prettier 규칙 적용
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true // JSX 문법 사용에 대한 규칙 적용
    },
    "ecmaVersion": "latest",  // 최신 버전의 ECMAScript 사용에 대한 규칙 적용
    "sourceType": "module"    // ECMAScript 모듈 사용에 대한 규칙 적용
  },
  "rules": {
    "react/react-in-jsx-scope": 0, // JSX 코드에서 React를 import하지 않아도 되는 규칙 비활성화
    "react/jsx-uses-react": 0     // JSX 코드에서 React를 사용하지 않아도 되는 규칙 비활성화
  }
}

즉, ESLint는 Code quality를 확보하기 위한 "도구"에 불과하기 때문에 자신이 사용하고 있는 프로그래밍 언어, 라이브러리, 기능에 대한 이해와 이를 보완하기 위해 어떤 플러그인이 필요한지 파악하는 것이 중요하다.

 

이 외에도 AirBnB, MS 등에서 제공하는 ESlint 스타일을 위한 플러그인도 있으니 필요하다면 사용해도 좋을 것이다.

Airbnb : https://github.com/airbnb/javascript

MicroSoft : https://github.com/microsoft/eslint-plugin-sdl

 

Prettier

Prettier는 일정한 코드 서식을 유지하기 위해 만들어진 확장프로그램이며, 이 프로그램은 eslint와 같은 연결프로그램이 없을 때는 확장프로그램만 있어도 정상적으로 동작하지만 eslint와 같은 코드 검사 툴이 있을 때는 필수적으로 둘을 연결하는 플러그인을 설치해주어야 한다.

(이에 대한 설치는 위의 eslint 확장프로그램 설치에서 진행했다.)

정상적으로 설치되었다면 아주 자잘한 스타일링 코드까지 경고를 할텐데, 파일이 세이브될 때마다 lint가 수정가능한 부분을 자동적으로 수정해주는 방법이 있다.

 

본인은 이를 부트캠프에서 제공하는 양식으로 진행했으나, 구글링을 통해 찾아보니 아래의 블로그에서 제공하는 설정방법도 좋은 방법이 되는 것 같아 공유하고자 한다.

 

ESLint 설정 : https://flowx.tistory.com/40