[eslint/prettier] 내가 보려고 정리하는 eslint, prettier 설정

정의

ESLint

ECMA로 이루어진 코드의 오류 체크, 가독성 향상(들여쓰기, 줄간격 체크) 등을 위해 사용하는 도구.

 

Prettier

ESLint와 달리 오류 체크는 하지 않으나 code formatting을 일관된 스타일로 고정하는 도구.

 

ESLint &Prettier

보통 두 가지를 함께 사용한다.

이를 통해 얻을 수 있는 이점은, 개발자의 실수로 발생하는 오류를 사전에 예방하고, 협업 시 코드 스타일을 일관되게 함으로써 가독성을 향상시킬 수 있다는 것이다.

팀 프로젝트에서는 코드 리뷰를 자주 하게 되므로 서로의 코드를 익숙하게 검토하기 위해서라도 lint와 prettier 도입은 필수적이다.

 

 

---

자주 사용하는 설정

 

NPM

// 이 2개의 경우 global 설치도 해 두면 좋다. (최초 1회만)
npm i -g eslint
npm i -g prettier

// devDependencies
npm i -D eslint
npm i -D prettier
npm i -D eslint-config-prettier // prettier와 충돌(중복)하는 eslint 설정 off
npm i -D eslint-plugin-import // plugin 적용에 필요
npm i -D eslint-plugin-prettier // eslint에 prettier 문법 플러그인 적용
npm i -D eslint-config-airbnb-base // airbnb style 적용

// 총집합
npm i -D eslint prettier eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbnb-base

 

 

 

.eslintrc 설정

 

FOR BE

// BE
{
  "plugins": ["prettier"],
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "script"
  },
  "env": {
    "node": true,
    "es6": true
  },
  "ignorePatterns": ["node_modules/"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

FOR FE

// FE
{
  "plugins": ["prettier"],
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "ignorePatterns": ["node_modules/"],
  "rules": {
    "prettier/prettier": "error"
  }
}

 

 

 

.prettierrc 설정

{
  "singleQuote": true,
  "semi": true, 
  "tabWidth": 2,
  "trailingComma": "es5",
  "endOfLine":"auto"
}

• singleQuote: 작은따옴표 사용
• semi: 세미콜론 사용
• tabWidth: 탭 간격
• trailingComma: multi line에서 코마(,)를 사용
• endOfLine: 개행 설정. windows에서 prettier를 사용할 시 crlf 오류가 발생하여 이 설정을 사용해야 한다.

 

 

 

.vscode > settings.json 설정

"editor.formatOnSave": false, // default
    "[javascript]": {
        "editor.formatOnSave": true // js는 저장 시 prettier 자동 적용
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 저장 시 eslint 자동 적용
    },

 

 

 

vscode 확장 프로그램 설정

가장 많이 사용되는, 가장 기본적인 확장들이다.