Final Project - (5) 2020_0202

오늘은 typescript 셋팅까지 된 프로젝트에 eslint + prettier + dotenv 설정을 추가하려고 한다.

 

처음에 프로젝트 기획할 때 eslint rule은 airbnb style을 따라가기로 하였기 때문에 eslint를 airbnb로 적용할 생각이다.

 

Prettier

우선은 Prettier 설정을 먼저 했다. 나는 vscode에 Prettier extension을 사용하고 있기 때문에 별도로 prettier를 install 안하려고 했는데 나중에 eslintrc 설정에서 자꾸 prettier 가 디펜던시에 없다고 뜨는 에러메시지가 마음에 안들어서... 설치를 하였다.

 

setting.json에 formatIOnSave를 true로 하여 사용하고 있다.

 

npm install --save-dev prettier

 

그 다음 root에 .prettierrc를 만들고 다음과 같은 규칙을 추가 하였다.

 

{

  "singleQuote": true,

  "semi": true,

  "useTabs": false,

  "tabWidth": 2,

  "trailingComma": "all",

  "printWidth": 80,

  "arrowParens": "always"

}

 

arrowParens 옵션은 저번 first project시에 eslint와 설정이 반대로 자꾸 잡혀서 추가한 옵션이다.

 

참고 레퍼런스 : https://velog.io/@velopert/eslint-and-prettier-in-react

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

 

Eslint

대망의 eslint 설정이다. 우선 eslint를 설치했다.

 

npm install --save-dev eslint

 

그 다음은 airbnb style을 사용할 것이기에 관련된 디펜던시들을 설치해 주었다.

 

npm install --save-dev eslint-config-airbnb

                                    eslint-plugin-import

                                    eslint-plugin-jsx-ally

                                    eslint-plugin-react

                                    eslint-plugin-react-hooks@1.7.0

 

React hook도 사용할 것이기 때문에 hook과 관련된 것도 추가로 받았는데 최신 버젼(2.3.0인가)을 받으면 디펜던시에 hooks 관련 디펜던시가 없다고 에러메시지가 나와서 에러메시지를 보기 싫어서(?) 1.7버젼으로 넣었다. 나중에 문제가 생기면 다시 최신 버젼을 고려해봐야겠다.

 

그 다음은 eslint에 typescript 설정을 넣어줘야 하기 때문에 다음과 같은 디펜던시를 추가하였다.

 

npm install --save-dev @typescript-eslint/eslint-plugin

                                    @typescript-eslint/parser

 

React-native 관련한 eslint 규칙도 추가하기 위해 다음과 같은 디펜던시도 받았다.

 

npm install --save-dev eslint-plugin-react-native

 

그리고 eslint와 prettier의 충돌을 막기 위해서 prettier와 관련된 디펜던시도 추가 하였다.

 

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

                                    eslint-plugin-prettier

 

 

여기까지 필요한 디펜던시들을 받았고 이제 eslint를 설정할 차례이다.

 

.eslintrc.json 파일을 만들고 필요한 설정을 해주었는데, 이때까지 기껏해야 prettier와 react eslint aitbnb 정도의 설정만 넣고 썼었는데 typescript + eslint(react, airbnb, react native) + prettier 설정을 해보려니까 너무 어려워서 많은 레퍼런스를 참고해서 완성한 파일이다.

 

사실 제대로 작성한지는 모르겠지만 이렇게 하니까 에러가 쭈욱 뜨는 걸로 봐서는 일단은 잘 작동(?) 하고 있는 것 같기는 하다. 

 

기본적으로 npm 사이트에서 각 디펜던시가 어떤 역할을 하고 어떤 옵션이 있고 .eslintrc에 어떻게 설정하는지 찾아보았고, 기타 다른 사람들의 프로젝트 예제에서 설정들을 참고를 많이 하였다.

 

참고한 레퍼런스

https://www.npmjs.com/

npm | build amazing things

https://flamingotiger.github.io/javascript/eslint-setup/#2-1-eslint-config-airbnb-%EB%A1%9C-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

Eslint 적용하기(React + Typescript + Prettier)

https://dev.to/ksushiva/setting-up-react-native-project-typescript-airbnb-linter-4ai

Setting up a React Native project (TypeScript + Airbnb linter)

https://medium.com/@killerchip0/react-native-typescript-with-eslint-and-prettier-e98d50585627

React-Native Typescript with ESLint and Prettier

https://medium.com/@fengqijun/configure-typescript-eslint-prettier-on-vs-code-to-develop-react-native-c9a42500ba53

Configure TypeScript, ESLint, Prettier on VS Code to Develop React Native

https://github.com/teachme2/expo-typescript-app/tree/chat

teachme2/expo-typescript-app

 

.eslintrc.json

{

  "env": {

    "react-native/react-native": true        // react-native plugin 사용하기 위해

  },

  "parser": "@typescript-eslint/parser",  // eslint를 typescript에 적용하기위해

  "extends": [

    "airbnb",    // airbnb style

    "airbnb/hooks",  // airbnb hooks 옵션

    "plugin:react-native/all",  // react-native plugin 사용하기 위해

    "plugin:@typescript-eslint/recommended",   // typesrcipt 설정 사용

    "prettier",       // prettier 와 충돌 막기 위해

    "prettier/react",    // prettier 와 충돌 막기 위해

    "prettier/@typescript-eslint"  // prettier 와 충돌 막기 위해

  ],

  "plugins": ["@typescript-eslint", "react", "react-native", "react-hooks"], 

  "rules": {

    "import/no-unresolved": 0,

    "import/extensions": [

    "error",

    "never",

      {

        "ts": "never",

        "tsx": "never",

        "js": "never",

        "jsx": "never"

      }

    ],

    "import/no-extraneous-dependencies": 0,

    "react/jsx-filename-extension": [

      1,

      {

        "extensions": [".jsx", ".tsx", ".js"]

      }

    ],

    "react-native/no-unused-styles": 2,

    "react-native/split-platform-components": 2,

    "react-native/no-inline-styles": 2,

    "react-native/no-color-literals": 0,

    "react-native/no-raw-text": 2,

    "react-native/no-single-element-style-arrays": 0

  }

}

 

.eslinignore

밑의 파일들에는 eslint 로 안 잡도록 추가해주었다.

/node_modules

/build

/babel.config.js

 

 

react-native-dotenv

추후에 있을 외부 api key 등을 사용하기 위해 환경변수가 필요할 것 같아서 dotenv도 설정해주려고 하였다.

 

npm install --save-dev react-native-dotenv

 

그리고 root에 babel.config.json에 dotenv 모듈을 프리셋으로 추가해 주었고 .env파일을 생성한 다음에 .gitignore에 추가했다.

 

참고한 레퍼런스

https://stackoverflow.com/questions/54581665/how-to-keep-my-keys-in-safe-in-react-native-expo

How to keep my keys in safe in react native (expo)?

 

 

 

 

이렇게 React-native(EXPO) + typescript + eslint (typescript, airbnb(hooks), react-native) + prettier 프로젝트 초기 셋팅이 완성되었다.

 

팀원들과 공유한 다음에 피드백 등을 반영해서 언능 프로젝트 셋팅을 완료하고 본격적으로 프로젝트를 시작하고 싶다!!