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
目录
相关文章
ly~
|
8天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
41 6
|
7天前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
7天前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
28天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
7天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
移动开发 小程序 前端开发
|
2月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
2月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
2月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录是一个重要而复杂的问题。
微信小程序作为业务拓展的新渠道,其全栈开发涉及前端与后端的紧密配合。本文聚焦小程序开发中的异常处理与日志记录,从前端的网络、页面跳转等异常,到后端的数据库、API调用等问题,详述了如何利用try-catch及日志框架进行有效管理。同时强调了集中式日志管理的重要性,并提醒开发者注意安全性、性能及团队协作等方面,以构建稳定可靠的小程序应用。
48 1
|
2月前
|
小程序 前端开发 API
微信小程序全栈开发中的多端适配与响应式布局是一种高效的开发模式。
探讨小程序全栈开发中的多端适配与响应式布局,旨在实现统一的用户体验。多端适配包括平台和设备适配,确保小程序能在不同环境稳定运行。响应式布局利用媒体查询和弹性布局技术,使界面适应各种屏幕尺寸。实践中需考虑兼容性、性能优化及用户体验,借助跨平台框架如Taro或uni-app可简化开发流程,提升效率。
36 1
下一篇
无影云桌面