[Javascript] ESLint, Prettier 설정

프로젝트를 진행하면서 여러사람과 협업을 한다면 전체적으로 코드품질유지를 위해 노력해봤을것이다. 사람들간에 생각하는 코드 방식이 다를것이고, 생각하는 코드컨벤션이 각기 다를것이다. 통일되지 않은 방식으로 개발된다면 초기엔 문제가 되지 않을것이지만 점차 진행하면서, 가독성면에서 문제가 발생할것이고, 그때가서 통일된 방식을 논의하기에도 시간이 더욱 많이 들것이다.

 

때문에 초기에 코드작성 방식이나 스타일을 미리 정해서 진행하는것이 좋을것이다.

 

이러한 문제를 해결하기위한 툴로는 ESLint 와 Prettier 가 등장했으며, 두가지에 대한 특징과 차이점에 대해 알아보고 설정하는 방법에 대해 본다.

 

ESLint

eslint

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

요약하자면 전체적인 코드 안정성을 위한 툴이다.

 

Prettier

prettier

요약하자면 전체적인 코드 스타일을 일관성있게 유지하도록 해주는 포맷팅 툴이다.

프로젝트 설정

우선 프로젝트 생성후 eslint 설정을한다.

해당 명령어 입력

$ npx eslint --init

npx eslint --init

각 옵션을 물어보고 필자는 위처럼 설정

설정이 완료되면 .eslintrc.json 이라는 파일이 생성되있을것이다.

본인은 create-react-app 을 통해서 프로젝트를 생성했기때문에 아래 "parserOptions > project" 부분을 추가함

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "plugin:react/recommended",
        "standard-with-typescript"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": ["./tsconfig.json"] // 이부분 추가
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

 

다음 Prettier 설정은 같은 경로에 .prettierrc 파일 생성후 아래 코드를 입력한다.

{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

필자가 생각하는 필요한 스타일 옵션을 준것이며, 필요한 옵션은 추가하여 사용하면 된다.

필요한 옵션은

https://prettier.io/playground/

Prettier

에서 확인하면서 생성가능하다.