Ins social-media-app

Based on React + Typescript + Vite

TailwindCss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

// tailwind.config.js
content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}" ];

/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

// #create a new file "postcss.config.js"
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Prettier and Eslint

npm install --save-dev --save-exact eslint prettier eslint-config-prettier eslint-plugin-prettier
touch .prettierignore
touch .prettierrc
touch .eslintrc.mjs

export default {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended', // 使用 React
    'plugin:@typescript-eslint/recommended', // 使用 TypeScript
    'prettier', // 确保在最后一个配置引入
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    semi: [ 'error', 'always' ],
    quotes: [ 'error', 'single' ],
    'prettier/prettier': 'error',
  },
  plugins: [ 'prettier' ],
};

@ alias

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [ react() ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

shadcn/ui

npx shadcn-ui@latest init