【Vue】ESlint代码规范及手动修复

代码规范:一套写代码的约定规则。例如:赋值符号的左右是否需要空格?一句结束是否是要加;?…

没有规矩不成方圆

ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则。


一、JavaScript Standard Style 规范说明

建议把:https://standardjs.com/rules-zhcn.html 看一遍,然后在写的时候, 遇到错误就查询解决。

下面是这份规则中的一小部分:

  • 字符串使用单引号 – 需要转义的地方除外

    双引号也可以,但是单引号的阅读性更高一些

  • 无分号没什么不好。不骗你!

  • 关键字后加空格 if (condition) { ... }

  • 函数名后加空格 function name (arg) { ... }

  • 坚持使用全等 === 摒弃 ==

    因为 == 会出现隐式类型转换,使代码不稳定


二、代码规范错误

如果你的代码不符合standard的要求,eslint会跳出来刀子嘴,豆腐心地提示你,它会明确告诉你第几行、第几个字符的位置出错了

下面我们在main.js中随意做一些改动:false后面有分号,添加一些空行,空格。

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false;



new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')


按下保存代码之后:

你将会看在控制台中输出如下错误:

在main.js里第5行第33个字符这里出错了

68294255431

image-20240205103201674

eslint 是来帮助你的。心态要好,有错,就改。


三、手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思,你可以根据错误代码(func-call-spacing, space-in-parens,…)去 ESLint 规则列表中查找其具体含义。

打开 ESLint 规则表,使用页面搜索(Ctrl + F)这个代码,查找对该规则的一个释义。

image-20240205104104079

相关推荐

  1. 代码规范开发工具

    2024-06-09 13:14:05       36 阅读
  2. 前端代码规范-命名规范

    2024-06-09 13:14:05       9 阅读
  3. 项目代码规范

    2024-06-09 13:14:05       24 阅读
  4. 项目代码规范

    2024-06-09 13:14:05       32 阅读

最近更新

  1. 力扣475.供暖器

    2024-06-09 13:14:05       0 阅读
  2. 图片based64编码解码python代码

    2024-06-09 13:14:05       0 阅读
  3. ray框架训练阶段和 Serve 阶段对比

    2024-06-09 13:14:05       0 阅读

热门阅读

  1. 用C++做一个跑酷游戏

    2024-06-09 13:14:05       3 阅读
  2. FPGA复位:(41)复位管脚PR报错?

    2024-06-09 13:14:05       4 阅读
  3. 逆运动学IK原理举例说明

    2024-06-09 13:14:05       5 阅读
  4. 浅谈单臂路由

    2024-06-09 13:14:05       4 阅读
  5. Vue基础篇--table的封装

    2024-06-09 13:14:05       3 阅读
  6. 数据结构——哈希表

    2024-06-09 13:14:05       3 阅读
  7. U9C的数据查询视图Sql

    2024-06-09 13:14:05       3 阅读
  8. kotlin gradle踩过的坑

    2024-06-09 13:14:05       5 阅读
  9. 关于xilinx srio ip复位问题

    2024-06-09 13:14:05       4 阅读
  10. Elasticsearch高效检索:基础查询详解

    2024-06-09 13:14:05       3 阅读
  11. MySQL入门学习-聚合和分组.计数(COUNT()函数)

    2024-06-09 13:14:05       3 阅读
  12. ch1计算机网络和因特网

    2024-06-09 13:14:05       4 阅读
  13. bpmn+vue 中文文档

    2024-06-09 13:14:05       4 阅读
  14. 大语言模型原理基础与前沿 为什么ICL有效

    2024-06-09 13:14:05       3 阅读