cd vite-project
npm install
Set up ESlint and Prettier on the project.
npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks
npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
Create a .eslintrc.js
and add the following content to it.
module.exports = {
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 13,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'airbnb',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
env: {
browser: true,
es2021: true,
},
rules: {
'@typescript-eslint/interface-name-prefix': 'on',
'@typescript-eslint/explicit-function-return-type': 'on',
'@typescript-eslint/explicit-module-boundary-types': 'on',
'@typescript-eslint/no-explicit-any': 'on',
},
}
Create a .prettierrc
and add the following content.
{
"plugins": ["prettier-plugin-tailwindcss"],
"singleQuote": true,
"semi": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false,
"printWidth": 80
}
Add the following content to the existing vite.config.js
file.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
});
install vite-tsconfig-paths
npm install vite-tsconfig-paths
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
},
},
plugins: [],
}
Add the Tailwind directives to src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;