CRA+Typescript+ESLint+Prettier의 초기 보일러 플레이트 설정을 기록하기 위한 글

Typescript CRA 생성

$npx create-react-app "프로젝트명" --template typescript

---

tsconfig.json 수정

기존 생성되어 있던 tsconfig.json 파일을 아래와 같이 수정

추가한 코드는 “baseUrl”: “./src”이며 기본 절대 경로를 사전에 설정하여 추후에 길어지는 경로문제를 제어하기 위해 추가한 설정이다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "baseUrl": "./src",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

---

ESLint 설정

1. VScode extension에서 eslint 설치

2. default config 제거

CRA를 통해 생성되어진 프로젝트의 package.json에서 아래의 코드를 제거한다.

"eslintConfig": {
   "extends": [
     "react-app",
     "react-app/jest"
   ]
 },

3. install eslint & setup

설치 경로의 시작점은 프로젝트 루트 폴더이다.

$npm install -D eslint // 설치
$npx eslint --init // 설정

위와 같이 진행하면 eslint 설치에 대해 여러 질문들이 나오게된다.

위와 같이 절차를 진행하면 .eslintrc.json 파일이 생성된다.

4. 초기 Error 해결

이제 터미널을 열고 아래 명령어를 입력한다.

$npx eslint src/* --fix

결과는 무수한 에러가 나타난다.
이 때 초기 CRA의 불필요한 파일들을 정리하고 아래와 같이 .eslintrc.json 파일의 코드를 수정한다.

{
	"env": {
		"browser": true,
		"es2021": true
	},
	"extends": [
		"plugin:react/recommended",
		"airbnb",
		"plugin:@typescript-eslint/recommended",
		"plugin:prettier/recommended"
	],
	"parser": "@typescript-eslint/parser",
	"parserOptions": {
		"ecmaFeatures": {
			"jsx": true
		},
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"plugins": ["react", "react-hooks", "@typescript-eslint"],
	"rules": {
		"react-hooks/rules-of-hooks": "error",
		"react-hooks/exhaustive-deps": "warn",
		"@typescript-eslint/explicit-function-return-type": "off",
		"prettier/prettier": "error",
		"react/jsx-filename-extension": [
			2,
			{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
		],
		"import/extensions": [
			2,
			"ignorePackages",
			{
				"js": "never",
				"jsx": "never",
				"ts": "never",
				"tsx": "never"
			}
		]
	},
	"settings": {
		"import/resolver": {
			"node": {
				"extensions": [".js", ".jsx", ".ts", ".tsx"],
				"moduleDirectory": ["node_modules", "@types"]
			},
			"typescript": {}
		}
	}
}

그 후 초기 CRA의 불필요한 파일들을 정리하고 코드들을 지워준다.

그 후 다시 에러를 검출했던 eslint 명령어를 실행하면 에러가 검출되지 않는다.

프로젝트를 개발하면서 생기는 린트 오류가 있다면 팀원들과 소통을 통해 해결해나가자.

---

Prettier 적용

1. Prettier install

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

2. Prettier setup

.eslintrc.json 파일 수정

// eslint 설정파일에 extends와 rules에 prettier 추가
extends: [
  'plugin:react/recommended',
  'airbnb',
  'plugin:prettier/recommended', // 순서가 중요함 가장 뒤에
],
rules: {
  'prettier/prettier': 'error',
  ...
},

그 후 .prettierrc.json 파일을 프로젝트 루트 폴더에 생성하고 아래와 같이 설정해준다.
자세한 옵션은 링크 참고

{
	"singleQuote": true,
	"semi": true,
	"useTabs": true,
	"tabWidth": 2,
	"printWidth": 80,
	"arrowParens": "always"
}

3. VScode 설정

{ 
  ...
  
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  
 ...
}

---

이상으로 글을 마치려고한다. 결코 쉽지않은 과정이였는데 우리는 효과적인 협업을 진행하기 위해 위와 같은 많은 설정들을 추가한다.

아직까지 자세한 옵션 설정까지에 대한 이해도가 부족하고 경험을 통해 많은 내용들을 알아가기 위해 이 글을 남기게 되었다.