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

黎正贤

配置ESlint、pritter插件

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

1.安装插件

在项目根目录下，打开终端并执行以下命令安装 ESLint 和 Prettier 插件：

1. npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

复制代码

上述命令会安装 ESLint、Prettier 以及相关的插件和配置。

2.创建 .eslintrc.js 文件

在项目根目录下创建一个名为

1. .eslintrc.js

复制代码

的文件，并添加以下内容：

1. module.exports = {
   
2.   extends: [
   
3.     'plugin:vue/vue3-recommended',
   
4.     'prettier',
   
5.     'prettier/vue'
   
6.   ],
   
7.   plugins: ['vue', 'prettier'],
   
8.   rules: {
   
9.     'prettier/prettier': 'error'
   
10.   }
    
11. };

复制代码

在上述配置中，我们使用了

1. plugin:vue/vue3-recommended

复制代码

扩展来基于 Vue 3 推荐的规则配置 ESLint。
同时，我们还引入了

1. prettier

复制代码

和

1. prettier/vue

复制代码

扩展以支持 Prettier 的格式化规则。
最后，我们配置了

1. prettier/prettier

复制代码

规则，将其设置为错误级别，以确保代码与 Prettier 格式一致。

3.创建 .prettierrc.js 文件

在项目根目录下创建一个名为

1. .prettierrc.js

复制代码

的文件，并添加以下内容：

1. module.exports = {
   
2.   semi: true,
   
3.   singleQuote: true,
   
4.   trailingComma: 'es5',
   
5.   printWidth: 80,
   
6.   tabWidth: 2
   
7. };

复制代码

在上述配置中，我们使用了一些常见的 Prettier 配置，例如

1. semi

复制代码

（是否使用分号）、

1. singleQuote

复制代码

（是否使用单引号）、

1. trailingComma

复制代码

（是否使用尾逗号）、

1. printWidth

复制代码

（行的最大长度）和

1. tabWidth

复制代码

（缩进的空格数）。

4.配置 VS Code 编辑器

如果你使用的是 VS Code 编辑器，可以通过以下步骤配置自动格式化和保存时的代码规范检查：
上述设置将启用保存时的代码格式化和 Vue 文件的 ESLint 检查。

• 在扩展商店中安装以下插件：ESLint、Prettier - Code formatter
  
• 打开 VS Code 的设置（
  1. Preferences → Settings

  复制代码
  ），搜索并编辑以下设置项：
  

1. "editor.formatOnSave": true,
   
2. "editor.defaultFormatter": "esbenp.prettier-vscode",
   
3. "[vue]": {
   
4.   "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   
5. },
   
6. "eslint.validate": [
   
7.   "javascript",
   
8.   "javascriptreact",
   
9.   {
   
10.     "language": "vue",
    
11.     "autoFix": true
    
12.   }
    
13. ]

复制代码

5.运行代码检查和格式化

在终端中执行以下命令，对代码进行检查和格式化：

1. npx eslint .
   
2. 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 文件。
以下是一些常用的配置选项：

1.拆分 JavaScript 文件

在

1. vite.config.js

复制代码

文件中，可以使用

1. rollupOptions

复制代码

配置项来指定 JavaScript 文件的拆分方式。
例如，可以使用

1. output

复制代码

选项的

1. manualChunks

复制代码

属性来手动指定拆分的块：

1. export default {
   
2.   rollupOptions: {
   
3.     output: {
   
4.       manualChunks: {
   
5.         vendor: ['vue', 'axios'], // 将 vue 和 axios 打包到 vendor.js
   
6.         utils: /^lodash/ // 打包以 lodash 开头的模块到 utils.js
   
7.       }
   
8.     }
   
9.   }
   
10. }

复制代码

在上述配置中，我们指定了两个拆分块，

1. vendor

复制代码

和

1. utils

复制代码

。

1. vendor

复制代码

块包含了 Vue 和 Axios，而

1. utils

复制代码

块包含了以 lodash 开头的模块。

2.拆分 CSS 文件

默认情况下，Vite 会将所有的 CSS 文件打包到一个文件中。如果需要拆分 CSS 文件，可以使用

1. extractCSS

复制代码

配置项来启用拆分：

1. export default {
   
2.   build: {
   
3.     cssCodeSplit: true
   
4.   }
   
5. }

复制代码

使用上述配置后，Vite 将会将每个入口文件的 CSS 提取到单独的文件中。
需要注意的是，拆分 JavaScript 和 CSS 文件可能会增加额外的网络请求，因此在进行拆分时需要权衡加载性能和文件数量的平衡。根据实际情况，可以根据模块的依赖关系和代码规模来进行合理的拆分配置。

来源:https://www.jb51.net/javascript/3267709m4.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！