React搭建Vite项目及各种项目配置

 1. 创建Vite项目

在操作系统的命令终端，输入以下命令：

yarn create vite

 输入完成以后输入项目名称、选择开发框架，选择开发语言，如下图所示，即可完成项目创建。

注意事项：

1. Node版本必须符合要求，否则安装过程中会提示版本不对；

2. 由于上面是使用的yarn来安装的，所以需要首先通过npm来全局安装yarn；

项目创建成功以后通过以下命令安装依赖：

yanr install --save

然后通过以下命令启动项目：

yarn dev

启动成功后就可以通过生成的访问地址在浏览器里访问了。

项目在安装依赖过程中要是特别慢的话，可以修改镜象源。

要是通过npm安装的话，只需要通过将上面命令中的yarn换成npm即可。

上面的是全局修改镜象源，要是只想针对这个项目修改镜象源的话，可以在项目的根目录下添加配置文件，yarn安装添加.yarnrc文件，npm安装添加.npmrc文件，编辑文件内容如下：

registry "https://registry.npm.taobao.org"

如果项目后续安装依赖比较多，或是有微服务开发建议使用pnpm来安装。

2. 编辑器配置

为了保证不同的开发者在不同编辑器上开发同一个项目编辑格式一样的，我们需要在在项目的根目录下创建一个叫.editorconfig的文件，注意前面有个点。

上面图片中的配置内容如下，方便大家复制粘贴。

# https://editorconfig.org       # 文件官方网站
root = true   					 # 根目录的文件

[*]								 # 针对文件范围
charset = utf-8					 # 文件字符格式
indent_style = tab		         # 行头缩进类型
indent_size = 4					 # 行头缩进大小
end_of_line = lf                 # 结尾换行标志
insert_final_newline = true      # 结尾插入新行
trim_trailing_whitespace = true  # 修剪尾随空格

需要注意的时，在Webstorm中会自动读取配置文件，而VS Code编辑器里面，需要安装以下插件才可以读取配置文件。

3. 格式化配置 

为了代码风格整体保持一致，需要安装格式化代码工具，安装命令如下：

yarn add prettier -D

如下图所示，即为安装成功。

在根目录下创建配置文件.prettierrc.cjs，添加配置代码。

module.exports = {
    // 每行最多的列
    printWidth:120,
    // 用制表符缩进
    useTabs:false,
    // 行头缩进宽度
    tabWidth:4,
    // 结尾是否分号
    semi:false,
    // 是否用单引号
    singleQuote:true,
    // JSX中单引号
    jsxSingleQuote:true,
    // 箭头函数括号
    arrowParens:'avoid',
    // 符号文字空格
    bracketSpacing:true,
    // 是否尾随逗号
    trailingComma:'none'

}

为了实现保存时自动格式化，同时需要安装如下插件。

为了让格式化不会影响到编辑里所有的项目，可以针对当前项目添加一个专门的格式化配置。

在项目的根目录下添加一个叫.vscode的文件夹，文件夹里新建一个叫setting.json的文件，添加代码如下：

以下是上图中的代码，便于大家复制粘贴。

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

4. 语法校验配置

ESLint主要是为了解决代码质量问题，它能在我们编写代码时就检测出程序可能出现的隐性Bug。

首先执行安装命令：

yarn add eslint -D

 安装完成后，执行以下命令初始化：

yarn eslint --init

以下为初始化过程，相关选项可供参考。

执行完以上步骤以后，在根目录下会生成名为.eslintrc.cjs的文件，我们可以在里面加一些自定义的规则，其内容如下：

module.exports = {
    root: true,
    env: { browser: false, es2020: true },
    extends: [
        // ESLint推荐配置
        "eslint:recommended",
        // TS推荐的配置
        "plugin:@typescript-eslint/recommended",
        // React推荐的配置
        "plugin:react-hooks/recommended",
    ],

    ignorePatterns: ["dist", ".eslintrc.cjs"],
    parser: "@typescript-eslint/parser",
    plugins: ["react-refresh"],
    rules: {
        "react-refresh/only-export-components": [
            "warn",
            { allowConstantExport: true },
        ],

        // * "off" 或 0    ==>  关闭规则
        // * "warn" 或 1   ==>  打开的规则作为警告，不影响代码执行
        // * "error" 或 2  ==>  规则作为一个错误，代码不能执行，界面报错

        // 以下为自定义规则
        'react/react-in-jsx-scope': 'off',  // 关闭JSX必须声明React
        'no-console': 'error',              // 禁止控制台输出
        'no-unused-vars': 'error',          // 禁止定义未使用变量
        'no-debugger': 'error',             // 禁止控制台调试
        'no-var': 'error',                  // 禁止声明全局变量
    },
};

记得将以上第3行代码中的默认为浏览器环境改为false，否则有些文件里的node语法会报错。

5. 脚手架Vite配置 

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

export default defineConfig({
    // 配置服务代理
    server: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': 'http://api-driver.marsview.cc'
        }
    },
    resolve: {
        // 添加路径别名
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    plugins: [react()]
})

以上代码中只添加了两个常用的配置 ，更多的配置可以查看Vite官网。

Vite官网：https://vitejs.dev/config/