"Setting" 태그로 연결된 2개 게시물개의 게시물이 있습니다.

201215

2020년 12월 15일 · 약 3분

younho9

React + TypeScript + Storybook + ESLint 세팅#

프로젝트 생성#

yarn create react-app my-app-name --template typescript

CRA + ESLint + Prettier#

Create-React-App with TypeScript, ESLint, Prettier, and Github Actions

tsc —noEmit : https://stackoverflow.com/questions/55002137/typescript-noemit-use-case

Husky + lint-staged#

사용하지 않는 파일 지우기#

reportWebVitals - web-vitals를 통한 성능 측정에 사용됨
- https://create-react-app.dev/docs/measuring-performance/#web-vitals
```
yarn remove web-vitals
```
setupTests.ts - browser API를 사용하거나 Test 실행 전 global setup이 필요한경우에 사용
- jest의 setupFilesAfterEnv 와 관련 - https://jestjs.io/docs/en/configuration#setupfilesafterenv-array
- https://create-react-app.dev/docs/running-tests/#initializing-test-environment
react-app-env.d.ts - yarn start 마다 생성됨. 많은 유저가 생성을 멈춰달라고 react team에 요청함
- .gitignore 에 /src/react-app-env.d.ts 추가
- .vscode/settings.json 에 추가
```
"files.exclude": {  "src/*.d.ts": true}
```
- https://github.com/facebook/create-react-app/issues/6560

.gitignore#

.gitignore 는 프로젝트에서 중요한 것으로 응용 프로그램 자체에서 생성한 파일이나 디렉토리를 나열해야 한다. 가장 좋은 예는 캐시 파일, 로그, 로컬 구성 등이다.

.vscode , .idea , .DS_Store 등은 프로젝트의 .gitignore 보다 컴퓨터의 글로벌 .gitignore 에 추가하는 것이 좋다.

글로벌 .gitignore 는 home 디렉토리의 .gitconfig 을 보면 알 수 있다.

[core]    excludesfile = /Users/{home}/.gitignore_global

Don't put .idea and .vscode directories to project's .gitignore

폴더 구성하기#

└── src    ├── components        └── src    ├── pages    ├── App.tsx    └── index.tsx

Storybook 설치하기#

npx sb init

lint error 발생 (임시)

.eslintignore

**/*.stories.tsx**/stories/*.tsx

.eslintrc.js

rules: {  // ...
  'import/no-extraneous-dependencies': [    'error',    {      devDependencies: [        '**/*.stories.tsx',      ],    },  ],
  // ...}

storybook babel-loader crash
create-react-app babel-loader clash · Issue #4764 · storybookjs/storybook

https://storybook.js.org/docs/react/get-started/install

201121

2020년 11월 21일 · 약 2분

Younho Choo

younho9

ESLint#

포맷팅
코드 품질

규칙#

rules 로 추가 가능

자동으로 수정할 수 있는 규칙과 그렇지 않은 규칙이 있음.
규칙 목록 중 렌치 기호가 붙은 것이 자동으로 수정할 수 있는 규칙
--fix 옵션으로 수정할 수 있다.

List of available rules

Extends#

여러 규칙을 모아놓은 것들
eslint:recommended , eslint-config-airbnb-base , eslint-config-standard 등이 있다.

init#

--init 옵션으로 대화식으로 설정 가능

npx eslint --init
? How would you like to use ESLint?? What type of modules does your project use?? Which framework does your project use?? Where does your code run?? How would you like to define a style for your project?? Which style guide do you want to follow?? What format do you want your config file to be in?

Prettier와의 통합#

Integrating with Linters · Prettier