# Eslint 와 Prettier 설정 해보자 (airbnb 곁들이기)

### 🧐 Eslint 와 Prettier를 왜 써야하는가?

이번 프로젝트를 시작하면서 초기 환경 설정에 진심으로 공부해보고 싶었다. 코드를 작성하거나 협업을 할때 이유 모르는 error가 발생하거나 코드의 일관성이 사라져 가독성이 낮아지는 경우가 있습니다. 이런경우 규칙과 코드의 문제를 잡아주는 도구 lint 와 코드의 스타일을 잡아주는 prettier를 사용함으로써 코드의 품질과 깔끔함 코드를 작성하고 협업에 도움을 줄 수 있습니다.

## ✨ Eslint 설치

[Eslint](https://eslint.org/)

`npm install eslint --save-dev` or `npm install -D eslint` +추가 vscode 확장프로그램 eslint도 설치해주자

```plaintext
npm option
npm -D === --save-dev
devDependencies에 패키지를 등록. 개발 단계에서만 사용하는 의존성 모듈을 정의하고 설치한다.
```

[npm install option 설명](https://ahnsisters.tistory.com/16)

💡 Eslint 초기화(간편한 환경설정)

```plaintext
npx eslint --init

선택지가 나온다, 원하는 선택지를 선택하면 된다.
✔ How would you like to use ESLint?
✔ What type of modules does your project use?
✔ Which framework does your project use?
✔ Does your project use TypeScript?
✔ Where does your code run?
✔ How would you like to define a style for your project?
✔ Which style guide do you want to follow?
✔ What format do you want your config file to be in?
```

---

## ✨ root 디렉토리에 .eslintrc.js 파일 생성

js 이외에도 JSON, YAML 파일 형식도 지원한다.

```javascript
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  plugins: ['react'],
  rules: {
  ex)
  'react/jsx-filename-extension': [ 1,
      {
        extensions: ['.js', '.jsx'],
      }
    }
```

* `env` : 실행환경을 설정
    
* `extends` : 설정 파일을 확장, airbnb 등 추가 시킬 수 있다.
    
* `plugin` : 확장 개념
    
* `rules` : 상세한 규칙을 설정 할 수 있다.
    
* `rule`의 첫번째 배열 값에 따라 설정의 사용 할수 있다.
    
    * `off`, `0` : 설정 끄기
        
    * `warn`, `1` : 경고
        
    * `error`, `2` : 에러 발생
        

이와 같은 양식으로 작성한다.

---

## ✨ .eslintignore 파일 추가

eslint가 적용되지 않았으면 하는 파일을 작성한다.

```plaintext
build
dist
public
```

---

## ✨ eslint에 prettier 추가

[prettier](https://prettier.io/)

`npm install -D eslint`  
`npm install -D eslint-config-prettier eslint-plugin-prettier`

### ✔ eslint-config-prettier

eslint와 prettier간 충돌 나는 규칙을 비활성해주는 eslint 설정 'prettier'를 extends에 마지막으로 추가해주어야한다.

```javascript
{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}
```

### ✔ eslint-plugin-prettier

prettier 규칙 생성 eslint 플러그인

eslint-plugin-prettier 설정 방법

```javascript
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}
```

위와 같은 방법으로 설정이 가능하지만 모두 포함되어있는 방법이 있습니다.

```javascript
{
  "extends": ["plugin:prettier/recommended"]
}
```

---

## ✨ root 디렉토리에 .prettierrc.js 파일 생성

prettier 규칙을 생성한다.

[더 많은 prettier 규칙 보러가기](https://prettier.io/docs/en/options.html)

```javascript
module.exports = {
  // 화살표 함수의 매개변수 표시 형태
  arrowParens: 'always',

  // 브라켓 한줄 사용 여부
  // 마지막 '>'를 다음줄로 내릴지 여부
  bracketSameLine: false,

  // 객체 선언시 괄호 양 끝 사이의 공백 사용여부
  bracketSpacing: true,

  // 파일 안에 또다른 형식의 코드에도 Prettier를 적용할지 여부
  embeddedLanguageFormatting: 'auto',

  // html의 공백을 처리하는 방법
  htmlWhitespaceSensitivity: 'css',

  // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  insertPragma: false,

  // jsx에서 홀따옴표 사용여부
  jsxSingleQuote: false,

  // 코드가 보여지는 너비
  printWidth: 80,

  proseWrap: 'preserve',
  // 객체의 속성을 표현할때, 따옴표를 적용하는 조건
  // "as-needed" : 필요한 경우에만 객체에 따옴표
  // "consistent" : 하나라도 따옴표가 필요하다묜 모든속성에 따옴표
  quoteProps: 'as-needed',

  // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  requirePragma: false,

  // 세미콜론 사용여부
  semi: true,

  // 큰따옴표 대신 작은 따옴표 사용 여부
  singleQuote: true,

  // 들여쓰기 간격
  tabWidth: 2,

  // 후행 쉼표의 사용조건
  // 배열의 요소와 객체 타입의 속성을 나열하는 경우에, 맨 마지막 요소 뒤에 쉼표를 입력할지를 결정합니다.
  trailingComma: 'es5',

  // 탭을 사용할지 여부
  useTabs: false,
};
```

---

## ✨ .prettierignore 파일 추가

prettier 가 적용되지 않았으면 하는 파일 추가

```plaintext
node_modules
dist
```

---

## ✨ 자동 수정 설정

`ctr + shft + p`

setting.json - 파일에서 설정 변경

```json
  // 프리티어 자동 수정
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

  // 저장시 자동 변경
  "editor.formatOnSave": true

  // eslint 자동 수정
    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
```

---

## ✨ airbnb 규칙 추가하기

`eslint-config-airbnb-base` - airbnb-bnb 패키지

1️⃣ `npx install-peerdeps --dev eslint-config-airbnb-base`

종속 되어있는 모든 패키지가 설치된다.

`npm info "eslint-config-airbnb-base@latest" peerDependencies` 의존하는 패키지 정보를 볼수있다.

---

### 💡airbnb 가 아닌 airbnb-base 선택한 이유

`eslint-config-airbnb`에 포함되어 있는 패키지 : `eslint`, `eslint-plugin-import`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, `eslint-plugin-jsx-a11y`

`eslint-config-airbnb-base` 에 포함 되어 있는 패키지 : `eslint`, `eslint-plugin-import`

airbnb에 포함되어 있는 `eslint-plugin-jsx-a11y` 는 접근성을 위한 패키지지만 불필요한 오류가 대부분의 rule을 'off' 해주었기 때문에 제외시키며 기본적인 `airbnb-base`를 선택하였습니다. 부수적인 패키지는 따로 설치해 주었다.

---

2️⃣ eslintrc.js 폴더에 아래 옵션을 추가해주면 된다.

```plaintext
"extends": "airbnb-base"
```

## ✨ Reference

[prettier 설정 설명](https://hj-blog.github.io/frontend/Prettier/#%EC%8C%8D%EB%B0%98%EC%A0%90%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%A0%EC%A7%80-%EC%97%AC%EB%B6%80-semi)  
[DaleSeo eslint](https://www.daleseo.com/eslint-config/)  
[velopert eslint](https://velog.io/@velopert/eslint-and-prettier-in-react)  
[배하람 eslint](https://baeharam.netlify.app/posts/lint/Lint-ESLint-+-Prettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0) [helloinyong](https://helloinyong.tistory.com/325) [npm - eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) [npm - eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base) [npm - eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier) [GitHub - eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)