Vue 代码检测(ESLint)

2023-11-06

        每个人编码的习惯不一样,或美观或不美观,或者在编码的过程中会有些疏漏未曾发现。为提高代码美观度、提高代码审阅效率,使得多人协作时代码风格统一,规定一套编码规则并在编写的过程中遵守该规则变得很有必要。在一些比较正式的大公司,公司也会有一套自己的代码编写规则,所以最好在代码生产的时候就一直对编写的代码进行代码检测。养成一个良编码习惯,从我做起!

        ESLint 是一个代码检查工具,用来检查你的代码是否符合指定的规范。一般在在 Vue 项目创建好之后,项目中就已经集成了 ESLint ,平时在开发的过程中可以充分使用该工具。

ESlint 配置

        ESLint 的配置文件是位于项目根目录的 .eslintrc.js 文件。(更多配置详情见:Eslint该如何配置?Eslint使用以及相关配置说明):

module.exports = {
  root: true,
   /* env
    指定脚本的运行环境,每一个环境定义了一组预定义的全局变量,可以定义多个环境。
    - browser - 浏览器环境中的全局变量。
    - node - Node.js 全局变量和 Node.js 作用域。
    - commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
    - shared-node-browser - Node.js 和 Browser 通用全局变量。
    - es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性(该选项会自动设置 ecmaVersion 解析器选项为 6) */
  env: {
    node: true,
  },
  /* extends
  提供了继承其它配置文件的选项,属性可以是一个第三方包、配置文件的路径,也可以是字符串数组继承多个
  */
  extends: ["plugin:vue/strongly-recommended", "@vue/standard"],
  parserOptions: {
    parser: "babel-eslint",
  },
  /* rules 是具体的代码检查选项,要改变一个规则设置,必须将规则 ID 设置为下列值之一:
   - "off" 或 0 - 关闭规则
   - "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序中止)
   - "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会中止)
  */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    'semi': [2, 'never'],
  },
};

       在编写代码保存会提示错误,说明 ESLint 生效了:

代码修正 

        在 ESLint 进行代码检测并在编辑器中提示出错误之后,我们需要对代码进行修正,代码修正有以下四种方式:

  • 手动修正

        根据错误提示来一项一项手动修正。如果你认识命令行中的语法报错是什么意思,可以根据错误规则名字(func-call-spacing, space-in-parens,…)去 ESLint 规则列表网站中查找其具体含义。

  • 命令修正

        使用 vue-cli 创建项目时提供了自动修复功能(有些复杂的错误还是要手动来改正),具体做法是运行:

npm run lint
  • 修改规则

        在项目根目录下面,有一个.eslintrc.js 文件,它是对 ESLint 进行配置的,其中有一个属性是专门用来设置自定义代码规则的:rules。例如其中的一条规则:

rules: {
  'semi': [2, 'never'],
}

         这条规则表示每一个语句结束之后不需要使用分号,如果语句之后有分号,会提示出错误,可以修改这条规则为:

rules: {
  'semi': [2, 'always'],
}

        这样在编码的时候,在语句后加分号就不会报错了 。

  • 插件修正

        在 VScode 编辑器中搭配 ESLint 插件一起使用,这种方式和命令修正的方式有些类似,使用之后有些复杂的错误还是要手动来改正,但是这种方式相比于命令修正的方式有两个好处:1、可以更加明显的以红色波浪线的形式提示具体出错那一行代码;2、ctrl+s 保存编写的代码时会立即自动修正错误。

        首先在 VScode 中安装 ESLint 插件:

         想要实现在 ctrl+s 保存编写的代码时会立即自动修正错误,还需要在 VScode 中进行如下配置:

         复制通道:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

       

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue 代码检测(ESLint) 的相关文章

随机推荐

  • 信息学奥赛一本通(c++):2024:【例4.10】末两位数

    一 题目 2024 例4 10 末两位数时间限制 1000 ms 内存限制 65536 KB 题目描述 求n个1992的乘积的末两位数是多少 输入 输入n 输出 如题述的末两位数 输入样例 3 输出样例 88 提示 数据范围 对于所有数据
  • GBase 8c 教程(十)分片基础操作

    在建表语句中加入分片操作 可以将数据以HASH分片的方式分配至每个DN节点 操作如下 1 建表 使用distribute by进行HASH分片操作 CREATE TABLE disttab c1 int c2 int c3 varchar
  • 深度学习笔记20235018

    使用深度神经网络 几十层 几百层的神经网络 从大规模数据中学习的过程就是深度学习 将输入的数据的异同点进行提取并且层层抽象 记录在神经网络的参数里就训练出来一个可以区分这些物体的深度神经网络 面向机器的知识图谱 是一个关联的知识网络 举一反
  • PCL求取三维点云模型每点曲率

    最近在做有关实验需要计算模型曲率 但是网上找了一圈也没找到满意的资料 最后发现PCL库可以很方便的求取模型中每一个点的曲率 但是我们要想将PCL库求得的曲率数据应用到自己的项目中需要将PCL库与我们的项目进行结合 并且在PCL求出曲率后存放
  • SSM框架之SpringMVC

    文章目录 SpringMVC MVC设计模式 springmvc框架 入门程序 配置前端控制器和处理器适配器 开发Handler 映射器和适配器 非注解的处理器映射器 非注解的处理器适配器 注解的处理器映射器和适配器 重点 源码分析 spr
  • 长短时记忆网络(LSTM)负荷预测项目(matlab)

    目录 1 LSTM介绍 2 数据集准备及预处理 3 LSTM模型搭建与训练 4 预测模型测试 1 LSTM介绍 长短期记忆网络 LSTM long short term memory 是 RNN 的一种变体 其核心概念在于细胞状态以及 门
  • 微信小程序宠物用品服务商城SSM-JAVA【数据库设计、论文、源码、开题报告】

    功能介绍 操作角色为管理员和用户 商家 管理员的功能为用户管理 商家管理 宠物分类管理 宠物信息管理 商品分类管理 宠物用品管理 项目类型管理 服务项目管理 宠物日志管理 订单管理等 用户的功能为购买宠物 商品 预约服务发表日志管理订单等
  • 美团西安美食部分爬虫(修改版)(python)

    美团美食 coding UTF 8 import requests import time from bs4 import BeautifulSoup import json import csv import random with op
  • 区块链100篇之fabric的网络搭建(一)

    好久没写博客了 今天开始写关于fabric相关的博客 包括网络的搭建 链码的编写以及sdk的封装 搭建网络 网络的搭建想分为三篇来写 第一篇写网络的搭建 这里是官方fabric samples的简化版 第二篇是关于yaml文件的编写 第三篇
  • 【数据科学】肯德尔等级相关系数( Kendall's tau coefficient )

    在统计学中 Kendall等级相关系数 通常称为Kendall的tau系数 在希腊字母 之后 是用于测量两个测量量之间的序数关联的统计量 甲tau蛋白测试是一种非参数假设检验用于基于所述tau蛋白系数统计依赖性 它是衡量等级相关 数据的排序
  • java 版本企业招标投标管理系统源码+功能描述+tbms+及时准确+全程电子化

    功能描述 1 门户管理 所有用户可在门户页面查看所有的公告信息及相关的通知信息 主要板块包含 招标公告 非招标公告 系统通知 政策法规 2 立项管理 企业用户可对需要采购的项目进行立项申请 并提交审批 查看所有的立项信息 主要功能包含 招标
  • 第五章 Maven结合Junit实现单元测试

    maven的重要职责之一就是自动运行单元测试 它通过maven surefire plugin与主流的单元测试框架junit和testng集成 并且能够自动生成丰富的结果报表 maven并不是一个单元测试框架 他只是在构建执行打特定的生命周
  • RobotFramework介绍

    Robot Framework 1 入门介绍 小菠萝测试笔记 博客园 cnblogs com
  • C++——初始化列表

    初始化列表 在构造函数执行时 先执行初始化列表 实现变量的初始化 然后再执行函数内部的语句 构造函数体赋值 在创建对象时 编译器通过调用构造函数 给对象中各个成员变量一个合适的初始值 class Date public Date int y
  • css中nth-child的属性

    参数为整数 nth child 1 它表示要选择父元素中索引为该数值的子元素 此时的索引值从1开始 参数是奇数偶数 nth child odd odd表示选择奇数项的子元素 nth child even even表示选择偶数项的子元素 参数
  • Tkinter 组件详解(一):Label

    Tkinter 组件详解之Label Label 标签 组件用于在屏幕上显示文本或图像 Label 组件仅能显示单一字体的文本 但文本可以跨越多行 另外 还可以为其中的个别字符加上下划线 例如用于表示键盘快捷键 何时使用 Label 组件
  • Linux驱动之input输入子系统

    目录 前言 介绍 input dev结构体 输入子系统的使用流程 实例测试 前言 输入子系统用于实现Linux系统输入设备 鼠标 键盘 触摸屏 游戏杆 驱动的一种框架 Linux内核将其中的固定部分放入内核 驱动开发时只需要实现其中的不固定
  • Web自动化测试从基础到项目实战之一启动不同的浏览器及配置

    在web自动化中目前selenium作为底层的自动化测试是目前运用最广的 但是各个公司都会在这个基础之上进行修改 首先当我们测试环境有了之后我们需要做得就是去配置我们的driver 这里的driver你可以理解为就是我们脚本和浏览器之间的桥
  • inuxCentos7.5安装jdk1.8(勿继续踩坑)

    LinuxCentos7 5安装jdk1 8 场景 错误出现 下面到了安装步骤 场景 首先我是一名后端 其实这种工作并不应该由我来干 先甩一下锅哈哈 由于我们公司没有真正的运维 所以什么事都需要我们后端来亲力亲为 一次偶然的机遇就把我派到了
  • Vue 代码检测(ESLint)

    每个人编码的习惯不一样 或美观或不美观 或者在编码的过程中会有些疏漏未曾发现 为提高代码美观度 提高代码审阅效率 使得多人协作时代码风格统一 规定一套编码规则并在编写的过程中遵守该规则变得很有必要 在一些比较正式的大公司 公司也会有一套自己