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
目录
相关文章
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
35 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
33 0
|
1天前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
|
1天前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
|
1天前
|
移动开发 小程序 安全
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
18 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
45 3
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
39 2
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园防疫微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园防疫微信小程序的详细设计和实现
24 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
30 0
|
11天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
28 0

热门文章

最新文章