[TypeScript] 타입스크립트 프로젝트 환경 구성

 

 dependencies와 devDependencies

dependencies에 있는 typescript 삭제

npm uninstall typescript

devDependencies에 라이브러리 추가 (배포아닌 개발용 -D 또는 --save--dev)

npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier

npm 설정파일 package.json에는 라이브러리(패키지)가 들어가 있다.

// package.json

"devDependencies": {
  "@babel/core": "^7.14.6",
  "@babel/preset-env": "^7.14.5",
  "@babel/preset-typescript": "^7.14.5",
  "@typescript-eslint/eslint-plugin": "^4.27.0",
  "@typescript-eslint/parser": "^4.27.0",
  "eslint": "^7.28.0",
  "eslint-plugin-prettier": "^3.4.0",
  "prettier": "^2.3.1",
  "typescript": "^4.3.2"
}

dependencies에는 애플리케이션 직접관여하는 제이쿼리, 차트라이브러리가 들어가며

devDependencies에는 개발할 때만 쓰는 (typescript, eslint, prettier, babel 등) 도구들이 들어가고 build하고 최종적으로 내보낼때에는 dependencies에 있는 내용만으로 배포된다.

즉, 배포할 때 포함되는 라이브러리는 dependencies에 개발할 때 쓰는 라이브러리는 devDependencies에 위치한다.

 

 ESLint (문법 검사 라이브러리)

 

ECMAScript 코드에서 문제점을 검사하고 나은 코드로 정정하는 정적 코드 분석 도구인 린트 중의 하나로,

코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 좋은 코드를 만들어 준다.

프로젝트 ESLint 설정 파일 추가

// .eslintrc.js 
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        semi: true,
        useTabs: false,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
        endOfLine: 'auto',
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser', // TS를 ESLint 인식할 수 있는 형태 EStree로 변환
  },
};

들여쓰기, any타입, 사용하지 않은 변수 등을 warning으로 알려준다.

 

들여쓰기

any타입 구체화 미정의

한번도 사용하지 않은 변수

ESLint ignore 파일 추가

// .eslintignore
node_modules

VSCode ESLint 플러그인 옵션 설정

 

cmd + shift + p (윈도우는 커맨드 대신 ctrl) 키를 이용하여 명령어 실행 창이 표시되면

Open Settings (JSON)에 들어가 VSCode 사용자 정의 파일인 settings.json 파일의 내용에 ESLint 플러그인 관련 설정을 추가한다.

 

{
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true // 코드 오류 저장시 자동수정
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

cmd(ctrl) + , 을 눌러 Settings에 들어가 Format On Save에 체크 해제를 시킨다.

ESLint에서 정리하는 코드와 Prettier와 같은 기타 포맷팅 도구들이 충돌하지 않게끔 방지한다.

 

 Babel(바벨)

 

https://iancoding.tistory.com/175

[JavaScript] Babel, Webpack, Polyfill이란?

최신 자바스크립트의 문법을 다양한 브라우저와 호환하기 위해 변경해준다.

// package.json

{
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.5",
    "@babel/preset-typescript": "^7.14.5",
    "@typescript-eslint/eslint-plugin": "^4.27.0",
    "@typescript-eslint/parser": "^4.27.0",
    "eslint": "^7.28.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "^2.3.1",
    "typescript": "^4.3.2"
  }
}

preset은 플러그인의 집합이다.

 

 Prettier (코드 정리 도구 라이브러리)

 

특정 규칙을 가지고 취향대로(opinionated) 코드를 정리해주는 code formatter이다.

https://prettier.io/

Prettier · Opinionated Code Formatter

// .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error', // warn으로 하면 warning만 뜸
      {
        singleQuote: true, // 작은 따옴표
        semi: true, // 세미콜론
        useTabs: false, // 탭사용
        tabWidth: 2, // 탭간격
        printWidth: 80, // 한줄 80자까지
        bracketSpacing: true, // { foo: bar } 오브젝트 리터럴 내 간격
        arrowParens: 'avoid', // 화살표함수 관련 avoid는 x => x, always는 (x) => x
        endOfLine: 'auto', // Delete `␍` eslint (prettier/prettier) 오류해결
      },
    ],
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

Delete `␍` eslint (prettier/prettier)와 같은 오류가 날 때는

rules: { 'prettier/prettier': ['error', { endOfLine: 'auto', } 를 넣어주면 된다.

 

 TSLint가 아닌 ESLint를 쓰는 이유

 

TSLint 도구보다 ESLint가 훨씬 더 좋은 퍼포먼스를 내서 즉, 성능 문제 때문에 ESLint를 쓴다고 한다.