[React/CRA] CRA + typescript + Eslint + prettier 초기 세팅하기

들어가며,

리액트로 반응형 웹을 만들기 위해 프로젝트 초기설정을 하고 있던 와중, 정보가 너무나 많아서 한 번에 정리하고 나중에 다시 보기 위해 글을 써서 정리해두려고 한다. 예전에 Vite로 스캐폴딩하는 법은 써놨으니 Vite로 설정하는 방법은 맨 아래 추가하겠다.

 

본론

일단 난 CRA를 통해 프로젝트를 만들었고 여기에 typescript 와 eslint, prettier를 설치할 것이다.

 

1. CRA + typescript 설치하기

npx create-react-app <프로젝트 이름> --template typescript

 

이렇게 프로젝트를 만들어주면 루트에 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"]
}

 

 

 

2. Eslint 설치하기

코드의 가독성을 높여주기 위해 사용한다. 코드를 분석해서 문법적 오류, 안티 패턴을 찾고 일관된 코드 스타일로 작성하도록 돕는다.

외부에 공개되어 많은 개발자가 사용하는 Airbnb Style Guide, Google Style Guide가 대표적이다.

 

2-1. 프로젝트에서 eslint를 설치하자.

npm install -D eslint

 

 

2-2. 프로젝트 루트 폴더에서 "npx eslint --init"을 입력하자.

1. How would you like to use ESLint?
-> To check syntax, find problems.

2. What type of modules does your project use?
-> JavaScript modules (import/export)

3. Which framework does your project use?
-> React

4. Does your project use TypeScript?
-> Yes

5. Where does your code run?
-> Browser

6. What format do you want your config file to be in?
-> Javascript

7. Would you like to install them now with npm?
-> Yes

 

이러한 설정은 본인이 원하는대로 설정해주면 된다.

 

2-3. 추가 플러그인 설치

npm install -D eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

 

이것을 설치하면 자동으로 devDependecies에 밑의 항목들이 추가된다.

- eslint-plugin-import : ES6의 import, export 구문 지원 (필수 플러그인)

- eslint-plugin-react : react 규칙이 들어있는 플러그인

- eslint-plugin-react-hooks : React Hooks 규칙이 들어있는 플러그인

- eslint-plugin-jsx-a11y : JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인

 

또, Eslint와 prettier를 함께 사용할 때 필요한 패키지를 설치해준다.

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

 

- eslint-plugin-prettier : Eslint와 prettier 간 통합을 도와준다. 보통 prettier는 코드 스타일과 관련된 사항을 다루지만 Eslint는 코드 품질과 관련된 규칙들을 다룬다. 이 플러그인은 prettier의 포메팅 룰을 Eslint 규칙으로 변환해 Eslint에서 실행될 때 prettier와 함께 사용할 수 있도록 한다.

- eslint-config-prettier : prettier와 Eslint의 규칙들을 충돌하지 않도록 설정해준다. 이 플러그인을 설치하면 함께 사용할 때 규칙 충돌을 방지할 수 있다.

 

두 패키지는 Eslint와 prettier를 함께 사용할 때 원활한 통합을 도와주며, 만약 프로젝트에서 두 가지를 함께 사용하려면 위의 명령어를 통해 패키지들을 설치해주는 것이 일반적이다. 

 

설치 후 '.eslintrc.js' 파일에 들어가 다음과 같이 설정해준다.

{
  "extends": ["plugin:prettier/recommended"]
}

 

그리고 나는 밑과 같이 설정해두었다.

 

module.exports = {
	env: {
		browser: true,
		es2021: true,
	},
	extends: [
		'eslint:recommended',
		'airbnb',
		'plugin:@typescript-eslint/recommended',
		'plugin:react/recommended',
		'plugin:prettier/recommended',
	],
	overrides: [
		{
			env: {
				node: true,
			},
			files: ['.eslintrc.{js,cjs}'],
			parserOptions: {
				sourceType: 'script',
			},
		},
	],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
	},
	plugins: ['import', '@typescript-eslint', 'react', 'react-hooks'],
	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: {},
		},
	},
};

 

 

3. prettier 설치하기

정해진 코딩 스타일에 맞게 코드를 변환하기 위해 사용한다. 따라서, prettier와 Eslint를 같이 쓰면 코드 품질을 바로 잡고 코드를 정해진 코딩 스타일에 맞게 바꿀 수 있다.

 

3-1. 프로젝트에 prettier 설치

npm install -D prettier

 

3-2. 파일 수정

 

.eslintrc.js 파일을 수정한다.

// 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"
}

 

 

 

마무리

 

본인이 원하는대로 설정할 수 있기 때문에 추가적인 설정은 찾아보고 설정해두는 것도 좋을 것 같다.

효과적인 협업을 위해 한 번 설정들을 읽어보고 원하는대로 추가하는 것도 좋겠다.

많은 옵션 설정들이 있기 때문에 기본적인 것을 적어두고 자세한건 나중에 더 추가해야겠다.

 

추가

Vite로 리액트 프로젝트 환경설정 하기

 

https://hayeonn.tistory.com/81

[React/Vite] Vite로 리액트 프로젝트 환경설정 하기

https://hayeonn.tistory.com/83

[React/Vite] ESLint 설정하기

https://hayeonn.tistory.com/84

[React/Vite] Prettier 설정하기