前端实战：使用 eslint + prettier 清理 Vue2 老项目的 💩 山

在维护老项目时，代码质量往往是一个令人头疼的问题。尤其是 Vue2 项目，随着时间推移，代码可能会变得越来越难以维护。本文将分享一个渐进式的迁移方法，结合 eslint 和 prettier，将老项目的 💩 山逐步清理干净。

为什么不直接在旧项目中配置？

直接在旧项目中安装和配置 eslint + prettier 是一个非常麻烦的过程。老项目可能存在各种历史遗留问题，比如复杂的 webpack 配置、不规范的代码风格等，直接改动可能会导致项目无法运行。因此，我们采用一种更安全、渐进的方式来完成清理工作。这样也可以一边在老代码上进行开发任务，一边在另一个文件夹里清理 💩 山，最后再把代码合并。

迁移步骤

1. 创建一个新的空项目

使用 vue-cli 创建一个新的空项目。在创建项目时，根据老项目的实际情况手动选择配置，Vue2 + eslint + prettier 是必选项。这样可以确保新项目的代码规范和工具链是最新的。

vue create new-project

2. 迁移核心文件

将老项目中的以下核心文件复制到新项目中：

• vue.config.js
• main.js
• App.vue

然后运行以下命令检查代码规范：

npm run lint

这一步可以帮助我们快速发现核心文件中的代码问题。

3. 渐进式迁移组件和代码

接下来，逐步将老项目中的组件和其他代码复制到新项目中。在每次迁移代码时，运行 npm run lint 对迁移的代码进行检查和修复。

这种渐进式的迁移方式可以有效避免一次性迁移带来的问题，同时确保迁移的代码符合 eslint 和 prettier 的规范。

4. 运行项目并根据需要配置 Webpack 和 Babel

在迁移过程中，可能会遇到一些运行时问题，比如：

• 图片地址解析
• URL 代理
• 其他自定义 loader

此时可以结合 AI 工具（如 ChatGPT）来快速生成或调整 Webpack 和 Babel 的配置。例如，添加图片地址解析的配置：

// filepath: vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use("url-loader")
      .loader("url-loader")
      .options({
        limit: 10000,
        name: "img/[name].[hash:7].[ext]",
      });
  },
};

5. 完整迁移并整体检查

当新项目可以正常运行后，将老项目的所有代码迁移到新项目中。为了避免不必要的代码干扰，可以通过配置 .eslintignore 忽略一些暂时不需要 lint 的文件：

# filepath: .eslintignore
node_modules/
dist/

old_src/

然后运行以下命令对所有代码进行整体检查和修复：

npm run lint

6. 迁移回老项目

当新项目的代码清理完成后且运行没有报错后，将规范化的代码迁移回老项目中，覆盖原有的 💩 山。此时需要多次测试，确保功能正常。同时，根据项目需求调整 eslint 规则，进一步优化代码质量。

清理后的收益

• 代码更易维护：清理后的代码符合统一的规范，阅读和修改更加方便。
• 包体积更小：通过清理无用代码和优化配置，打包后的文件体积可能会显著减少。
• 团队协作更高效：统一的代码规范减少了团队协作中的摩擦。

总结

通过以上步骤，我们可以在不影响老项目运行的情况下，逐步清理代码，最终将老项目的 💩 山变成一座整洁的花园。虽然这个过程需要一定的时间和耐心，但最终的收益是值得的。希望本文对你有所帮助！