image

Eslint란?

자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 오픈소스로 특정한 코딩 스타일 가이드라인을 따르지 않은 패턴을 찾아 사후에 발생할 수 있는 잠재적 문제점을 사전에 발견 할 수 있도록 하기 위해 사용된다. 원래 타입스크립트는 Tslint라는 코딩 스타일 도구가 있었지만 현재는 Eslint하나에서 자바스크립트와 타입스크립트를 모두 linting할 수 있도록 통합되었다. (타입스크립트의 경우 따로 플러그인 설치가 필요하다)

Prettier란?

eslint와 비슷한 점이 많지만 eslint와는 달리 코드의 스타일(라인 길이, 들여쓰기 등)만을 정리해준다. 여러 규칙들을 쉽게 커스터마이징을 할 수 있으며 코드를 저장시 정해놓은 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있다.

vscode extension

image

image

VSC에서 다음과 같은 extension을 설치해 주면 된다.

Setup

$npm init -y 
$tsc -init # typesciprt가 글로벌 설치가 되어있어야 한다

프로젝트 디렉토리를 생성한 후 package.json파일과 tsconfig.json파일을 생성한다.

$npm i -D typescript eslint prettier
$npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser # 타입스크립트 플러그인
$npm i -D eslint-config-prettier eslint-plugin-prettier # prettier 플러그인

npm을 통해 타입스크립트와 eslint, prettier와 관련 플러그인을 설치한다.

$npm i -D eslint-config-airbnb-base # 리액트 관련 규칙 X

$npm i -D eslint-config-airbnb # 리액트 관련 규칙 O

현재 프로젝트에는 airbnb의 스타일 가이드로 eslint를 설정할 것이다. airbnb의 javascript 스타일을 두가지로 나뉘게 되는데 리액트 관련 규칙이 있는 eslint-config-airbnb와 리액트 관련 규칙이 없는 eslint-config-airbnb-base가 있다.

$npm i -D eslint-plugin-react eslint-plugin-react-hooks
$npm i -D eslint-plugin-jsx-a11y eslint-plugin-import

리액트에서는 다음과 같은 플러그인들을 추가적으로 설치해줘야한다.

  • eslint-plugin-import : ES6의 import, export 구문을 지원, 필수 플러그인
  • eslint-plugin-react : React 규칙이 들어있는 플러그인
  • eslint-plugin-react-hooks : React Hooks 규칙이 들어있는 플러그인
  • eslint-plugin-jsx-a11y : JSX요소의 접근성 규칙에 대한 정적 검사 플러그인

Setting

.prettierrc

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

prettier의 설정은 아주 간단하다 각 옵션에 맞는 값을 설정해 주면 되는데 나같은 경우에는 tabWidth(들여쓰기 탭 길이)는 2, printWidth(라인 최대 길이)는 120으로 설정해 놓았다. 각 옵션들에 대한 상세한 설명은 https://prettier.io/docs/en/options.html에서 확인할 수 있다.

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react-hooks'],
  extends: [
    'airbnb', // or airbnb-base
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended', // 설치 한경우
    'plugin:import/errors', // 설치한 경우
    'plugin:import/warnings', // 설치한 경우
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'prettier/prettier': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

eslint의 경우 어떤 플러그인을 설치했느냐에 따라 다른데 eslint-config-airbnb를 설치한 경우에는 다음과 같이 설정파일을 작성하면 된다. 여기서 eslint-config-airbnb-base를 설치한 경우에는 airbnb부분을 airbnb-base로 변경하면 되고 그 외의 모듈이나 플러그인 들은 설치한 부분만 작성하면 된다.

rules의 경우 필요한 규칙들을 설정할 수 있는데 airbnb의 eslint규칙은 꽤나 까다롭기 때문에 무조건 지켜야 하는 것은 아니다. 이 도구들은 모두 개발자의 편의성을 위해 개발된 것이므로 자신에게 필요없는 규칙들을 rules에 추가해 설정할 수 있다. 값을 1로주면 경고 표시, 0으로 주면 규칙을 무시한다는 의미이다.

추가로 만약에 타입스크립트를 사용하지 않는 유저라면 설치해야되는 모듈중에 typescript가 들어간 모듈을 제외하고 설치하면 된다.

결론

혼자서 개발을 진행할 때도 코드의 스타일은 중요하지만 여러 사람과 협업을 진행할 때는 필수적으로 필요하다고 생각한다. 모든 규칙을 엄격하게 지킬 필요는 없지만 프로젝트 기획단계에서 팀원들과 협의하여 지켜야될 규칙들을 설정하고 분업하는 것은 좋은 코드를 작성할 수 있는 습관중에 가장 기본적인 단계라고 생각한다. 이런 도구들을 쓰는 것이 습관화 되다보니 나도 이제 prettier와 eslint없이는 개발을 못할 것 같다.