2. eslint, tsconifg 설정

1) eslint-config

eslint config 파일을 먼저 설정해 볼것이다 pnpm으로 프로젝트를 구성하여서 --filter option을  사용하여 root에서도 해당 패키지에 설치할수있다

 

우선 packages/eslint-config로 이동하여 package.json을 구성해준다 

{
  "name": "@breadlee/eslint-config",
  "version": "1.0.0",
  "description": "leeyc package eslint config 파일입니다",
  "main": "index.js",
  "publishConfig": {
    "access": "public"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

name 을 @leeyc/eslint-config로 설정해주면 pnpm --filter @leeyc/eslint-config로 해당 package로 설치를 할수있다

 

eslint설정에 필요한 패키지를 설치해준다

pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-config-turbo eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-sort-destructure-keys --filter @leeyc/eslint-config

 

index.js를 생성하고 eslint config 설정을 해준다

/** @type {import("eslint").Linter.Config} */
module.exports = {
  extends: [
    'plugin:react/recommended',
    ...
  ],
  plugins: ['react', '@typescript-eslint', 'import', 'sort-destructure-keys'],
  parserOptions: {
    ecmaFeatures: { jsx: true },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  settings: {
    'import/resolver': {
      typescript: {
        project: ['tsconfig.json', 'packages/*/tsconfig.json'],
      },
    },
  },
  ignorePatterns: ['node_modules/', 'dist/'],
  rules: {
     ...
    'prettier/prettier': [
      'error',
      {
        parser: 'typescript',
        singleQuote: true,
        printWidth: 120,
        tabWidth: 2,
        trailingComma: 'all',
        bracketSpacing: true,
        semi: true,
        useTabs: false,
        arrowParens: 'avoid',
        endOfLine: 'auto',
      },
    ],
  },
};

 

2) tsconfig

typescript config 파일도 eslint와 마찬가지로 package.json부터 설정해주고

{
  "name": "@breadlee/tsconfig",
  "version": "0.0.0",
  "private": true,
  "license": "MIT",
  "publishConfig": {
    "access": "public"
  }
}

js파일을 생성하여 필요한 tsconfig 설정들을 해준다

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Default",
  "compilerOptions": {
    "target": "ES5",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "composite": false,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSources": false,
    "isolatedModules": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "preserveWatchOutput": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
  },
  "exclude": [
    "node_modules"
  ]
}

3) root 설정

root 디렉토리에서 .eslintrc.js를 생성하여 다음과 같이 작성해준다

/** @type {import("eslint").Linter.Config} */
module.exports = {
  root: true,
  extends: ['@breadlee/eslint-config'],
};

eslint 가 제대로 설정된것을 확인한다

 

자세한 설정은 여기서 확인할수있다

https://github.com/leeyc924/leeyc-package