vue3+vite项目配置ESlint、pritter插件

最新推荐文章于 2025-11-15 19:33:26 发布

原创最新推荐文章于 2025-11-15 19:33:26 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

178 篇文章

订阅专栏

本文聚焦 Vue 3 + Vite 项目，介绍了 ESLint 和 Prettier 插件的配置步骤，包括安装、创建配置文件、配置 VS Code 等。阐述了使用这两个插件的场景、优缺点。还讲解了 Vite 打包时拆分 JavaScript 和 CSS 文件的常用配置选项，同时提醒要权衡加载性能和文件数量。

配置ESlint、pritter插件

在 Vue 3 + Vite 项目中，你可以通过以下步骤配置 ESLint 和 Prettier 插件：

安装插件：
在项目根目录下，打开终端并执行以下命令安装 ESLint 和 Prettier 插件：
```
npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev
```
上述命令会安装 ESLint、Prettier 以及相关的插件和配置。
创建 .eslintrc.js 文件：
在项目根目录下创建一个名为 .eslintrc.js 的文件，并添加以下内容：
```
module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
    'prettier',
    'prettier/vue'
  ],
  plugins: ['vue', 'prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
};
```
在上述配置中，我们使用了 plugin:vue/vue3-recommended 扩展来基于 Vue 3 推荐的规则配置 ESLint。同时，我们还引入了 prettier 和 prettier/vue 扩展以支持 Prettier 的格式化规则。最后，我们配置了 prettier/prettier 规则，将其设置为错误级别，以确保代码与 Prettier 格式一致。
创建 .prettierrc.js 文件：
在项目根目录下创建一个名为 .prettierrc.js 的文件，并添加以下内容：
```
module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,
  tabWidth: 2
};
```
在上述配置中，我们使用了一些常见的 Prettier 配置，例如 semi（是否使用分号）、singleQuote（是否使用单引号）、trailingComma（是否使用尾逗号）、printWidth（行的最大长度）和 tabWidth（缩进的空格数）。
配置 VS Code 编辑器：
如果你使用的是 VS Code 编辑器，可以通过以下步骤配置自动格式化和保存时的代码规范检查：
- 在扩展商店中安装以下插件：ESLint、Prettier - Code formatter
- 打开 VS Code 的设置（Preferences → Settings），搜索并编辑以下设置项：
```
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "vue",
    "autoFix": true
  }
]
```
上述设置将启用保存时的代码格式化和 Vue 文件的 ESLint 检查。
运行代码检查和格式化：
在终端中执行以下命令，对代码进行检查和格式化：
```
npx eslint .
npm run lint --fix
```
使用上述命令可以检查项目中的代码规范，并修复一些简单的问题。

通过以上步骤，你可以在 Vue 3 + Vite 项目中配置 ESLint 和 Prettier 插件，并使用它们来维护代码的质量和风格一致性。

使用场景和优缺点

使用 ESLint 和 Prettier 插件可以带来以下场景和优缺点：

使用场景：

统一代码风格：ESLint 和 Prettier 可以强制执行一致的代码风格规范，确保团队成员编写的代码风格一致，提高代码的可读性和可维护性。
检测潜在问题：ESLint 可以检测出代码中的潜在问题和错误，例如未声明的变量、未使用的变量、不必要的代码等，帮助开发者在开发过程中发现并修复这些问题。
自动格式化：Prettier 可以自动格式化代码，使代码保持一致的缩进、换行、引号等格式，减少手动调整代码格式的时间和工作量。

优点：

一致的代码风格：通过配置统一的 ESLint 和 Prettier 规则，可以确保团队成员编写的代码风格一致，提高代码的可读性和可维护性。
提高代码质量：ESLint 可以检测出代码中的潜在问题和错误，帮助开发者在开发过程中发现并修复这些问题，提高代码的质量。
自动格式化：Prettier 可以自动格式化代码，使代码保持一致的缩进、换行、引号等格式，减少手动调整代码格式的时间和工作量。

缺点：

配置复杂性：配置 ESLint 和 Prettier 可能需要一些时间和学习成本，特别是对于初次使用的开发者来说，需要了解插件的规则和配置选项。
降低灵活性：某些规则和格式化选项可能不符合个人或团队的偏好，因此可能需要花费额外的时间和精力来调整和定制规则和选项。
额外的开销：在每次保存或构建代码时，需要运行 ESLint 和 Prettier 来检查和格式化代码，这可能会增加一些额外的开销，特别是在大型项目中。

综上所述，ESLint 和 Prettier 插件在统一代码风格、提高代码质量和自动格式化方面具有重要的作用，但需要权衡配置复杂性和灵活性，以及额外的开销。在大多数情况下，它们对于项目的维护和团队协作是非常有益的。

vite打包拆分js和css

在使用 Vite 进行打包时，可以通过配置来拆分生成的 JavaScript 和 CSS 文件。以下是一些常用的配置选项：

拆分 JavaScript 文件：
在 vite.config.js 文件中，可以使用 rollupOptions 配置项来指定 JavaScript 文件的拆分方式。例如，可以使用 output 选项的 manualChunks 属性来手动指定拆分的块：
```
export default {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'axios'], // 将 vue 和 axios 打包到 vendor.js
        utils: /^lodash/ // 打包以 lodash 开头的模块到 utils.js
      }
    }
  }
}
```
在上述配置中，我们指定了两个拆分块，vendor 和 utils。vendor 块包含了 Vue 和 Axios，而 utils 块包含了以 lodash 开头的模块。
拆分 CSS 文件：
默认情况下，Vite 会将所有的 CSS 文件打包到一个文件中。如果需要拆分 CSS 文件，可以使用 extractCSS 配置项来启用拆分：
```
export default {
  build: {
    cssCodeSplit: true
  }
}
```
使用上述配置后，Vite 将会将每个入口文件的 CSS 提取到单独的文件中。