아묻따 CRA에 eslint와 prettier설치 따라하기.

전제조건: VSCode 설치 됨, node.js설치 됨.

• cra설치하기.
  $ npx create-react-app my-app
$ cd my-app
$ npm start
  -> 설명:
  $ npx create-react-app *폴더명지정* : 위의 코드에서는 my-app이라는 이름으로 만듦.
  $ cd my-app : 만든 폴더로 경로 이동.
  $ npm start : cra실행하는 명령어. 이 후에 $ code . 를 입력하면 vscode창이 뜬다.

1. VSCode 확장의 마켓플레이스에서 ESLint와 Prettier-Code formatter 설치.

2. eslint

• eslint-config-airbnb설치.

$ npm i eslint-config-airbnb

yarn쓰는 분들은 아래 명령어 입력.

$ yarn add eslint-config-airbnb

2-1. package.json에 "dependencies"에 "eslint-config-airbnb"가 생겼는지 확인.

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-prettier": "^3.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

2-2. eslint 설정.

루트폴더에 .eslintrc.json 파일 만들기.

"plugins": ["import", "html"],
  "extends": "react-app",
  "rules": {
    "prettier/prettier": "error",
    }

저 위의 코드가 중요하다 생각함.

3. prettier

• eslint-plugin-prettier 와 eslint-config-prettier설치

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier

3-1. 루트 폴더에 .prettierc 파일 만들기.

{
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

3-2. 루트경로에 .eslintrc.json 파일 수정하기.

"plugins": ["import", "html","prettier"],
  "extends": ["plugin:prettier/recommended","react-app"],
  "rules": {
    "prettier/prettier": "error",
    }

4. VSCode - 파일 -> 기본설정 -> 설정 -> 설정 열기(JSON)

"editor.formatOnSave": true 로 바꿔주기.