vite创建react项目及基础配置

1. 创建项目指令

npm init vite@latest vite-react-app -- --template react

2. 修改配置文件配置，如修改端口号，添加less配置

resolve: {
    // 路径别名
    alias: [
      { find: 'src', replacement: path.resolve(__dirname, 'src') },
      { find: '@', replacement: path.resolve(__dirname, 'src') }
    ]
  },

  // less 配置
  css: {
    preprocessorOptions: {
      less: {
        charset: false,
        // less全局变量
        // additionalData: '@import "./src/assets/style/global.less";',
      }
    }
  },

  // 本地开发配置
  server: {
    port: 8088,
    proxy: {
      '/api': {
        target: 'http://',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

3. 编辑器文件创建，方便风格统一
   根目录创建文件.editorconfig，如果文件不生效，检查编辑器是否安装相关插件：EditorConfig for VS code

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

空格空4格

4.配置eslint
npm i eslint -D
执行命令：npx eslint --init
修改生成eslint文件内容

    parserOptions: {
        ecmaVersion: 6,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
            modules: true
        },
        parser: 'babel-eslint',
        requireConfigFile: false
    }

5. 配置 TS
   安装依赖

npm install @typescript-eslint/parser eslint eslint-plugin-standard @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-promise  --save-dev

根目录创建文件.eslintrc.js

const OFF = 0;
const WARN = 1;
const ERROR = 2;
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
           "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true,
            "experimentalObjectRestSpread": true
        }
    },
    "parser": "babel-eslint",
    "plugins": [
        "react"
            ],
    "rules": {
    // 详细的规则
    "quotes": [ERROR, "single"], //单引号
    }
  }
   

根目录创建文件.eslintignore

# 自动生成的文件
App.jsx
main.jsx


# 配置文件
.eslintrc.js
vite.config.js
jsconfig.json

# 构建文件
dist/*
build/

# 其他