CRA(Create React App)에 tslint, eslint, prettier 적용하기

지금 만드는 토이프로젝트에 tslint, eslint, prettier을 적용한 겸 세팅값을 블로그에도 적어둔다.

CRA로 만든 프로젝트에 따로 webpack config를 eject 하지 않고 위에 3개를 적용할 수 있는 방법임.

Step 1: 온갖 devDependencies를 설치한다.

npm i -D @types/react typescript-eslint/eslint-plugin typescript-eslint/parser eslint eslint-config-prettier eslint-config-react eslint-loader eslint-plugin-prettier prettier tslint typescript

다만 여러분이 이 글을 보는 시점에 https://github.com/prettier/prettier-atom/issues/505#issuecomment-516791742 이 Issue가 해결되지 않았다면 eslint는 5.16.0 버전으로 설치한다(19년 9월 기준으로 v6임)

// eslint를 5.16.0 으로 박아둔 버전
npm i -D @types/react typescript-eslint/eslint-plugin typescript-eslint/parser eslint@5.16.0 eslint-config-prettier eslint-config-react eslint-loader eslint-plugin-prettier prettier tslint typescript

왜냐면 에디터 prettier에서 dependency 에러가 나더라. Failed to load plugin 'prettier' declared in 'CLIOptions': Cannot find module 'eslint-plugin-prettier' 라고 나옴. eslint를 5.16버전으로 다운그레이딩하면 이 에러가 사라진다. 곧 Fix PR 만든다고 했으니 미래에는 에러 해결이 되었길…

내 package.json은 다음과 같다

"devDependencies": {
    "@types/react": "^16.9.2",
    "@typescript-eslint/eslint-plugin": "^2.3.0",
    "@typescript-eslint/parser": "^2.3.0",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^6.3.0",
    "eslint-config-react": "^1.1.7",
    "eslint-loader": "^3.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "prettier": "^1.18.2",
    "tslint": "^5.20.0",
    "typescript": "^3.6.3"
  },

Step 2: eslint 셋업을 하는 .eslintrc.json 파일을 만든다

eslint의 세부사항을 셋업할 수 있는 파일을 루트폴더에 생성한다. 잘 보면 타입스크립트와 프리티어 세팅 모두 박혀있다.
.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "env": {
    "browser": true,
    "jasmine": true,
    "jest": true
  },
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser"
}

Step 3: 몇몇 파일에 eslint를 disable시킬 .eslintignore 파일을 만든다

서비스워커 파일이나 tests 폴더나 legacy 소스들에는 eslint를 끄고싶은 분들도 있을거다. ignore할 수 있는 파일을 만든다.

.eslintignore

src/registerServiceWorker.js
src/**/__tests__/**

Step 4: 타입스크립트 린트 세팅 파일인 tslint.json을 만든다

TSlint 셋업을 해준다. 요거 키면 .tsx 파일들에 빨간줄이 무지막지하게 나온다.

tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
      "quotemark": false
    },
    "rulesDirectory": []
}

Step 5: 예쁘게 코드 포매팅을 해주는 프리티어 세팅 파일인 .prettierrc 를 만든다

이렇게 프리티어 세팅을 해주고 VSCode에서 mac기준 shift + option + f를 누르면 세팅값대로 코드를 예쁘게 성형해준다. 입맛대로 세팅을 해준다. 프리티어 다큐멘테이션 참고하삼 https://prettier.io/docs/en/options.html 아래는 제 세팅

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "orderedImports": true
}

(optional) Step 6: 이제 다했당. package.json에 eslint 바로 고쳐주는 스크립트를 짜둔다

lint:fix 란 이름으로 eslint fix 스크립트를 짜두면 언제든 npm run lint:fix 명령어로 린트 픽스를 할 수 있다. (하지만 난 파일마다 수동으로 단축키를 통해 고치는걸 선호하지)

"scripts": {
    ...
    "lint:fix": "eslint './src/**/*.{ts,tsx}'"
  }

끗!
이제 열시미 js랑 tsx 파일 린트에러를 고치면 됩니다.

적용한 파일은 https://github.com/milooy/TellMe/commit/d2c5520b9d4c0ebfac2629ca2f02066afbeb61b8 참고

[React] External component를 StyledComponent로 감쌌을 때 ‘Warning: Unknown props’ 워닝 해결

Problem

에러가 났을 때 빨간 글자색을 보여주기 위해 StyledComponent에 hasError 프로퍼티를 넘기고

<StyledField hasError={hasError} />

이를 스타일링만 하기 위해 StyledComponent에서만 받아 썼더니

const StyledField = styled(Field)`
  color: ${({ hasError }) => (hasError ? "red" : "black")};
`;

Warning: React does not recognize the errorMessage prop on a DOM element. 에러가 났당. 컴포넌트를 감싼에서만 prop을 쓰고 그 안쪽의 “에서는 errorMessage prop을 안써서 나는 워닝이다.
Screen Shot 2019-09-19 at 4.56.18 PM

Solution

spread operator(...rest)로 hasError를 제외한 나머지 properties만 Field 컴포넌트에 내려보내주면 된다. 코드 드럽네

const StyledField2 = styled(({ hasError, children, ...rest }) => (
  {children}
))`
  color: ${({ hasError }) => (hasError ? "red" : "black")};
`;

Refer

https://github.com/styled-components/styled-components/issues/305

Github Pages로 배포할 폴더 변경하기

결론: subtree를 만들어서 gh-pages브랜치에 원하는 폴더만 올리면 된다.

  1. .gitignore에서 배포 원하는 폴더를 주석처리 (e.g. /public, /dist)
  2. 원하는 폴더를 add하고 commit한다: git add 폴더이름 &amp;&amp; git commit -m "Initial subtree commit"
  3. 서브트리로 gh-pages에 푸시 해준다: git subtree push --prefix 폴더이름 origin gh-pages

두번째 푸시부터 안되는 분들은 아래 3번째 명령어를 써보셔요

  1. git add docs && git commit -m “Subtree commit”
  2. git subtree push –prefix docs origin
  3. git push origin git subtree split --prefix docs master:gh-pages –force

refer: https://gist.github.com/cobyism/4730490

매니아가 선정한 만화책 TOP 200 중 내가 본것

오늘은 일요일이다.

사실 할게 너무 많다.
회사 잔업 2시간가량 해야하고, Git 책 0장도 써야하고(갑자기 0장이 생김), 6월 10일까지 인강 3시간짜리 찍어야하는데 시작도 안했다.

그래서 나는 만화책을 보려고 한다.
데즈카 오사무의 ‘불새’.
리디북스에서 권당 700원으로 볼 수 있다.

‘죽기 전에 꼭 봐야 할 만화’에 있으니 반드시 봐야하는것이긴 하다.
언제 죽을지 모르니까 빨리 봐야함.
그 리스트에서 나는 32개를 봤넹. 재밌다. 근데 내 다른 인생만화들이 없어서 아쉽

Continue reading 매니아가 선정한 만화책 TOP 200 중 내가 본것

VS Code에 console.log shortcut 추가하기

Background

처음에는 emmet 방식처럼 간략한 텍스트를 입력하고 tab을 누르면 자동완성 되는 방향으로 했는데 반응이 너무 느려서 그냥 명령어 + 탭으로 보이는 경우가 왕왕 있었다. 그래서 스니펫 말고 키보드 쇼트컷 방식을 찾아봤다.

How to

  1. Code > Preferences > Keyboard Shortcuts를 들어간다

2. 상단의 ‘keybindings.json’ 클릭

3. 오른쪽의 Custom 영역에 원하는 키로 덮어쓴다. 나는 console.log("변수이름", 변수")` 식으로 자주 사용해서 snippet에 그렇게 입력해주고 ctrl+shift+l로 단축키를 엮어줬다.

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+l",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "console.log('$1', $2);$0"
        }
    }
]

4. 에디터에서 단축키를 눌러보면 잘 작동하는걸 볼 수 있다. 위에서 $1, $2로 원하는 위치에 숫자를 적어주면 그 곳으로 자동으로 포커스가 이동한다. $1에 원하는 텍스트를 입력하고 tab을 치면 $2로 넘어간다. 끝나면 $0으로 간다.

5. 즐코딩!

+ 단축키 없이 snippet 만들기

Preferences > User Snippets > javascript.json에 아래와 같은 코드를 넣는다

"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}