[ESLint - Airbnb] ESlint와 Prettier 적용하기 (with VS Code)

 

ESlint와 Prettier 적용하기 (with VS Code)

 

방법은 다른 블로그에 많이 나오니까

크게 순서에 대해서 짚어보기!!!

 

 

1. ESlint & Prettir 설치

터미널에서 yarn, npm 등으로 설치

아래 블로그 참고

 

참고.

- https://velog.io/@mayinjanuary/Next.js-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-ESLint-Prettier-%EC%84%A4%EC%A0%95

- https://feynubrick.github.io/2019/05/20/eslint-prettier.html

 

 

---

 

2. ESlint & Prettier 설정

 

설정파일 작성.

.eslintrc (또는 .eslintrc.js 또는 .eslintrc.json)

 

2-1. single quote로 사용하기 위한 설정 3가지

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "extends": [
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended"
  ],
  
  
  ...
  
  
  "plugins": ["react", "react-hooks", "prettier"],
  "rules": {
  	.....
    ..
    /* single quote로 사용하기 위한 설정 3가지 */
    "jsx-quotes": ["error", "prefer-single"],
    "quotes": ["error", "single", { "avoidEscape": true}],
    "prettier/prettier": ["error", {"singleQuote": true, "parser": "flow"}]
  }
}

 

 

---

 

3. vs code extension 설치

아주 중요!!!!!!!

extension 설치 안해서 eslint 적용안되는 줄 알고 한참 삽질...ㅠㅠㅠㅠㅠㅠ

4번에 나오는 방법으로 확인해보고, 

eslint 적용되는거 확인함ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

 

 

---

 

 

4. lint가 정상적으로 실행되는지 확인하고 싶을때

 

설치와 설정이 다 된 후, 실행되는지 확인할 수 있음.

 

1) 터미널에서 eslint를 적용한 프로젝트 경로로 들어간다.

 

2) 루트경로에 파일을 하나 만들어서 일부러 잘못된 코드를 작성해 본다.

var num = 3

     ---> 이 경우, var 와 세미콜론을 안쓴것이 lint에 걸려야 한다.

 

3) 터미널에 아래 코드를 입력한다.

$ node_modules/.bin/eslint index.js   

    --->  에러가 아니라, 아래와 같이 잘못된 부분에 대한 설명이 나온거면 eslint 적용된 것!

 

 ** lint를 통해 잘못된 부분을 바로 바꾸고 싶다면 뒤에 --fix 옵션을 붙인다.

$ node_modules/.bin/eslint index.js  --fix