프로젝트 Config 가이드

개발 시작 시 셋팅해야 하는 필수 조건들에 대해 기술합니다.

.prettierrc

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

.eslintrc

Expert Labs

// .eslintrc.json
{
  "extends": "next/core-web-vitals"
}

Insight

// .eslintrc
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@docusaurus"],
  "extends": ["plugin:@docusaurus/recommended", "plugin:@typescript-eslint/recommended"],
  "ignorePatterns": ["node_modules/", "build/"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "rules": {
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-var-requires": 0
  }
}

Plumber

// .eslintrc.yml
env:
  browser: true,
  es2021: true
parser: '@typescript-eslint/parser'
plugins:
  - '@typescript-eslint'
extends:
  - prettier
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended
ignorePatterns: ['node_modules/']
globals:
  JSX: readonly
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 6
  sourceType: module
  ecmaFeatures:
    jsx: true
settings:
  react:
    version: detect
  import/parsers: { '@typescript-eslint/parser': ['.ts', '.tsx', '.js'] }
  import/resolver: { 'typescript': './tsconfig.json' }

.tsconfig.json

Expert Labs

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Insight

{
  "extends": "@docusaurus/tsconfig",
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "module": "ESNext",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "lib": ["es2017", "dom"],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "./dist",
    "skipLibCheck": true,
    "baseUrl": ".",
    "moduleResolution": "node",
    "paths": {
      "@site/*": ["*"],
      "@theme/*": ["src/theme/*"]
    }
  },
  "include": ["src/**/*", "types/**/*"],
  "exclude": ["node_modules", "build"]
}

Plumber

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Made with SlashPage