7.1【微信小程序全栈开发课程】 小程序上线--Eslint格式规范

简介: 在第2.2节我们注释代码规避了ESlint格式错误,现在将代码取消注释,将Eslint格式格式问题统一修改ps:这一节跳过也可以,不进行Eslint格式规范,小程序项目上线后也可以正常运行

1、取消注释


修改bulid/webpack.base.conf.js文件,找到第2.2节注释的代码,取消注释(command+/),记得保存文件~~~


{
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   enforce: 'pre',
   include: [resolve('src'), resolve('test')],
   options: {
     formatter: require('eslint-friendly-formatter')
   }
},


2、格式问题统一修改


(1)修改项目根目录下的package.json文件,将scripts对象中的lint后面的代码,加上–fix,如下图示例


image.png


(2)修改项目根目录下面的.eslintrc.js文件


在rules中添加下面两项,允许tab缩进


// 禁止 tab 缩进
'no-tabs': 0,
// 禁止空格和 tab 的混合缩进
'no-mixed-spaces-and-tabs': 0,


image.png


(3)在终端项目目录下运行npm run lint修改代码的样式


~/WeChatProjects/truth_hold$ npm run lint
> truth_hold@1.0.0 lint /Users/xuzhaoning/WeChatProjects/truth_hold
> eslint --fix --ext .js,.vue src
/Users/xuzhaoning/WeChatProjects/truth_hold/src/pages/index/index.vue
 65:23  error  Expected '!==' and instead saw '!='  eqeqeq
/Users/xuzhaoning/WeChatProjects/truth_hold/src/pages/me/me.vue
  75:21  error  The array literal notation [] is preferable  no-array-constructor
/Users/xuzhaoning/WeChatProjects/truth_hold/src/utils/index.js
  13:9  error  'second' is assigned a value but never used  no-unused-vars
✖ 3 problems (3 errors, 0 warnings)


可以看到现在有三个错误,我们逐一来修改


3、修改格式错误


(1)错误1:error Expected '!==' and instead saw '!='


我们应该将!=写成!==才符合Eslint格式规范,经上面的日志提示,此错误在src/pages/index/index.vue文件中


将resetMart方法中的!=改成!==


async resetMart () {
  // 如果当前总分不为0,继续往下执行
  if (this.mark !== 0) {


(2)错误2:The array literal notation [] is preferable


src/pages/me/me.vue文件第75行的new Array()定义不符合规范,根据下面格式修改


//原代码
var quotes = new Array()
//修改为
var quotes = []



(3)错误3:'second' is assigned a value but never used


在src/utils/index.js文件中,second被定义了,但是没有被用到,所以我们将定义second的字段删掉即可


//删掉
const second = date.getSeconds()


4、重新规范格式


打开终端,在项目目录下重新运行npm run lint


出现下面内容,没有报错,说明格式规范已经完成


~/WeChatProjects/truth_hold$ npm run lint
> truth_hold@1.0.0 lint /Users/xuzhaoning/WeChatProjects/truth_hold
> eslint --fix --ext .js,.vue src
目录
相关文章
|
1天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
14天前
|
人工智能 小程序 IDE
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
随着AI技术的发展,各大厂商推出的AI运动APP如“乐动力”、“天天跳绳”等,使云上运动会、线上健身等概念大热。本文将指导你如何利用“云智AI运动识别小程序插件”,在微信小程序中实现类似功能,包括工具搭建、服务启动及数据回传等步骤,助力开发者高效开发AI运动小程序。
【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
|
6天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
6天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
17天前
|
人工智能 JSON 小程序
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
随着AI技术的发展,各大厂商推出的如“乐动力”、“天天跳绳”等AI运动APP,使得云上运动会、线上健身等概念风靡一时。本文将引导读者从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”,介绍人体姿态检测规则、规则编写语法、执行检测规则运算及姿态检测实战等内容,助力开发者轻松实现AI运动小程序的开发。
【一步步开发AI运动小程序】八、利用body-calc进行姿态识别
|
8天前
|
数据采集 人工智能 小程序
【一步步开发AI运动小程序】十、姿态动作相似度比较
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,重点讲解姿态动作相似度比较功能的运用,包括样本动作帧的采集和姿态相似度的计算方法,以及在组合运动中的应用实例。
|
2天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
7天前
|
人工智能 小程序 开发者
【一步步开发AI运动小程序】十一、人体关键点跳跃追踪
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,涵盖云上运动会、健身打卡等热门应用场景。通过示例代码展示如何调用插件功能,实现动作追踪与分析,助力开发者快速上手。
|
17天前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
21天前
|
人工智能 小程序
【一步步开发AI运动小程序】七、进行运动计时、计数
随着AI技术的发展,阿里体育推出的“乐动力”、“天天跳绳”等APP,使云上运动会、AI体育指导等概念备受关注。本文将引导您从零开始,利用“云智AI运动识别小程序插件”,在小程序中实现类似功能。通过插件的`sports`和`calc`命名空间,可轻松实现运动检测、计时计数等功能。示例代码展示了如何创建并使用俯卧撑运动分析器,以及如何通过摄像头捕获图像进行人体识别和运动分析。敬请期待后续关于姿态分析的内容。