repo: https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
create repo:
yarn create vite react-three --template react-ts
copy .prettierrc -
add tailwindcss:
yarn add -D tailwindcss postcss autoprefixer
add file:tailwind.config.js
: /** @type {import('tailwindcss').Config} / export default { content: [ "./index.html", "./src/**/.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
add file: postcss.config.cjs
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
add code to index.css
:
@tailwind base;
@tailwind components;
@tailwind utilities;
- change some eslint:
yarn add -D eslint-plugin-react
changeeslintrc.cjs
to following: module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', // 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-type-checked', // 'plugin:@typescript-eslint/strict-type-checked', optional 'plugin:react-hooks/recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', ], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', project: ['./tsconfig.json', './tsconfig.node.json'], tsconfigRootDir: __dirname, }, ignorePatterns: ['dist', '.eslintrc.cjs', 'postcss.config.js', 'tailwind.config.js'], parser: '@typescript-eslint/parser', plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], 'no-unused-vars': 'off', 'no-console': 'warn', '@typescript-eslint/no-unused-vars': 'off', }, }
done
- add alias
- add .env