基于 Node.js + Koa 构建完整的 Web API （配置 ESLint 和使用 Airbnb 编码规范）

主题内容：基于 Node.js + Koa 构建完整的 Web API （配置 ESLint 和使用 Airbnb 代码规范）
背景描述：上一篇 基于 Node.js + Koa 构建完整的 Web API （让项目支持 ES6/ES2015 及更高版本的新特性） 介绍了让我们已创建项目更好的支持ES6及更高版本的特性；这一篇我们将介绍代码编码规范的 ESLint + Airbnb 配置和使用，不管在哪一家公司都有自己的编码规范（除这个公司就他一个人，任性），我们这里采用更多人使用的 Airbnb 编码规范，Airbnb 这是一家做国际民宿的公司，他们已形成一套完善的编码规范和使用语法检测，可以很好的提高代码的可读性，可维护性，并有效的减少一些编码错误，对团队一起开发有很大的帮助，接下来我们在之前创建好的项目中使用它，不多说了，开始操作。

目标框架：Node.js v14.15.4 (包含 npm 6.14.10)
开发工具：Visual Studio Code （VS Code）
开发平台：macOS Big Sur 11.1  /  Windows 10
开发人员：成长的小猪 Jason Song

• 安装 VS Code ESLint 扩展
  
  我在 基于Node.js构建完整服务端应用(开发环境安装篇)  这一篇幅也介绍了安装 VS Code ESLint 扩展，这里放一张操作图，这个很简单，所以不做更多的介绍，见下图
  
  
   
• 安装配置 ESLint 相关包至项目
  在 VS Code 里打开“ jasonsoft-koa-server”项目或自己的项目，打开 VS Code 集成的 Terminal 命令行终端窗口 快捷键 macOS (⌃ + `) / Windows (Ctrl + `)，然后执行下命令安装，建议使用 “ cnpm install ” 来安装

  npm install eslint eslint-plugin-import --save-dev

  ➜  jasonsoft-koa-server git:(main) ✗ npm install eslint eslint-plugin-import --save-dev
  + [email protected]
  + [email protected]
  added 160 packages from 87 contributors and audited 368 packages in 80.306s
  
  38 packages are looking for funding
    run `npm fund` for details
  
  found 0 vulnerabilities

• 安装配置 Airbnb 编码规范
  接着上面将 Airbnb 包安装至项目中，执行以下命令，建议使用 “ cnpm install ” 来安装

  npm install eslint-config-airbnb-base --save-dev

  ➜  jasonsoft-koa-server git:(main) ✗ npm install eslint-config-airbnb-base --save-dev
  + [email protected]
  added 3 packages from 4 contributors and audited 371 packages in 7.625s
  
  38 packages are looking for funding
    run `npm fund` for details
  
  found 0 vulnerabilities

  接下来需要在项目根目录下创建一个名为 “  .eslintrc ” 的 ESLint 配置文件，将 Airbnb 规范配置进去 （还有很多配置选项，大家可以去 Airbnb 查看更多设置， 我们的项目基本使用默认的，后面可能会有微调，请关注我）

  {
    "extends": "airbnb-base",
    "rules": {
      "no-console": "off"
    }
  }

  这样保存后，我们的项目如果有不符合 Airbnb 编码规范，就会有问题警告显示，如下在“ jasonsoft-koa-server ”项目中出现示例情况
  
  
  
  如果提示编码规范的警告不是很多的情况，可以单独处理，鼠标移至有波浪线警告上出现如下图，点击 " Quick Fix "
  
  
  
  我们还可以批量检查和批量修复问题，我们在项目的 “ package.json ” 文件里配置以下命令行脚本
   

    "scripts": {
      "lint": "eslint . --ext .js",
      "autofix": "eslint . --ext .js --fix"
    },

  
  
  
  上面的 “ lint ” 命令表示批量检查项目中有不规范的问题， 执行 “ npm run lint ” 就可以检查
  
  
  
  
  
  上面的 “ autofix ” 命令表示批量修复项目中的不规范问题，执行 “ npm run autofix ”就可以自动修复问题，不需要一个个去修改
  
  
  
  我们发现上面的5个错误已被自动修复成功，我们发现在 “  bin/start.js ”的一处警告没有处理成功，需要我们手动操作，我们可以将原来的代码改这样解决这个错误

  //修改前的代码
  
  /**
   * * 导入 app 初始化相关服务和注入相关中间件
   * Added by Jason.Song (成长的小猪) on 2021/02/01 20:21:01
   */
  const app = require('../app');
  
  
  // ------------------------------------
  
  //修改后的代码
  
  /**
   * * 导入 app 初始化相关服务和注入相关中间件
   * Added by Jason.Song (成长的小猪) on 2021/02/01 20:21:01
   */
  module.exports = require('../app');
  

  按上面修改完后，我们再执行一次 “ npm run autofix ” 命令后，发现问题都解决了，上面我自己感觉不是太好，大家接着往下看，有更好的方法
  
   
• 保存代码自动修复问题（这种是不是很爽）
  上面操作我感觉还是太麻烦，我们还可以这样实现修复问题，每次敲完代码保存的时候就自动修复我们编码规范问题，这样是不是更好哦，那我们来设置一下， 看下图操作或使用 快捷键 macOS (command + P) / Windows (Ctrl + P`)
  
  
  
  
  然后出现一个名为  “  settings.json ” 的配置文件，请将下面的配置信息复制粘贴到此文件中保存
   

  {
    "editor.codeActionsOnSave":{
      "source.fixAll.eslint": true
    }
  }

  
  
  这样我们就实现了编辑代码后有规范警告提示，保存代码后将自动修复编码规范问题，这个是不是很方便 ，好，今天关于 ESLint 与 Airbnb 规范就写这么多
   

我将在下一篇介绍在项目中使用 nodemon 工具来检测项目中的文件更改时通过自动重新启动服务

项目源码地址：https://github.com/JasonSoft-Net/jasonsoft-koa-server

上一篇 基于 Node.js + Koa 构建完整的 Web API （让项目支持 ES6/ES2015 及更高版本的新特性）

下一篇 基于 Node.js + Koa 构建完整的 Web API （配置 Nodemon 工具检测文件更改时自动重启应用）

 如果此文对你有一点点帮助，请给一个赞哦；如果你对此文感兴趣，请关注我，后面将继续更新相关内容，查看我本人更多原创文章，请点击这里=>。