基于 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
+ eslint@7.19.0
+ eslint-plugin-import@2.22.1
added 160 packages from 87 contributors and audited 368 packages in 80.306s38 packages are looking for fundingrun `npm fund` for detailsfound 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.625s38 packages are looking for fundingrun `npm fund` for detailsfound 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 工具检测文件更改时自动重启应用）

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

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

基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
转载需经本人同意且标注本文原始地址:https://zhaomenghuan.github.io/blog/nodejs-eggjs-usersytem.html 前言近来公司需要构建一套 EMM( ...
基于 Egg.js 框架的 Node.js 服务构建之用户管理设计 1
前言近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...
认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具...
认识Web.桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具一.开发环境的搭建(基于win10) 1.安装node.js和npm 到node.js官网下载安装包(包含npm ...
Day 27: Restify —— 在Node.js中构建正确的REST Web服务
今天决定学一个叫做restify的Node.js模块.restify模块使得在Node.js中写正确的REST API变得容易了很多,而且它还提供了即装即用的支持,如版本控制.错误处理.CORS和内容 ...
node ajax crud,基于node.js和rethinkdb的CRUD(增删改查)Web服务
基于node.js和rethinkdb的CRUD(增删改查)Web服务这是一个简单的REST web服务演示案例源码,使用Node.JS和Express 和RethinkDB,后者持久化JSON数据 ...
Fenix – 基于 Node.js 的桌面静态 Web 服务器
Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...
基于Node.js自我展示博客网站-计算机毕设附源码231547
自我展示博客网站的设计与实现摘要个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
NGINX配置基于Node.js服务的负载均衡服务器
NGINX配置基于Node.js服务的负载均衡服务器本部署指南说明了如何使用NGINX开源和NGINX Plus在Node.js应用程序服务器池之间平衡HTTP和HTTPS通信.本指南中的详细说明适 ...
如何在Windows上安装Angular：Angular CLI，Node.js和构建工具指南
In this tutorial, we'll learn how to install Angular CLI in Windows and use it to create an Angular ...

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

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

最新文章

热门文章