[FakeFlix] TypeScript적용하기(eslint, prettier)

TypeScript를 적용할 repo

[fakeflix] 

 

 

 

TypeScript 진행과정 메모

1. Volta를 통해서 yarn 또는 npm, node 등의 버전을 고정

volta pin yarn node

 

 

2. TypeScript 적용

yarn add typescript

 

3. 현재 쓰는 패키지중에 type 정보가 없는건 types를 추가한다.

yarn add -D @types/node @types/react @types/react-dom @types/jest @types/justified-layout @types/react-router-dom @types/styled-components

typescript를 적용하고자할때는 기존에 사용중이던 패키지(JS로 된애들)의 타입을 정의한 패키지를 설치해줘야한다. 이런 패키지의 네이밍은 @types/package-name 을 따른다. 그리고 이건 개발환경에서만 이용되서 -D 옵션을 줘서 devDependencies에 설치되도록 한다. 

 

 

4. TypeScript 사용을 위한 tsconfig.json 파일 설정하기

yarn tsc --init

 

내부에 

 

{
  "compilerOptions": {
    "target": "es5", // Specify ECMAScript target version
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], // List of library files to be included in the compilation
    "allowJs": true, // Allow JavaScript files to be compiled
    "skipLibCheck": true, // Skip type checking of all declaration files
    "esModuleInterop": true, // Disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs")
    "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
    "strict": true, // Enable all strict type checking options
    "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
    "module": "esnext", // Specify module code generation
    "moduleResolution": "node", // Resolve modules using Node.js style
    "isolatedModules": true, // Unconditionally emit imports for unresolved files
    "resolveJsonModule": true, // Include modules imported with .json extension
    "noEmit": true, // Do not emit output (meaning do not compile code, only perform type checking)
    "jsx": "react-jsx", // Support JSX in .tsx files
    "sourceMap": true, // Generate corrresponding .map file
    "declaration": true, // Generate corresponding .d.ts file
    "noUnusedLocals": true, // Report errors on unused locals
    "noUnusedParameters": true, // Report errors on unused parameters
    "incremental": true, // Enable incremental compilation by reading/writing information from prior compilations to a file on disk
    "noFallthroughCasesInSwitch": true, // Report errors for fallthrough cases in switch statement
    // "noImplicitAny": true
  },
  "include": [
    "src/**/*" // *** The files TypeScript should type check ***
  ],
  "exclude": [
    "node_modules",
    "build"
  ] // *** The files to not type check ***
}

17버전의 경우 react를 import 하지 않기 때문에 "jsx": "react-jsx" 라고 추가한다.

 

 

 

ESlint 적용과정

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev

 

.eslintrc.js

module.exports =  {
  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
  extends:  [
    'plugin:react/recommended',  // Uses the recommended rules from @eslint-plugin-react
    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from @typescript-eslint/eslint-plugin
  ],
  parserOptions:  {
  ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
  sourceType:  'module',  // Allows for the use of imports
  ecmaFeatures:  {
    jsx:  true,  // Allows for the parsing of JSX
  },
  },
  rules:  {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
  settings:  {
    react:  {
      version:  'detect',  // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
};

 

Prettier 적용과정

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

 

.prettierrc 파일을 만들고 아래의 내용을 추가한다.

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 4
}

 

 

이렇게 사용했다!

 

 

 

tsx에 prettier가 적용이 안되서 아래 설정을 settings.json에 추가했다. 

 

"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": true,
},
"[javascriptreact]": {
"editor.formatOnSave": true,
},
"[typescript]": {
"editor.formatOnSave": true,
},
"[typescriptreact]": {
"editor.formatOnSave": true,
},

 

 

 

- 참고자료

velog.io/@das01063/VSCode%EC%97%90%EC%84%9C-ESLint%EC%99%80-Prettier-TypeScript-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

VSCode에서 ESLint와 Prettier (+ TypeScript) 사용하기

 

velog.io/@y1andyu/React%EC%97%90%EC%84%9C-TypeScript%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-1-tsconfig.json

[React에서 TypeScript사용하기] #1 tsconfig.json

eomtttttt-develop.tistory.com/224

[React] CRA (Create-react-app) 에 typescript 적용하기

https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript/

How to Migrate a React App to TypeScript - SitePoint

dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb

Using ESLint and Prettier in a TypeScript Project