在项目开发过程中，我们经常会遇到项目中的 import 语句顺序混乱的问题。
这不仅会影响代码的可读性，还可能使我们代码在提交的时候产生不必要的冲突。
面对这种情况，要想解决它其实很容易。
通过合理的规范和自动化工具，我们可以确保 import 语句的顺序一致，从而提升代码质量和团队协作效率。
一、创建 Vue 3 项目
首先，我们需要创建一个新的 Vue 3 项目。如果你还没有安装 Vue CLI，请先安装：
npm install -g @vue/cli
然后创建并进入新项目：
vue create import-order-demo
cd import-order-demo
确保你的项目中已经安装了 Vue 3 和 Vue CLI。
二、引入 ESLint 和 Prettier
为了规范 import 语句的顺序，我们需要借助 ESLint 和 Prettier。首先，我们在项目中安装相关依赖：
npm install eslint prettier eslint-plugin-import eslint-plugin-simple-import-sort eslint-config-prettier eslint-plugin-prettier --save-dev
接着，我们需要配置 ESLint 和 Prettier。
1. 配置 ESLint
在项目根目录下创建一个 .eslintrc.js 文件，添加以下配置：
// .eslintrc.js module.exports={ env:{ browser:true, es2021:true, }, extends:[ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:prettier/recommended', ], parserOptions:{ ecmaVersion:12, sourceType:'module', }, plugins:[ 'vue', 'prettier', 'simple-import-sort', 'import' ], rules:{ 'prettier/prettier':'error', 'import/order':[ 'error', { groups:[['builtin','external','internal']], pathGroups:[ { pattern:'vue', group:'external', position:'before', }, ], pathGroupsExcludedImportTypes:['builtin'], 'newlines-between':'always', alphabetize:{order:'asc',caseInsensitive:true}, }, ], 'simple-import-sort/imports':'error', 'simple-import-sort/exports':'error', }, }
2. 配置 Prettier
在项目根目录下创建一个 prettier.config.js 文件，添加以下配置：
// prettier.config.js module.exports = { singleQuote: true, semi: false, }
三、编写示例代码
接下来，我们编写一些示例代码，来展示如何规范 import 语句的顺序。
1. 创建组件文件
在 src/components 目录下创建一个名为 ExampleComponent.vue 的组件文件：
<!-- src/components/ExampleComponent.vue --> <template> <div class="example"> <h1>{{ message }}</h1> </div> </template> <script setup> import axios from'axios' import{ ref }from'vue' import{ useRouter }from'vue-router' importExampleServicefrom'../services/ExampleService' const message =ref('Hello, Vue 3!') </script> <style scoped> .example { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; margin-top: 60px; } </style>
2. 创建服务文件
在 src/services 目录下创建一个名为 ExampleService.js 的服务文件：
// src/services/ExampleService.js import axios from'axios' constfetchData=async()=>{ try{ const response =await axios.get('https://jsonplaceholder.typicode.com/posts') return response.data }catch(error){ console.error('Error fetching data:', error) } } exportdefault{ fetchData }
3. 创建路由文件
在 src/router 目录下创建一个名为 index.js 的路由文件：
// src/router/index.js import{ createRouter, createWebHistory }from'vue-router' importExampleComponentfrom'../components/ExampleComponent.vue' const routes =[ { path:'/', name:'Home', component:ExampleComponent, }, ] const router =createRouter({ history:createWebHistory(process.env.BASE_URL), routes, }) exportdefault router
四、使用自动化工具规范 import 语句顺序
1. 配置 VS Code 插件
为了自动修复 import 语句的顺序，我们需要在 VS Code 中安装 ESLint 插件。确保你已经安装了以下插件：
- • ESLint
- • Prettier - Code formatter
在 VS Code 的设置中，添加以下配置：
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
2. 使用命令行工具
我们可以使用命令行工具来检查和修复 import 语句的顺序。在项目根目录下运行以下命令：
npx eslint --fix src/
这将检查 src 目录下的所有文件，并自动修复 import 语句的顺序。
五、验证效果
我们可以在 ExampleComponent.vue 中故意打乱 import 语句的顺序，然后保存文件，观察 ESLint 和 Prettier 插件的自动修复效果。例如：
<script setup> import{ useRouter }from'vue-router' import axios from'axios' import{ ref }from'vue' importExampleServicefrom'../services/ExampleService' const message =ref('Hello, Vue 3!') </script>
保存后，import 语句将被自动排序为：
<script setup> import axios from'axios' import{ ref }from'vue' import{ useRouter }from'vue-router' importExampleServicefrom'../services/ExampleService' const message =ref('Hello, Vue 3!') </script>
六、优化 ESLint 配置
为了使我们的配置更加完备，我们可以进一步优化 ESLint 配置文件，使其能够覆盖更多的代码质量检测和修复规则。
// .eslintrc.js module.exports={ env:{ browser:true, es2021:true, }, extends:[ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:prettier/recommended', ], parserOptions:{ ecmaVersion:12, sourceType:'module', }, plugins:[ 'vue', 'prettier', 'simple-import-sort', 'import', ], rules:{ 'prettier/prettier':'error', 'import/order':[ 'error', { groups:[['builtin','external','internal']], pathGroups:[ { pattern:'vue', group:'external', position:'before', }, ], pathGroupsExcludedImportTypes:['builtin'], 'newlines-between':'always', alphabetize:{order:'asc',caseInsensitive:true}, }, ], 'simple-import-sort/imports':'error', 'simple-import-sort/exports':'error', 'vue/multi-word-component-names':'off', }, }
七、使用 Pre-commit 钩子
为了确保每次提交代码时都能够自动格式化 import 语句，我们可以使用 Husky 和 lint-staged 来配置 Pre-commit 钩子。
1. 安装 Husky 和 lint-staged
npm install husky lint-staged --save-dev
2. 配置 Husky 和 lint-staged
在项目根目录下创建一个 husky.config.js 文件，添加以下配置：
// husky.config.js module.exports = { hooks: { 'pre-commit': 'lint-staged', }, }
在 package.json 文件中添加以下配置：
"lint-staged": { "src/**/*.{js,vue}": [ "eslint --fix", "prettier --write" ] }
总结
通过本文的详细讲解，我们已经学会了如何在 Vue 3 项目中使用 ESLint、Prettier、eslint-plugin-import 和 eslint-plugin-simple-import-sort 来规范 import 语句的顺序。
这不仅提升了代码的可读性，还减少了代码提交时的冲突，提升了团队协作效率。
我们还进一步优化了 ESLint 配置，并通过 Pre-commit 钩子确保每次提交代码时都能自动格式化 import 语句。
