REACT 공식문서를 보고 typescript에 맞는 CRA로 개발환경 설정해보기
참 편한 CRA. 이젠 typescript까지 자동으로 설정해준다.
npx create-react-app my-app --template typescript
간단하게 이 명령어 하나로 끝이난다.
manually setting up은 나중에 해보자.
코드를 간편하게 작성하게 도와주는 eslint와 prettier설정을 typescript에 맞게 해보자
eslint linting 라이브러리 eslint,
eslint가 typescript를 lint 할 수 있도록 허용해주는 parser인 @typescript-eslint/parser
typescript에 구체화된 ESLINT rule들을 잔뜩 포함하는 플러그인인 @typescript-eslint/eslint-plugin
이 3가지를 package manager NPM을 통해서 설치할 것이다.
npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
설치가 완료되면 configuration 파일인.eslintrc.js
을 프로젝트 디렉토리 최상단, 즉 root 디렉토리에 만들어준다.
일단
module.exports = {
parser: "@typescript-eslint/parser",
extends: [
"plugin:@typescript-eslint/recommended"
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: "module" // Allows for the use of imports
},
rules: {
}
};
이렇게 설정해주고 react에서 타입스크립트를 사용하려면 eslint-plugin-react
의존성(?)을 설치해줘야한다.
npm i -D eslint-plugin-react
로 설치해주고
.eslintrc.js
파일을 아래와 같이 다시 설정해준다.
module.exports = {
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
extends: [
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
"plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true // Allows for the parsing of JSX
}
},
rules: {
},
settings: {
react: {
version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
}
}
};
참조한 블로그에 따르면
rules: {
//...
}
rules 부분에 Lint할 조건들을 적어주면 된다고 적혀있지만 prettier config를 통해서 바로 formatting으로 해주려고 한다.
프리티어는 ESLint와 함께 잘 작동하며 코드의 format을 자동으로 잡아주는 아주 좋은 extension이다.
prettier: The core prettier library
eslint-config-prettier: Disables ESLint rules that might conflict with prettier
eslint-plugin-prettier: Runs prettier as an ESLint rule
핵심 prettier 라이브러리인 prettier와
prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config인 eslint-config-prettier 그리고
ESLint 규칙에 따라 작동하게 해주는 플러그인인 eslint-plugin-prettier
이렇게 3가지를 아래의 명령어로 설치해준다.
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
그 후 eslint와 마찬가지로 .prettierrc.js
파일을 프로젝트 디렉토리 최상단에 만들어주고
안의 내용을 아래와 같이 채워준다.
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 120,
tabWidth: 4
};
위의 내용은 그냥 하나의 예제일뿐 나중에 내가 원하는 조건으로 다시 바꿔줄 것이다.
.prettierrc.js
파일 내용을 채워준 후 .eslintrc.js
파일 내용을 다시 바꿔주는데
블로그에서는 아래의 코드로 "대체"하라고 했으나 나는 수정된 부분만 바꿔주고 곂치지 않은 내용들은 그대로 유지하였다.
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
rules: {
// 추후 .prettierrc.js 파일에서 설정해줄 예정
},
settings: {
react: {
version: 'detect',
},
},
};
extend에 내용이 추가된 것 jsx부분이 빠진것 setting부분이 빠진것 이유에 대해서는 설명이 안나와있고 검색해도 알기 어려웠다. 일단 유지해보고 테스트 해보았을 때는 문제가 없었기에 그대로 유지하기로 결정했다.
이 부분은 prettier 공식문서를 보고 내 입맛대로 설정하였다.
.prettierrc.js
파일의 원래 내용은
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 120,
tabWidth: 4
};
이렇게 설정 되어있었지만 나랑 안맞는다.
그래서
module.exports = {
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "always",
"orderedImports": true,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "avoid",
};
공식문서를 보고 조건들에 맞춰서 내가 원하는 설정으로 바꿨다.
vscode 환경설정을 변경하여 파일을 저장할 때 마다 이쁘게 formatting해주었다.
vscode의 settings.json
파일을 열어서 아래와 같이 설정해보자.
{
"eslint.autoFixOnSave": true, // has been deprecated, use editor.codeActionsOnSave // instead 라고 써있었지만 주석 처리를 하면 저장 시 // formatting이 안되어서 주석을 풀었다.
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
],
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
}
}
이미 존재하는 설정들은 대체하고 없는 것들은 추가해주었다.
이렇게 설정하고 나서 시도해보니 아주 잘 설정되고있었다.
또한 지금까지는
import React from 'react'
import ReactDom from 'react-dom'
에서 from이 자꾸 밑줄이 처졌다.
그 부분들은
npm install --save@types/
+ react/react-dom/react-router/react-router-dom 등
나중에 필요할 것 같은 것들도 다 install 해줬다.
이게 무슨 기능이고 무엇을 도와주는지는 잘 모르겠다.
하지만 typescript여서 그런거 같다(?)
장정의 반나절의 삽질이 끝났다.
비공개로 작성한 블로그도 총 5개
CRA로 만들고 설정하고 도저히 답도 안나와서 삭제한 것들이 20개는 될 것이다.
그렇다고 이 블로그 내용이 최적화 즉 불필요한 설치없이 불필요한 config 세팅 없이 CRA+ESLint+prettier가 된 것은 아닌 것 같다.
정말정말 불필요한 것들 1도 없이 해보고 싶었지만 fail...
CRA로 만들었는데 필요한 것들만 넣고싶었다는 것도 뭔가 모순같지만
그래도 다음에는 CRA없이 manullay set up에 도전할 것이다!
끝-
너무 감사합니다!