실습 - 3. 점진적인 타입 적용을 위한 프로젝트 환경 구성

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

1. 프로젝트 폴더 생성
2. npm init -y로 package.json 파일 생성
3. 아래 명령어로 타입스크립트 및 문법 검사(eslint), 코드 정리 도구(prettier) 라이브러리 추가

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

// package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "실습 프로젝트",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@babel/preset-typescript": "^7.18.6",
    "@typescript-eslint/eslint-plugin": "^5.39.0",
    "@typescript-eslint/parser": "^5.39.0", 
    "eslint": "^8.24.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.7.1",
    "typescript": "^4.8.4"
  }
}

• Babel
  • 바벨은 최신 자바스크립트 문법을 최대한 많은 브라우저에서 호환될 수 있도록 컴파일 (또는 트랜스파일이라 부름)해주는 도구
  • 참고 링크 What is Babel? · Babel Configure Babel · Babel Presets · Babel
    
• ESLINT
  • 자바스크립트 코드 문법 도구로 잠재적인 에러 가능성들을 코드 레벨에서 줄이는데에 도움을 줌
  • 코드의 자동완성, 코드의 자동 포맷팅 또한 지원함
  • .eslintrc.{js, yml, json} 확장자 형식으로 작성 가능함, 파일의 병합을 고려할 경우 js 확장자가 유리
  • 참고 링크 Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

    // .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",
          },
        ],
      },
      parserOptions: {
        parser: "@typescript-eslint/parser",
      },
    };

• Prettier

  • 코드 포맷터인데 개인의 취향대로 설정할 수 있음

  • 팀 단위 코딩 컨벤션을 만들어서 적용할때 많이 사용됨

  • 충돌을 막기위해 .prettierrc가 아닌 .eslintrc.js에서 프리티어 룰을 설정

    Prettier · Opinionated Code Formatter

4. 프로젝트 폴더 바로 아래에 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",
      },
    ],
  },
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
};

5. ESLint 이그노어 파일 추가

// .eslintignore
node_modules

VSCode ESLint 플러그인 관련 설정

1. VSCode의 ESLint 플러그인 설치
2. VSCode에서 ctrl + shift + p / cmd + shift + p 키를 이용하여 명령어 실행 창 표시
3. 명령어 실행 창에 open settings (json) 입력 후 선택
4. VSCode 사용자 정의 파일인 settings.json 파일의 내용에 아래와 같이 ESLint 플러그인 관련 설정 추가.

{
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
	// 저장 시 코드 포맷팅
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
	// eslint 상태를 항상 보여줌
  "eslint.alwaysShowStatus": true,
	// eslint 코드가 있는 디렉터리에 쫒아가서 밸리데이션 할 수 있게끔 해줌
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

1. ctrl + , 또는 cmd + , 눌러서 VSCode 설정 파일(Settings)에 들어간 후 format on save 검색. 체크가 안되어 있는지 확인. 체크되어있으면 해제.