如何优雅✨的创建一个React项目（React + Vite + TypeScript +Prettier + Eslint）

最新推荐文章于 2025-09-18 03:43:18 发布

原创最新推荐文章于 2025-09-18 03:43:18 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #typescript #前端

React 专栏收录该内容

2 篇文章

订阅专栏

在2023年的那个秋天，夏天的遗憾与秋天落叶🍂一起飘落，我创建了一个新的React项目......

😀 使用Vite初始化项目

npm init vite

😋 安装Prettier

yarn add -D prettier

yarn add -D eslint-config-prettier

yarn add -D eslint-plugin-prettier

在根目录新建 .prettierrc.cjs 文件

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,
  jsxSingleQuote: false,
  jsxBracketSameLine: true,
  trailingComma: 'none',
  bracketSpacing: true
}

🧐 安装Eslint

1、安装依赖

yarn add -D eslint

2、初始化Eslint配置

npx eslint --init

一波操作之后，你会发现在项目根目录会生成一个 .eslintrc.cjs 文件

module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'eslint-config-prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  plugins: ['prettier', 'react', 'eslint-plugin-prettier'],
  rules: {
    'prettier/prettier': 'warn',
    '@typescript-eslint/no-explicit-any': ['off']
  }
}

Over！