以 Vue 3 项目为例，你是否经常遇到 import 语句顺序混乱的问题？要想解决它其实很容易！

大家好，我是CodeQi！ 

在项目开发过程中，我们经常会遇到项目中的 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 语句。

看完的朋友可以尝试一下！

---

祝你编码愉快！Happy coding!

关注我，原创文章第一时间推送， 点赞和收藏就是最大的支持❤️