블로그를 이전하였습니다. 2023년 11월부터 https://bluemiv.github.io/에서 블로그를 운영하려고 합니다. 앞으로 해당 블로그의 댓글은 읽지 못할 수 도 있으니 양해바랍니다.
반응형
1. 목표
- 프로젝트를 생성
- prettier와 eslint를 설정
2. 프로젝트 생성
react-create-app으로 프로젝트를 생성한다. 아래 명령어 수행
<shell />
$ yarn create react-app todo-app
생성 후 실행 확인해보자. 아래 명령어 수행 후 localhost:3000으로 접속
<shell />
$ cd todo-app
$ yarn start
(리액트 로고가 뱅글뱅글 돌아가는 화면이 나온다)
3. vscode에서 prettier와 eslint 설정
본 프로젝트는 vscode를 이용해서 개발할 예정이므로, vscode 환경에서 본 글을 작성한다.
prettier와 eslint의 설정은 필수는 아니지만, 가독성 좋고 좋은(?) 코드를 작성하기 위해서 사용합니다. 특히 협업으로 개발할때는 거의 필수적으로 사용한다고 보면 됩니다. (마치 단체 생활을 위한 규칙 같은것)
3.1. vscode 플러그인 설치
eslint 와 prettier 플러그인을 설치한다.
3.2. yarn을 통해 prettier와 eslint 설치
우선 아래 명령어를 통해 prettier와 eslint를 설치한다
- prettier와 eslint는 개발할때만 필요한 모듈이므로 --dev 옵션으로 설치한다.
<shell />
$ yarn --dev add prettier eslint eslint-config-prettier eslint-plugin-prettier
--dev 옵션으로 설치하면 아래와 같이 devDependencies에 추가된다.
<java />
{
...
"devDependencies": {
"eslint": "^7.30.0",
"prettier": "^2.3.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
},
...
}
3.3. eslint 설정
아래 명령어로 eslint 설정파일인 .eslintrc.json 파일을 생성할 수 있다.
- 대화 형식으로 이루어지기 때문에 손쉽게 만들 수 있다
<shell />
$ yarn eslint --init
<html />yarn run v1.22.10 $ /Users/hong/dev/git/project/todo-app/node_modules/.bin/eslint --init ✔ How would you like to use ESLint? · style ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · react ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · browser ✔ How would you like to define a style for your project? · guide ✔ Which style guide do you want to follow? · airbnb ✔ What format do you want your config file to be in? · JSON Checking peerDependencies of eslint-config-airbnb@latest The config that you've selected requires the following dependencies: eslint-plugin-react@^7.21.5 eslint-config-airbnb@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.22.1 eslint-plugin-jsx-a11y@^6.4.1 eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0 ✔ Would you like to install them now with npm? · No / Yes Installing eslint-plugin-react@^7.21.5, eslint-config-airbnb@latest, eslint@^5.16.0 || ^6.8.0 || ^7.2.0, eslint-plugin-import@^2.22.1, eslint-plugin-jsx-a11y@^6.4.1, eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0
- How would you like to use ESLint? · style
- What type of modules does your project use? · esm
- Which framework does your project use?: 프레임워크 선택 (react 선택)
- Does your project use TypeScript?: 타입스크립트 사용여부 (No)
- Where does your code run?: 동작 환경 (browser 선택)
- How would you like to define a style for your project? · guide
- Which style guide do you want to follow?: 스타일 가이드 (airbnb 선택)
- What format do you want your config file to be in?: config 파일 포맷 선택 (JSON 선택)
- Would you like to install them now with npm?: 필요한 모듈 설치 여부 (yes)
react에서는 airbnb 코드 컨벤션을 많이 사용한다. strict 하여 품질 좋은 코드를 작성할 수 있도록 도와준다.
- 명령어 수행을하고 나면, 필요한 모듈을 추가적으로 가지고오고 package.json에 추가된다.
<java />
{
...
"devDependencies": {
"eslint": "^7.30.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.2"
},
...
}
그리고 프로젝트 root에 .eslintrc.json 파일이 생성된다.
- 그리고 아래와 같이 약간의 수정 작업을 해준다.
<javascript />
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["eslint:recommended", "plugin:prettier/recommended", "airbnb"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["prettier", "airbnb"],
"rules": {
"prettier/prettier": "error"
}
}
그리고 vscode 설정 파일인 settings.json 파일에 아래 내용을 추가한다.
<java />
{
...
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
3.4. Prettier 설정
.prettierrc.json 파일을 생성한다
<javascript />
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"useTabs": false,
"singleQuote": true,
"printWidth": 80
}
"trailingComma": "es5": 객체, 배열을 사용할 때, 맨 뒤에 쉼표를 붙임 ([1, 2, 3,])"tabWidth": 2: 탭의 길이 (위에서는 스페이스 2번)"semi": true: 맨 뒤에 세미콜론 사용"useTabs": false: 탭 사용하지 않음"singleQuote": true: 쌍따옴표가 아닌 홑따옴표 사용"printWidth": 80: 한 줄의 길이
반응형
'Frontend > React' 카테고리의 다른 글
| React로 간단한 ToDo List 만들기 (#3 전체적인 틀 개발) (0) | 2021.07.12 |
|---|---|
| React로 간단한 ToDo List 만들기 (#2 기획 및 화면 구성) (0) | 2021.07.12 |
| nodejs 프록시 변경 (yarn config set proxy, https-proxy) (3) | 2021.07.08 |
| node 사내 저장소 바라보게 설정 (yarn config set registry) (2) | 2021.07.08 |
| Window에서 React 환경 구축하고 eslint 설정하기 (0) | 2021.07.08 |
