Vue 3 + Uniapp + Vite + js + ESLint + Prettier 的完整安装步骤及配置

原创已于 2025-05-23 19:30:58 修改 · 1.3k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-23 15:40:40 首次发布

从 ESLint 8.23.0 开始，ESLint 引入了新的 Flat Config 格式（即 eslint.config.mjs），取代了传统的 .eslintrc 文件。以下是基于 eslint.config.mjs 的完整配置步骤，适用于 Vue 3 + Uniapp + Vite + ESLint + js + Prettier 项目

前提安装必要插件：ESLint Prettier Volar

1. 创建项目

使用 Vite 创建一个 Vue 3 项目（选择 JavaScript 模板）：

npm create vite@latest my-uniapp-project --template vue

cd my-uniapp-project

2. 安装 Uniapp 支持

安装 Uniapp 的 Vite 插件：

npm install @dcloudio/vite-plugin-uni --save-dev

在 vite.config.js 中配置 Uniapp 插件：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
})

3. 安装 ESLint 和 Prettier

安装 ESLint 和相关插件：

npm install eslint @eslint/js eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

安装 Prettier：

npm install prettier --save-dev

4. 配置 ESLint

创建 eslint.config.mjs 文件：

import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import pluginPrettier from 'eslint-plugin-prettier/recommended'

export default [
  {
    files: ['**/*.js', '**/*.vue'], // 针对 JS 和 Vue 文件
    languageOptions: {
      globals: {
        ...globals.browser, // 浏览器环境全局变量
      },
      ecmaVersion: 'latest', // 使用最新的 ECMAScript 版本
      sourceType: 'module', // 使用 ES 模块
    },
  },
  pluginJs.configs.recommended, // 使用 ESLint 推荐规则
  ...pluginVue.configs['flat/essential'], // 使用 Vue 插件的基础规则
  pluginPrettier, // 添加 Prettier 支持
  {
    rules: {
      'no-console': 'warn', // 自定义规则
      'no-unused-vars': 'off', // 关闭未使用变量的检查
      'vue/multi-word-component-names': 'off', // 允许单文件组件名
      'prettier/prettier': [
        'error',
        {
          endOfLine: 'auto', // 忽略行尾符
        },
      ],
    },
  },
]

5. 配置 Prettier

创建 Prettier 配置文件 .prettierrc：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf",
  "embeddedLanguageFormatting": "auto",
  "singleAttributePerLine": false
}

6. 安装和配置 Sass

（注意最新版本Sass 官方弃用 @import 语法）

报错：DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

解决方法：

1: 降级 Sass 版本（临时方案）

npm install sass@1.58.3 -D  # 使用最后一个完全支持@import的版本

2: 倒是可以通过配置vite忽略升级提醒，但解决不了根本问题，sososo还是使用升级后的语法吧（hhh）

安装最新版 Sass：

npm install sass@latest --save-dev

在 vite.config.js 中配置 Sass：

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern', // 使用 Modern JS API 可以部分解决 Dart Sass 的兼容性问题
        additionalData: `@use "@/styles/variables.scss" as *;`, // 全局引入变量
      },
    },
  },
})

7. 配置自动导入（插件作用：自动按需导入常用的 API 或库，减少手动编写 import 语句的重复工作，提升开发效率）

安装 unplugin-auto-import 和 unplugin-vue-components：

npm install unplugin-auto-import unplugin-vue-components --save-dev

在 vite.config.js 中配置自动导入AutoImport：（好好看注释蛤）

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    uni(),
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        // 其他需要自动导入的库
        'pinia', // 自动导入 Pinia 相关 API
      ],
      // dts: 'src/auto-imports.d.ts', // 生成类型声明文件 生成一次后注释掉即可
      eslintrc: {
        enabled: false, // true:启用 ESLint 配置生成 false:关闭 首次生成文件后设置为false即可
        filepath: './.eslintrc-auto-import.json', // 指定生成的 ESLint 配置文件路径
        globalsPropValue: true, // 将全局变量标记为可写（默认为 true）
      },
    }),
    Components({
      dts: false, // 不需要生成类型声明文件
    }),
  ],
})

8. 配置 ESLint 支持自动导入

在 eslint.config.mjs 中引入自动生成的 .eslintrc-auto-import.json：

import { readFileSync } from 'fs'
import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import pluginPrettier from 'eslint-plugin-prettier/recommended'

// 读取 .eslintrc-auto-import.json 文件
const autoImportConfig = JSON.parse(
  readFileSync(new URL('./.eslintrc-auto-import.json', import.meta.url), 'utf-8'
)

export default [
  {
    files: ['**/*.js', '**/*.vue'], // 针对 JS 和 Vue 文件
    languageOptions: {
      globals: {
        ...globals.browser, // 浏览器环境全局变量
        ...autoImportConfig.globals, // 自动导入的全局变量
      },
      ecmaVersion: 'latest', // 使用最新的 ECMAScript 版本
      sourceType: 'module', // 使用 ES 模块
    },
  },
  pluginJs.configs.recommended, // 使用 ESLint 推荐规则
  ...pluginVue.configs['flat/essential'], // 使用 Vue 插件的基础规则
  pluginPrettier, // 添加 Prettier 支持
  {
    rules: {
      'no-console': 'warn', // 自定义规则
      'no-unused-vars': 'off', // 关闭未使用变量的检查
      'vue/multi-word-component-names': 'off', // 允许单文件组件名
      'prettier/prettier': [
        'error',
        {
          endOfLine: 'auto', // 忽略行尾符
        },
      ],
    },
  },
]

9. VSCode 配置（可选，在 .vscode/settings.json 中配置统一的团队开发规则，确保所有成员使用相同的编辑器设置，减少格式冲突和代码风格差异）

`新建.vscode文件夹中新建settings.json文件：`

{
  "files.eol": "\n", // 统一使用 LF
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "vue", "typescript"],
  "prettier.requireConfig": true
}

10. 配置脚本

在 package.json 中添加以下脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext .vue,.js --fix",
    "format": "prettier --write ."
  }
}

11. 运行项目

启动开发服务器：npm run dev

运行 ESLint 检查：npm run lint

格式化代码：npm run format

HBuilder X中运行：关于多环境配置：uniapp配置多环境

11. 总结

通过以上步骤，你已经完成了 Vue 3 + Uniapp + Vite + ESLint + Prettier 的完整配置，使用 JavaScript 而不是 TypeScript，并确保使用最新版本的 Sass 和 ESLint Flat Config 格式。项目结构清晰，代码风格统一，开发体验更加高效。

（环境这东西玩不坏不好用就卸了装装了卸就好放心大胆搞加油吖）

示例中还包含封装uni-request，一些基础封装及uniapp多环境配置等，示例整理好了将更新github地址：Vue 3 + Uniapp + Vite + js + ESLint + Prettier