React – Eslint (airbnb)와 Prettier 설정 (Error: Parsing error: Unexpected token = eslint 해결)

처음에는 Eslint와 Prettier를 안 썼는데, 점점 세미콜론도 귀찮아지고… 코딩스타일이 뒤죽박죽이 되어가서 적용하기 시작했다.

그런데 할 때마다 순서가 헷갈려서 정리해놓고 이번 글대로만 계속 해야지

(Parsing 에러 검색으로 오신 분들은 밑에 내리다보면 ## 표시부터 보시면 됩니다)

1. vscode에서 eslint, prettier extention 설치하기

2. eslint, airbnb 전부 설치하기(개발할때만 사용할거니까 dev옵션 필수)

npx install-peerdeps --dev eslint-config-airbnb

3. prettier 설치하기 (마찬가지로 dev)

npm install --save-dev --save-exact prettier

4. eslint-prettier 플러그인 설치 (eslint와 prettier를 연동)

npm install --save-dev eslint-plugin-prettier eslint-config-prettier

• 모두 설치하고 나면 package.json에 이렇게 되어 있어야 한다.

  "devDependencies": {
    "eslint": "^7.16.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "4.0.0",
    "prettier": "2.2.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  }

5. .eslintrc 에서 eslint 설정하기

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "airbnb"
  ],
  "plugins":[
    "import",
    "react-hooks"
  ],
  "rules": {
    "no-underscore-dangle": "off",
    "react/forbid-prop-types": 0,
    "object-curly-newline": 0,
    "no-console": 0,
    "no-alert": 0,
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/jsx-one-expression-per-line": "off",
    "linebreak-style": 0,
    "jsx-a11y/label-has-associated-control": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "react/jsx-props-no-spreading": "off",
    "no-unused-vars": "off",
    "consistent-return": "off",
    "no-restricted-globals": "off"
  
  }
}

6. .prettierrc.js 에서 prettier 설정하기

// .prettierrc.js

module.exports = {
  // 문자열은 홀따옴표(')로 formatting
  singleQuote: true,
  //코드 마지막에 세미콜른이 있게 formatting
  semi: true,
  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
  useTabs: false,
  // 들여쓰기 너비는 2칸
  tabWidth: 2,
  // 객체나 배열을 작성 할 때, 원소 혹은 key-valueㅇ의 맨 뒤에 있는 것에도 쉼표를 붙임
  trailingComma: "all",
  // 코드 한줄이 maximum 80칸
  printWidth: 80,
  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
  arrowParens: "avoid",
};

7. 자동 formatting 설정

//settings.json
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange",

끝! 앞으로도 이대로만 설정하자~~~~~~~~