day14 ts前端技术栈Vite+React18+Eslint+Stylelint+TailwindCSS+Antd（java转ts全栈/3R教室）

以下是一个使用Vite、React 18、Eslint、Stylelint、Tailwind CSS和Ant Design的前端项目的基本配置示例：

1. 初始化项目：

npm create vite@latest my-app --template react-ts
cd my-app

2. 安装依赖：

npm install

3. 安装Tailwind CSS：

npx tailwindcss init -p

4. 安装Ant Design：

npm install antd

5. 安装lint依赖：

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks postcss autoprefixer --save-dev
npm install stylelint stylelint-config-standard stylelint-config-recommended stylelint-processor-styled-components stylelint-scss --save-dev

6. 创建.eslintrc.js，配置Eslint：

module.exports = {
  extends: [
    'airbnb',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:import/typescript',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['react', '@typescript-eslint', 'import', 'jsx-a11y', 'react-hooks'],
  rules: {
    // 自定义规则
  },
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
};

7. 创建.stylelintrc.json，配置Stylelint：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recommended-scss"
  ],
  "rules": {
    // 自定义规则
  }
}

8. 在vite.config.ts中配置Tailwind CSS：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
// 引入tailwindcss
import tailwindcss from 'tailwindcss';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss],
    },
  },
});

9. 在index.css或其他Tailwind CSS配置文件中引入Tailwind CSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

10. 在tsconfig.json中配置对应的lint规则：

{
  "compilerOptions": {
    // ...
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/styles/**/*.scss"],
  "exclude": ["node_modules"],
  "lint": {
    "options": {
      "configFile": "./path/to/your/eslintrc.js",
      "format": "stylish