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
目录
相关文章
|
13天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
18天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
18天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
14天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
42 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
385 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
61 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
120 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
126 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
4月前
|
存储 小程序 JavaScript

热门文章

最新文章