CRA 실행
npx create-react-app@latest 프로젝트이름 --template typescript- 위의 CRA 템플릿을 이용하여 프로젝트를 생성한 경우
typescript@types/node@types/react@types/react-dom@types/jest까지 자동으로 설치가 된다.
→ 만약 기존 리액트 프로젝트를 타입스크립트로 전환하고 싶다면 위의 라이브러리를 설치하면 된다. - 이후에 추가로 사용할 types 라이브러리들을 추가해주었다.
→@types/styled-components - 다른 분들 블로그를 참고하여 보니, 협업을 위해
eslint와prettier를 사용하시길래, 이번 기회에 사용해보고자 나도 설치해 보았다.
eslint 설치와 설정
- 먼저 eslint 를
npm i -D eslint를 이용하여 설치해준다.
→ -D 플래그는 해당 프로젝트를 실행시키기 위해서 필요한 라이브러리가 아닌, 개발단계에서만 필요한 devDependences 로 추가한다. - 이후, eslint에서 필요한 플러그인을
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser를 이용하여 설치한다.
→ 위 과정은npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser로 한번에 처리 할 수 있다.
eslint 기본 설정
npx eslint --init을 이용하여.eslintrc.json파일을 자동으로 생성 할 수 있다.- 명령어를 사용하면 옵션을 지정하는 질문들이 표시되며, 내용은 아래와 같다.
1. eslint 를 어떻게 사용하는가?
2. 프로젝트에서 어떤 유형의 모듈을 사용하는지?
3. 어떤 프레임 워크를 사용하는지?
4. TS를 이용하는지?
5. 코드가 브라우저, 노드 중 어디에서 실행되는지?
6. 설정 파일을 어떤 포맷으로 저장 할 것 인지?
7. 필요한 플러그인을 설치 할 것 인지?→ 필요한 옵션대로 설정하면 된다. 다만, 4번과 7번은 Y를 선택하자.
- 위의 설문이 끝나면 자동으로 6번에서 선택한 포맷대로
.eslintrc.json파일이 생성된다.
package.json에 script 추가하기
"scripts": {
"lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
"lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'"
}- 위의 명령어를 추가 함으로써
npm run lint를 이용하여 프로젝트 전체의 lint 오류를 검사 한 내용을 표시 할 수 있으며,npm run lint:fix를 이용하여 자동 수정이 가능하다.
airbnb 규칙 설정하기
- 필수라고 볼 수는 없으나, 사내에서 lint 규칙을 설정하는 경우를 상정하고 airbnb 에서 제공하는 규칙을 설치해보았다.
- 아래의 플러그인들은
npm i -D eslint-config-airbnb를 이용하여 react 에 적용되는 규칙을 추가해주기 위해 필요한 플러그인들이며, 각 플러그인의 용도는 아래와 같다.eslint-plugin-import: ES6의import,export구문을 지원한다.eslint-plugin-react: React 규칙이 들어있는 플러그인eslint-plugin-react-hooks: React Hooks 규칙이 들어있는 플러그인eslint-plugin-jsx-a11y: JSX요소의 접근성 규칙에 대한 정적 검사 플러그인
npm info "eslint-config-airbnb@latest" peerDependencies로 위의 플러그인들을 확인 할 수 있다.
npm i -D eslint-plugin-react eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y eslint-plugin-import- 위의 명령어를 통해 필요한 플러그인을 설치 할 수 있지....만.....
npx install-peerdeps --dev eslint-config-airbnb를 이용하면 사용하고자 하는 라이브러리와 해당하는peerDependencies를 한번에 설치 할 수 있으니 이걸 주로 사용합시다.
→peerDependencies는 해당 라이브러리가 사용되는 프로젝트에 어떤 라이브러리를 함께 사용해달라고 요청하는 것과 같다고한다!
추가 설정
- 아래의 설정을 위해서는
npm i -D eslint-import-resolver-typescript를 이용하여 해당 플러그인을 설치해주어야 한다. - airbnb 플러그인을 설치하게 되면 해당 규칙에 맞게 에러를 표시하게 되는데, 그 중 자잘자잘한 에러들을 제거해주기 위한 설정을 끝마친 최종
.eslintrc.json은 아래와 같다.
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"airbnb",
"airbnb/hooks",
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules":{
"react/jsx-filename-extension":["warn",{"extensions":[".tsx"]} ],
"import/extensions":[
"error",
"ignorePackages",
{
"ts":"never",
"tsx":"never"
}
]
},
"settings":{
"import/resolver":{
"typescript":{}
}
}
}.eslintignore를 이용하여 적용시키지 않을 폴더 혹은 문서를 설정 할 수 있다.
prettier 설치와 설정
npm i -D prettier eslint-config-prettier eslint-plugin-prettier를 이용하여 prettier와 필요한 플러그인을 해당 프로젝트에 설치한다.- 이후
.prettierrc파일을 생성하고, 해당 파일 내부에 중괄호를 이용하여“key” : value로 값을 작성해주면 설정을 적용시킬 수 있다.
{
"trailingComma": "es5",
"parser": "typescript",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}
// 현재 사용하고 있는 설정→ 속성의 이름과 값은 https://prettier.io/docs/en/options.html 를 참조 할 수 있다.
.prettierignore를 이용하여 적용시키지 않을 폴더 혹은 문서를 설정 할 수 있다.
package.json에 script 추가하기
"scripts": {
"prettier": "prettier --write --config ./.prettierrc './src/**/*.{ts,tsx}'"
}npm run prettier를 이용하여 프로젝트 전체의 스타일을 컨벤션에 맞게 수정 할 수 있다.
.eslintrc.json 수정하기
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"prettier", // 추가
"airbnb",
"airbnb/hooks",
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended" // 추가
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules":{
"react/jsx-filename-extension":["warn",{"extensions":[".tsx"]} ],
"import/extensions":[
"error",
"ignorePackages",
{
"ts":"never",
"tsx":"never"
}
]
},
"settings":{
"import/resolver":{
"typescript":{}
}
}
}- 위의 과정을 통하여 CRA 를 이용한 React TS, eslint, prettier 개발 초기 세팅이 끝났다.
+
- 생각보다 복잡해서 세팅과 블로그 정리가 오래 걸렸다.
- 한번 삽질했으니, 다음 프로젝트에서 새로운 프로젝트를 시작할 때 도움이 될 것 같다!
