ESLint + Prettier + React 환경 설정

 

 

ESLint란

Javascript 코드에서 발견되는 문제시 되는 패턴들을 식별하기 위한 정적코드 분석 도구이다.
- 위키백과

1. 일관된 스타일 유지
2. 잘못된 코드 에러 표시
3. 다양한 플러그인 지원

코드를 이쁘게 유지해주고 일관된 코드를 유지하게 해줍니다.

 

Prettier 란

Code Formatter이다. 개발자마다 다른 방식의 코딩을 일관된 방식으로 스타일을 유지할수 있게 툴이다.

1. 일관된 스타일 적용
2. 가독성 증가
3. 개발속도 향상

 

Install

yarn add -D eslint prettier eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier

각 패키지들을 왜 설치해야하는지 직접 찾아보시길 다 이유가 있음

 

.eslintrc.json

 

{
  "root": true,
  "env": {
    "browser": true,
    "node": true
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12
  },
  "plugins": ["import", "react", "react-hooks", "prettier"],
  "extends": [
    "plugin:import/recommended",
    "plugin:react/recommended",
    "react-app",
    "react-app/jest",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "no-useless-computed-key": "off",
    "react-hooks/exhaustive-deps": "off",
    "react-hooks/rules-of-hooks": "error",
    "jsx-a11y/anchor-is-valid": "off",
    "no-useless-escape": "off",
    "no-unused-vars": "off",
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ],
    "react/display-name": ["off", { "ignoreTranspilerName": false }]
  }
}

 

plugin, extends에 있는 prettier사용 이유는 eslint 기능을 사용하여 prettier규칙을 체크하여 에러표시를 하기 위해서 입니다.

"rules"는 각자 알아서 설정하면 됩니다.

 

plugin: 해당 모듈을 사용

extends: eslint 규칙의 확장성

rules: 규칙설정

env: 적용할 환경 

 

.prettierrc

 

{
  "tabWidth": 2,
  "printWidth": 90,
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5"
}

 

 

package.json

 

"scripts": {
    ...
    "format": "prettier --check ./src",
    "format:fix": "prettier --write ./src",
    "lint": "eslint src --ext .js",
    "lint:fix": "eslint --fix src --ext .js"
  },

yarn format =  src아래 모든 파일에 대해서 코드를 예쁘게 할 필요성이 있는 파일을 체크합니다.

yarn format:fix = src아래 모든 파일에 대해서 코드를 예쁘게 할 필요성이 있는 파일을 수정합니다.

 

lint 명령어도 동일해요

 

그리고 React를 처음에 생성하면 기본적으로 eslint가 적용되어있다.

-- package.json

"eslintConfig": {
	"extends": [
    	...
    ]
}

이부분은 필요가 없다. 만약 소규모, 개인프로젝트면 위에 작성해도 상관없어요. 

그런데 뭐든간에 package에 적는건 나중에 유지보수측면에서 좋지 않을 것 같아요. 

그래서 저는 그냥 첨부터 저부분은 삭제해서 따로 config파일을 생성해서 사용해요.

 

VSCode

확장자 설치

 

 

 

 

settings.json

 

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
 },

 

 

각 옵션들의 자세한 정보를 알고 싶으면

 

1.eslint rules

https://eslint.org/docs/latest/rules/

Rules - ESLint - Pluggable JavaScript Linter

2.prettier options

https://prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter