React 18 + tailwindcss 세팅 (eslint, prettierrc)

라이브러리 설치

 

CRA, react-dom설치

# CRA + typescript
npx create-react-app inflinker-v3-front --template typescript

# react-dom 추가
npm i --save react react-dom typescript

 

Tailwind 설치

#Tailwind CSS 설치, 세팅파일
npm install -D postcss autoprefixer
npx tailwindcss init
npm install -D postcss-import
npm install postcss-nesting --save-dev

 

 

컴포넌트 라이브러리 등등 설치

# React-Select 설치
# <https://react-select.com/home#getting-started>

npm i --save react-select

 

 

eslint, prettier설치

# eslient 설치
npm install -D eslint

# eslient 설정
npx eslint --init

# prettier 설정 설치
npm install -D prettier
npm install -D prettier-plugin-tailwindcss

# eslint, prettier에서 겹치는 포메팅 삭제
npm i -D eslint-plugin-prettier eslint-config-prettier

 

 

---

설정파일 세팅

 

tsconfig.json 세팅

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "baseUrl": "./src", // 절대 경로 설정
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "paths": {
      "assets/*": ["./assets/*"],
      "components/*": ["./components/*"],
      "layout/*": ["./layout/*"],
      "pages/*": ["./pages/*"],
    }
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules"]
}

 

 

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

 

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}', 'public/*.{html,js}'],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      blue: '#1fb6ff',
      purple: '#7e5bef',
      pink: '#ff49db',
      orange: '#ff7849',
      green: '#13ce66',
    },
    borderWidth: {
  ...
    },
    boxShadow: {
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
    fontFamily: {
      sans: ['Pretendard', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
      digiNumber: ['DS-DIGII', 'sans-serif'],
    },
    fontSize: {
    ...
    },
    container: {
      padding: {
      ..
      },
    },
    extend: {
      spacing: {
   		....
      },
      padding: {
        0.8: '0.8rem',
      },
      borderRadius: {
        deflaut: '1.0rem',
        '4xl': '2rem',
      },
      backgroundImage: {
        bgMainImg: "url('assets/images/bg_main.png')", // 메인 - 배경
		...
        IconChecked: "url('assets/images/icons/icon_checked.svg')", // 아이콘 - 체크박스
        IconClose: "url('assets/images/icons/icon_close.svg')", // 아이콘 - 닫기
      },
      brightness: {
        11: '1.1',
      },
      boxShadow: {
        bottom: '0px 1px 0 rgba(0, 0, 0, 0.1)',
      },
    },
  },
  future: {
    hoverOnlyWhenSupported: true, // 모바일에서 - hover 제거
  },
  // plugins: [require('@tailwindcss/forms')],
  plugins: ['prettier-plugin-tailwindcss'],
};

 

 

prettier.config.js

module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
};

 

 

.prettierrc

{
   "plugins": ["prettier-plugin-tailwindcss"],
    "singleQuote": true, 
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80,
    "arrowParens": "always",
    "orderedImports": true,
    "bracketSpacing": true,
    "jsxBracketSameLine": false
  }

 

 

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
    'plugin:tailwindcss/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}', '*.ts', '*.tsx', '*.js'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
    'linebreak-style': 0,
    'import/prefer-default-export': 0,
    'import/extensions': 0,
    'no-use-before-define': 0,
    'import/no-unresolved': 0,
    'react/react-in-jsx-scope': 0,
    '@typescript-eslint/no-explicit-any': 'off', 
    'import/no-extraneous-dependencies': 0,
    'no-shadow': 0,
    'react/prop-types': 0,
    'react/jsx-filename-extension': [
      2,
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ],
    'jsx-a11y/no-noninteractive-element-interactions': 0,
    '@typescript-eslint/explicit-module-boundary-types': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};