Cookie Consent by Free Privacy Policy Generator 📌 Setup React Typescript with Vite & ESLint


✅ Setup React Typescript with Vite & ESLint


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Setup React Typescript with Vite & ESLint

Image description
Vite is trending recently, because of its simple setup and much faster execution speed than Webpack.

🥇ReactJs Vite folder structure

Below is the complete directory structure of the ReactJs Typescript Vite ESLint Prettier project

📦react-app
 ┣ 📂dist
 ┣ 📂public
 ┃ ┗ 📜vite.svg
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜react.svg
 ┃ ┣ 📜App.css
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜index.css
 ┃ ┣ 📜main.tsx
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.editorconfig
 ┣ 📜.eslintignore
 ┣ 📜.eslintrc.cjs
 ┣ 📜.gitignore
 ┣ 📜.prettierignore
 ┣ 📜.prettierrc
 ┣ 📜index.html
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┗ 📜vite.config.ts
  • dist folder: Folder containing build files.
  • Public folder: Contains index.html file and related files such as favicon.ico, robots.txt,...
  • src folder: Contains our main source code.
  • Folder src/assets: Contains media, css (the App.css and index.css files above I left intact when first created, you can put them in assets/styles for simplicity), fonts.
  • The remaining config files will be introduced in the sections below.

🥇Step 1 - Create Vite project

Vite requires Node version 14.18+, 16+ to operate stably. However, some templates require a higher version, so if it warns, please update nodejs to a higher version.
You can use npm or yarn or pnpm, here I use npm for simplicity.

with npm

npm create vite@latest

with yarn

yarn create vite

with PNPM

pnpm create vite

After running, it will ask to enter a project name****

Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
✔ Project name: … react-app

Next is to choose Framework

✔ Select a framework: › React

Select template, here I choose TypeScript + SWC, SWC will replace Babel for compiling Typescript/Javascript code. SWC is 20 times faster than Babel

✔ Select a variant: › TypeScript + SWC

Next is the folder just created by Vite

cd react-app

Install packages

npm i

🥇Step 2 - Install related packages ESLint and Prettier

After completing step 1, by default Vite has already helped us with basic configuration for ESLint and TypeScript, but to make coding easier, we will install some more packages.

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

These are the things we install

  • prettier: main formatter code -** eslint-config-prettier**: ESLint config set to disable ESLint rules that conflict with Prettier.
  • eslint-plugin-prettier: Use some additional Prettier rules for ESLint.

🥇Step 3 - Config ESlint to standardize the code
Open the .eslintrc.cjs file
Add this value to the** ignorePatterns array, the purpose is that I do not want **ESLint to check the vite.config.ts file

'vite.config.ts'

Add the following code to the extends array

'eslint-config-prettier', 'prettier'

Add the following code to the plugins array

'prettier'

Add the following code to the** rules **object to add Prettier rules

'prettier/prettier': [
      'warn',
      {
        arrowParens: 'always',
        semi: false,
        trailingComma: 'none',
        tabWidth: 2,
        endOfLine: 'auto',
        useTabs: false,
        singleQuote: true,
        printWidth: 120,
        jsxSingleQuote: true
      }
    ]

🥇Step 4 - Config Prettier to format the code

Create a .prettierrc file in the folder in the root directory with the content below

{
  "arrowParens": "always",
  "semi": false,
  "trailingComma": "none",
  "tabWidth": 2,
  "endOfLine": "auto",
  "useTabs": false,
  "singleQuote": true,
  "printWidth": 120,
  "jsxSingleQuote": true
}

The purpose is prettier configuration. You should install Extension Prettier - Code formatter for VS Code so it can understand. Next Create a **.prettierignore **file in the root directory. The purpose is that Prettier ignores unnecessary files.

node_modules/
dist/

🥇Step 5 - Config editor to standardize editor configuration

Create an .editorconfig file in the root directory.The purpose is to configure configs to synchronize editors with each other if the project has many participants.For VS Code to understand this file, install the Extension EditorConfig for VS Code.

[*]
indent_size = 2
indent_style = space

🥇Step 6 - Configure alias for tsconfig.json

Adding an alias to the tsconfig.json **file will help VS Code understand and automatically import for us.
Add this line to **compilerOptions
in file tsconfig.json

"baseUrl": ".",
"paths": {
  "~/*": ["src/*"]
}

The meaning of this paragraph is that we can import Login from '~/pages/Login' instead of import Login from '../../pages/Login'. Much shorter and easier to see!

🥇Step 7 - Configure alias for vite vite.config.ts

Install the** @types/node** package to use node js in the ts file without errors.

npm i @types/node -D

Configure alias and enable source map in file vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  },
  css: {
    devSourcemap: true
  },
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src')
    }
  }
})

🥇Step 8 - Update script for package.json

Open the package.json file, add the **script **below

"scripts": {
    //...
    "lint:fix": "eslint --fix src --ext ts,tsx",
    "prettier": "prettier --check \"src/**/(*.tsx|*.ts|*.css|*.scss)\"",
    "prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.css|*.scss)\""
}

🥇Command to run the project

That's it, to run in the dev environment, we will run it with the npm run dev command.

If you want to build, npm run build

  • There are also some commands like.
  • Preview the build results with the npm run preview command
  • Check if the project has any errors related to ESLint: npm run lint.
  • Automatically fix ESLint related errors (not everything can be fixed, but many can be fixed): npm run lint:fix
  • Check if the project has any errors related to Prettier: npm run prettier.
  • Automatically fix Prettier related errors: npm run prettier:fix. Wishing you success!
...

✅ Configure Eslint, Prettier and show eslint warning into running console vite react typescript project


📈 71.51 Punkte

✅ Setup React Typescript with Vite & ESLint


📈 64.13 Punkte

✅ Effortless Testing Setup for React with Vite, TypeScript, Jest, and React Testing Library


📈 50.43 Punkte

✅ Building a Modern React App with Vite, ESLint, and Prettier In VSCode


📈 42.25 Punkte

✅ React TypeScript - Vite + React


📈 41.15 Punkte

✅ React Monorepo Setup Tutorial with pnpm and Vite: React project + UI, Utils


📈 39.98 Punkte

✅ Setup Node with Typescript and eslint


📈 38.55 Punkte

✅ Laravel + Vue 3 (Vite, TypeScript) SPA Setup


📈 35.93 Punkte

✅ ESlint , Prettier and Husty : Setup for React Native App


📈 35.35 Punkte

✅ Setup Eslint + Prettier for code standardization in React


📈 35.35 Punkte

✅ Setup Eslint + Prettier para padronização de código em React


📈 35.35 Punkte

✅ Getting started with React.js with Typescript using vite.js⚡


📈 33.89 Punkte

✅ Build a Profit Margin Calculator with Vite.js + React.js, TypeScript and Tailwind CSS


📈 33.89 Punkte

✅ Setting up a React project using Vite + TypeScript + Vitest


📈 33.89 Punkte

✅ Best Practices for Using TypeScript in React with Vite


📈 33.89 Punkte

✅ Setting Up Project React and TypeScript Application with Vite and Tailwind CSS


📈 33.89 Punkte

✅ How to Setup React and Tailwind CSS with Vite in a Project


📈 32.73 Punkte

✅ Minimal setup for Vite, React and Jest Integration


📈 32.73 Punkte

✅ Setup React With Vite on VSCode: A Step-by-Step Tutorial


📈 32.73 Punkte

✅ Setup path aliases in React + Vite + TS Project 🤓


📈 32.73 Punkte

✅ Webentwicklung: Build-Tool Vite.js 5.1 experimentiert mit Vite Runtime API


📈 32.38 Punkte

✅ Webentwicklung: Build-Tool Vite.js 5.1 experimentiert mit Vite Runtime API


📈 32.38 Punkte

✅ Why Vite is the best? Advanced Features of Vite


📈 32.38 Punkte

✅ Create a project in React without create-react-app/vite 2023 (Spanish)


📈 30.69 Punkte

✅ Why I choose CRA ( Create-react-app) over Vite for this React project ?


📈 30.69 Punkte

✅ Introduction to Testing React Components with Vite, Vitest and React Testing Library


📈 30.69 Punkte

✅ This Week In React #174: ReactLabs, React-Strict-DOM, Remix, RNGH, Expo, RN+TV, TC39, Vite...


📈 30.69 Punkte

✅ React as a Library and Create React App / Vite as Frameworks


📈 30.69 Punkte

✅ A Guide to ESLint, Prettier, and VSCode Setup for Code Linting & Formatting


📈 30.24 Punkte

✅ My takes on EsLint and Prettier against TypeScript


📈 29.26 Punkte

✅ Setting up Code Formatting with ESLint, TypeScript, and Prettier in Visual Studio Code


📈 29.26 Punkte











matomo

Datei nicht gefunden!