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

最新推荐文章于 2024-08-07 09:28:15 发布

成长的小猪

最新推荐文章于 2024-08-07 09:28:15 发布

阅读量1k

点赞数

分类专栏： Node.js 文章标签： node.js koa eslint airbnb eslint airbnb

本文链接：https://blog.csdn.net/jasonsong2008/article/details/113571784

版权

Node.js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

主题内容：基于 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
+ eslint@7.19.0
+ eslint-plugin-import@2.22.1
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
+ eslint-config-airbnb-base@14.2.1
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 规范就写这么多