TypeScript + NextJs + ESLint

1. 개발 하면서 생각한 것들

• 마크주석
• 띄어쓰기를 어떻게 할 건지 (Ex. 타이핑할 때 [변수 이름]: [Type] or [변수 이름] : [Type])
• 코드 순서 (styled.div를 맨 위에? 맨 아래에?)

2. 플러그인 & 옵션 알아보기

1) 플러그인

• eslint-plugin-import: 임포트 관련 (파일, 폴더, 모듈)

• eslint-plugin-jsx-a11y: 접근성, 코드 완결성

• eslint-plugin-prettier

• eslint-plugin-react

• eslint-plugin-react-hooks

• @typescript-eslint/eslint-plugin

• @typescript-eslint/parser

2) 옵션 (rules?)

ESLint

Rules

• "off" - 옵션 적용 안 시키기
• "warn" - 경고만 보여주는데 실행은 되게
• "error" - 에러 발생시킴 (exit code 1번으로 종료)

규칙에 추가 옵션이 있는 경우에는 배열에 넣어서 표현

{
  "rules": {
    "eqeqeq": "off",
    "curly": "error",
    "quotes": ["error", "double"]
  	"comma-style": ["error", "last"],
  }
}

Rules 종류

List of available rules

내가 생각하는 필요한 옵션

{
  "rules": {
    "func-call-spacing": "never",
		"comma-spacing": ["error", { "before": false, "after": true }],
  }
}

• func-call-spacing: 함수 호출 뒤에 띄어쓰기 삭제 (자동 수정)
  func-call-spacing - Rules

• comma-spacing: 콤마 앞 띄어쓰기 삭제, 뒤 띄어쓰기 무조건 (자동 수정)
  comma-spacing - Rules

3) airbnb 설정 (eslint-config-airbnb)

두가지의 airbnb 설정(eslint-config-airbnb, eslint-config-airbnb-base)이 있습니다. 이 두가지의 차이점은 설정파일에 리액트 규칙이 있냐 없냐의 차이입니다.

• eslint-config-airbnb에는 리액트 관련 규칙이 모두 들어 있고,
• eslint-config-airbnb-base의 경우에는 리액트를 제외한 규칙이 들어 있습니다. (서버 같은 데서 사용)

~ npm v.4 : npm info "eslint-config-airbnb@latest" peerDependencies를 입력하면 설치해야하는 리스트들이 나옵니다. 각자 설치를 해주도록 합니다.

npm v.5 ~ : npx install-peerdeps --dev eslint-config-airbnb로 자동으로 플러그인 및 설정들을 설치해줍니다

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended"]
}

설정파일에 추가합니다.

3. 공식 문서

ESLint - Pluggable JavaScript linter
What is Prettier? · Prettier

4. 읽은 자료들

prettier와 eslint설정하기(+타입스크립트 설정)
vscode에 eslint와 prettier 설정하기 | NOT_NULL
ESLint, Prettier 적용하기
Eslint 적용하기(React + Typescript + Prettier)