1. TS create-react-app 생성

npx create-react-app project_name --template typescript

2. prettier 설정

code-formatter, 자동적으로 코드를 형식에 맞게 맞추어줌

1. prettier extension 설치

2. prettier 설치

npm install -D prettier

3. root에 .prettierrc 파일 생성 후 코드 넣기

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

4. settings.json 수정

내 vscode 기본 settings.json

{
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "liveServer.settings.useLocalIp": true,
  "liveServer.settings.host": "~~",
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  "bracket-pair-colorizer-2.depreciation-notice": false,
  "workbench.editorAssociations": {
    "*.docx": "default"
  },
  "code-runner.runInTerminal": true,
  "code-runner.terminalRoot": "/",
  "emmet.triggerExpansionOnTab": true,
  "editor.tabSize": 2,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "materialTheme.accent": "Bright Teal",
  "settingsSync.ignoredExtensions": [],

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": ["comment", "keyword.control"],
        "settings": { "fontStyle": "bold " } //주석과 키워드에 적용된 이탤릭 폰트스타일 해제
      }
    ],
    "comments": "#16bda7" //주석 색상변경
  },
  "workbench.iconTheme": "eq-material-theme-icons-ocean",
  "workbench.colorTheme": "Community Material Theme Darker High Contrast",
  "prettier.singleQuote": true,
  "javascript.format.enable": false,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
  "remote.SSH.remotePlatform": {
    
  },
  "window.zoomLevel": -1
}

먼저 전역 설정인 settings.json이 설정된 후 프로젝트 안에 .prettierrc 파일이 있으면 그 파일을 뒤에 적용

3. Eslint 적용

= 코드 질 향상

1. eslint extenstion 설치

2. 프로젝트에서 eslint 설치

npm install -D eslint

3. root에서 npx eslint --init

npx eslint --init, 입력하면 여러 설정이 나옴

• Does your project use TypeScript? (y/N)
• The config that you've selected requires the following dependencies:
  @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint-plugin-react@latest
  Would you like to install them now with npm? (Y/n)

위 두 질문은 꼭 yes라고 하기

완료하면 .eslintrc 파일이 생김

4. 추가 플러그인 설치

npm i -D eslint-config-airbnb # airbnb에서 만든 리액트 관련 플러그인
npm i -D eslint-plugin-jsx-a11y # JSX 요소 접근성 규칙에 대한 정적 검사 플러그인
npm i -D eslint-react-hooks # React Hooks 규칙이 들어있는 플러그인
npm -D eslint-plugin-import # ES6 import, export 지원 플러그인(필수)
npm -D eslint-plugin-prettier eslint-config-prettier

5. eslintrc.json 파일에 코드 넣기

내 eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "plugin:import/recommended"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "import"],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "json": "never"
      }
    ],
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "prettier/prettier": ["error", { "endOfLine": "auto" }]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

rules

• import/extensions: import 관련 eslint 해제
• react/jsx~~: tsx와 ts 파일도 불러올 수 있도록
• prettier/prettier: 엔터가 없으면 에러 뜨는 것 막기

그 외에 여러 제외해야할 옵션은 rules에 추가하기