4주 프로젝트 DAY 5

• tslint type warning
• vscode extension live share
• tslint + prettier 연동하기
• eslint?
• prettier?

tslint type warning 처리하기

Use an interface instead of a type literal. (interface-over-type-literal)tslint(1)

제가 찾은 레퍼런스는 다음과 같은데요. https://palantir.github.io/tslint/rules/interface-over-type-literal/
interface를 type보다 선호한다네요. 확장성을 대비해서요.

그리고 더 찾아본건 확장성에 1도 관심없이 단순히 type을 만들고 싶은 사람들은 interface를 쓰라고 하는게 이해 안된다고도 하네요.
https://github.com/palantir/tslint/issues/3248
in your tslint.json, under "rules", mark it as false:

{
    "extends": ["tslint:recommended"],
    "rules": {
        "interface-over-type-literal": false
    }
}

vscode extension live share

내 IDE를 외부에서 접속해서 같이 코딩한다? 개꿀...

일단 live share를 하고싶은 사람들은 vscode extensions 버튼에서

live share를 검색후 설치한다!

설명에 나온대로

상태바(좌측하단)에 live share 버튼을 클릭한다.
URL이 클립보드에 복사가 되었을 것이다.
슬랙이나 채팅앱으로 cmd(ctrl) + v

tslint + prettier 연동하기

이미 tslint extension이 깔려있고,
tslint.json, tsconfig.json 설정이 다 되어있다는 가정하에
vscode extension prettier 설치후에

yarn add --dev tslint-config-prettier tslint-plugin-prettier prettier

in tslint.json

  "extends": [
    "tslint:recommended",
    "tslint-plugin-prettier", <- 
    "tslint-config-prettier"  <-
  ],
   "rules": {
    ...
   "prettier": true              <-
  },
  "rulesDirectory": ["tslint-plugin-prettier"] <-

in settings.json

"editor.formatOnSave": true, <-

요구사항 git push 하기전에 tslint만 따로 돌려서 정상적으로 linter가 규칙대로 동작하는지 알고싶다!!

in package.json

  "devDependencies": {
	...
    "tslint": "^5.20.0"
  }

tslint가 설치 되어있어야 해요. 없다면
yarn add -D tstlint 해야해요.

in package.json 그리고 스크립트를 추가해요.

  "scripts": {
	...
    "tslintonly": "tslint -c tslint.json"
  }

ESlint

ESLint는 ES + Lint입니다. ES는 EcmaScript, 즉 자바스크립트를 의미하는 것이고요. Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. 즉 ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미합니다.

팀단위로 개발할때 팀원전체가 코딩을 해도 코드를 보면 한사람이 짠 것처럼 코딩 스타일을 맞추자!

출처 : 제로초

linter를 이용한 코딩스타일과 에러 체크하기
https://subicura.com/2016/07/11/coding-convention.html

.eslintrc.js : tslint.json 에 대응되는것 같다.

예시

Airbnb규칙중에 react/jsx-no-bind규칙은 빼는게 현재 상황에 적당할 것 같아 해당 규칙을 뺍니다.
in .eslinttc.js

module.exports = {
    "extends": "airbnb",
    "plugins": [
        "react"
    ],
    "rules": {
    	"react/jsx-no-bind": "off"
    }
};

Prettier?

prettier 좋은 레퍼런스

VScode Code Formater 인 Prettier 완벽 적용하기

출처: https://ux.stories.pe.kr/150 [UX 공작소]