npm create vite@latest mon-projet -- --template react-ts
cd mon-projet
npm install
npm install -D tailwindcss postcss autoprefixer prettier eslint-config-prettier eslint-plugin-react
npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
touch .eslintrc.js .prettierrc
/*.eslintrc.js*/
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime', // Ajout pour React 18+
'plugin:react-hooks/recommended', // Ajout explicite des hooks rules
'plugin:@typescript-eslint/recommended',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest', // Plus moderne que 12
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint', 'react-hooks'],
rules: {
'react/react-in-jsx-scope': 'off',
'react-hooks/rules-of-hooks': 'error', // Vérifie les règles des Hooks
'react-hooks/exhaustive-deps': 'warn', // Vérifie les dépendances des effets
'react/prop-types': 'off', // Off car vous utilisez TypeScript
},
settings: {
react: {
version: 'detect',
},
},
};
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all",
"jsxSingleQuote": true,
"bracketSpacing": true
}
2 fichiers tsconfig.app.json et tsconfig.node.json sont créés. On peut supprimer tsconfig.node.json pour une utilisation sans backend.
tsconfig.json :
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" }
]
}
tsconfig.app.json :
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
},
"include": ["src"]
}
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
npm install -D @types/node
import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
npx shadcn@latest init
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
npx shadcn@latest add button