vite-admin框架搭建，ESLint + Prettier 语法检测和代码格式化

1. 环境和工具

开发工具: vs code
node: 20.10.0
npm: 10.2.3
UI框架： Element-plus

gitee地址：

2. 项目初始化

搭建一个新的vite项目

// 执行
npm create vite@latest

回车后选择 vue 和 Typescript
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

搭建完成执行命令后如图所示

安装完后项目目录为

3. 安装插件

1. 安装ESLint

1.1 安装插件

// 安装eslint
npm i eslint -D

1.2 初始化ESLint

vite-admin % npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest

added 34 packages, and audited 185 packages in 9s

40 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.cjs file in /Library/vite-admin

安装后生成 .eslintrc.cjs 文件， 配置如下：

module.exports = {
   
    "env": {
   
        "browser": true,
        "es2021": true,
        "node": true
    },