ESLint, Prettier, tsconfig 적용 프로세스

1. .eslintrc.json 파일 생성 및 코드 작성

Front End

{
  "env": { "browser": true, "es2021": true },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Back End

{
  "env": { "node": true, "es2021": true },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

2. .prettier 파일 생성 및 코드 작성

Front End / Back End

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "endOfLine": "auto"
}

3. Dependencies 설치

Front End / Back End

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

4. tsconfig.json 파일 생성 및 코드 작성

Front End

{
  compilerOptions: {
    baseUrl: '.',
    target: 'es5',
    lib: ['dom', 'dom.iterable', 'esnext'],
    allowJs: true, // js 파일들 ts에서 import해서 쓸 수 있는지
    checkJs: true, // 일반 js 파일에서도 에러체크 여부
    removeComments: true, // 컴파일 시 주석 제거
    skipLibCheck: true,
    strict: false,
    noImplicitAny: true, // any타입 금지 여부
    strictNullChecks: true, // null, undefined 타입을 조작하는 코드 금지
    strictFunctionTypes: true, // 함수파라미터 타입체크 강하게
    strictPropertyInitialization: true, // class constructor 작성시 타입체크 강하게
    noImplicitThis: true, // this 키워드가 any 타입일 경우 에러내기
    alwaysStrict: true, // 자바스크립트 "use strict" 모드 켜기
    noUnusedLocals: true, // 쓰지않는 지역변수 있으면 에러내기
    noUnusedParameters: true, // 쓰지않는 파라미터 있으면 에러내기
    noImplicitReturns: true, // 함수에서 반환 명시적으로 하도록 체크
    noFallthroughCasesInSwitch: true, // switch문 이상하면 에러내기
    forceConsistentCasingInFileNames: true,
    incremental: true,
    esModuleInterop: true,
    module: 'esnext',
    moduleResolution: 'node',
    resolveJsonModule: true,
    isolatedModules: true,
    noEmit: true,
    jsx: 'preserve',
  },
  include: ['next-env.d.ts', '**/*.ts', '**/*.tsx'],
  exclude: ['node_modules'],
}

Back End

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es2021",
    "module": "commonjs",
    "outDir": "./dist",
    "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지
    "checkJs": true, // 일반 js 파일에서도 에러체크 여부
    "removeComments": true, // 컴파일 시 주석 제거
    "moduleResolution": "node", // 모듈 해석 전략을 결정
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true, // 불러오려는 모듈에 default export가 없을 때도 import as * XXX가 아닌 import XXX를 사용할 수 있도록 하는 설정이다. 불러오려는 모듈에 default export가 없을 때도 import as * XXX가 아닌 import XXX를 사용할 수 있도록 하는 설정.
    "forceConsistentCasingInFileNames": true, // 사용할 파일의 이름을 대소문자까지 정확하게 작성하도록 강제
    "resolveJsonModule": true, // 확장자가 .json인 모듈의 import를 허용하는 설정

    "strict": false,
    "noImplicitAny": true, // any타입 금지 여부
    "strictNullChecks": true, // null, undefined 타입을 조작하는 코드 금지
    "strictFunctionTypes": true, // 함수파라미터 타입체크 강하게
    "strictPropertyInitialization": true, // class constructor 작성시 타입체크 강하게
    "noImplicitThis": true, // this 키워드가 any 타입일 경우 에러내기
    "alwaysStrict": true, // 자바스크립트 "use strict" 모드 켜기
    "noUnusedLocals": true, // 쓰지않는 지역변수 있으면 에러내기
    "noUnusedParameters": true, // 쓰지않는 파라미터 있으면 에러내기
    "noImplicitReturns": true, // 함수에서 반환 명시적으로 하도록 체크
    "noFallthroughCasesInSwitch": true, // switch문 이상하면 에러내기

    "typeRoots": ["node_modules/@types", "src/types"]
    // "sourceMap": true, // 컴파일 시 .map 파일 생성 여부
  },
  "ts-node": {
    "files": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}