【Vue2+3入门到实战】(17)VUE之VueCli脚手架自定认创建项目、ESlint代码规范与修复、 ESlint自动修正插件的使用 详细示例

目录

    • 一、本节内容
    • 二、VueCli 自定义创建项目
    • 三、ESlint代码规范及手动修复
        • 1.JavaScript Standard Style 规范说明
        • 2.代码规范错误
        • 3.手动修正
    • 四、通过eslint插件来实现自动修正

在这里插入图片描述

一、本节内容

  • VueCli脚手架自定认创建项目
  • ESlint代码规范与修复
  • ESlint自动修正插件

二、VueCli 自定义创建项目

1.安装脚手架 (已安装)

npm i @vue/cli -g

2.创建项目

vue create hm-exp-mobile
  • 选项
Vue CLI v5.0.8
? Please pick a preset:Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)
> Manually select features     选自定义
  • 手动选择功能

在这里插入图片描述

  • 选择vue的版本
  3.x
> 2.x
  • 是否使用history模式

在这里插入图片描述

  • 选择css预处理

在这里插入图片描述

  • 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范)
  • 比如:const age = 18; => 报错!多加了分号!后面有工具,一保存,全部格式化成最规范的样子

在这里插入图片描述

  • 选择校验的时机 (直接回车)

在这里插入图片描述

  • 选择配置文件的生成方式 (直接回车)

在这里插入图片描述

  • 是否保存预设,下次直接使用? => 不保存,输入 N

在这里插入图片描述

  • 等待安装,项目初始化完成

在这里插入图片描述

  • 启动项目
npm run serve

三、ESlint代码规范及手动修复

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

没有规矩不成方圆

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

1.JavaScript Standard Style 规范说明

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

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

  • 字符串使用单引号 – 需要转义的地方除外
  • 无分号 – 这没什么不好。不骗你!
  • 关键字后加空格 if (condition) { ... }
  • 函数名后加空格 function name (arg) { ... }
  • 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
2.代码规范错误

如果你的代码不符合standard的要求,eslint会跳出来刀子嘴,豆腐心地提示你。

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

import Vue from 'vue'
import App from './App.vue'import './styles/index.less'
import router from './router'
Vue.config.productionTip = falsenew Vue ( {render: h => h(App),router
}).$mount('#app')

按下保存代码之后:

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

在这里插入图片描述

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

3.手动修正

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

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

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

在这里插入图片描述

四、通过eslint插件来实现自动修正

  1. eslint会自动高亮错误显示
  2. 通过配置,eslint会自动帮助我们修复错误
  • 如何安装

在这里插入图片描述

  • 如何配置
// 当保存的时候,eslint自动帮我们修复错误
"editor.codeActionsOnSave": {"source.fixAll": true
},
// 保存代码,不自动格式化
"editor.formatOnSave": false
  • 注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目
  • 注意:使用了eslint校验之后,把vscode带的那些格式化工具全禁用了 Beatify

settings.json 参考

{"window.zoomLevel": 2,"workbench.iconTheme": "vscode-icons","editor.tabSize": 2,"emmet.triggerExpansionOnTab": true,// 当保存的时候,eslint自动帮我们修复错误"editor.codeActionsOnSave": {"source.fixAll": true},// 保存代码,不自动格式化"editor.formatOnSave": false
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/588670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FA模板制作流程

1、FA模板制作的流程(完整复制模板制作) 总结: FA完整复制云桌面模板流程: 1、安装一个全新的Windows,挂载并安装tools 2、关闭防火墙、启动administrator本地超管用户 3、挂载FusionAccess_WindowsDesktop_Instal…

使用iris数据集学习基础的机器学习分类任务

通过一个案例来理解机器学习的分类任务 关于数据集的相关介绍大家可以观看下面的连接: iris数据集的介绍 根据数据集的特征值来预测目标值 即通过x来预测y 相应的代码如下: # Training Machine Learning Algorithms for Classification # 加载数据 s h…

C/C++面向对象(OOP)编程-回调函数详解(回调函数、异步编程、函数指针、)

本文主要介绍回调函数的使用,包括函数指针、异步回调编程、主要通过详细的例子来指导在异步编程和事件编程中如何使用回调函数来实现。 🎬个人简介:一个全栈工程师的升级之路! 📋个人专栏:C/C精进之路 &…

黑马程序员SSM框架-SpringBoot

视频连接:SpringBoot-01-SpringBoot工程入门案例开发步骤_哔哩哔哩_bilibili SpringBoot简介 入门程序 也可以基于官网创建项目。 SpringBoot项目快速启动 下面的插件将项目运行所需的依赖jar包全部加入到了最终运行的jar包中,并将入口程序指定。 Spri…

【网络面试(2)】DNS原理-域名和IP地址的查询转换

从上一篇博客我们得知浏览器是如何生成了HTTP消息了,但是浏览器作为应用程序,是不具备向网络中发送请求的能力,而是需要委托给操作系统的内核协议栈来发送请求。在委托协议栈之前,浏览器还要做的一件事情就是将域名转换为IP地址。…

gn入门(Chromium)

Chromium是用gn和ninja进行编译的,即gn把.gn文件转换成.ninja文件,然后ninja根据.ninja文件将源码生成目标程序。gn和ninja的关系就与cmake和make的关系差不多。 代码下载:https://download.csdn.net/download/arv002/88668243 1. 环境配置 在我们自己的项目中,也可以使用…

java进阶(三)

IO与网络编程 3 输入输出流IO3.1 基础定义3.2 IO框架3.3 读取字节输入流-InputStream3.3.1 InputStream.read3.3.2 FileInputStream类说明 3.4读取字符输入流Reader3.4.1 Reader.read3.4.2 FileReader类说明 3.5 字节输出流OutputStream3.5.1 OutputStream.write3.5.2 FileOutp…

NumPy 中级教程——通用函数(ufuncs)

Python NumPy 中级教程:通用函数(ufuncs) NumPy 中的通用函数(ufuncs)是一种能够对数组进行元素级操作的函数,支持数组的快速、逐元素的操作,是进行数据处理的关键工具之一。在本篇博客中&…

nodejs微信小程序+python+PHP特困救助供养信息管理系统-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

分库分表之Mycat应用学习四

4 分片策略详解 分片的目标是将大量数据和访问请求均匀分布在多个节点上,通过这种方式提升数 据服务的存储和负载能力。 4.1 Mycat 分片策略详解 总体上分为连续分片和离散分片,还有一种是连续分片和离散分片的结合,例如先 范围后取模。 …

基于AT89C51单片机可做实物的温度烟雾火灾报警设计

点击链接获取Keil源码与Project Backups仿真图: https://download.csdn.net/download/qq_64505944/88658141?spm1001.2014.3001.5503 C 源码仿真图毕业设计实物制作步骤02 摘要 随着现代家庭用火、用电量的增加,家庭火灾发生的频率越来越高。火灾报警…

快排例题——第k个数

做道简单一点的题巩固一下 基本思路 与上一个整体相似,通过快速排序将长度为n的整数数列变为从小到大的有序数组,在拿出其中第k个数。 题目描述 给定一个长度为 n 的整数数列,以及一个整数 k,请用快速选择算法求出数列从小到大…

浅学lombok

Lombok(Project Lombok)是一个用于 Java 编程语言的开源库,旨在减少 Java 代码中的冗余和样板代码,提高开发人员的生产力。它通过使用注解来自动生成 Java 类的常见方法和代码,从而使开发人员能够编写更简洁、更具可读…

ColibriSM v1.4.2 已注册– 仿脸书类社交网络PHP源码

ColibriSM:当代社交网络平台的崛起 一、开篇与概述 在信息时代的浪潮中,社交媒体成为了人们日常生活中不可或缺的一部分。ColibriSM,作为一个仿照脸书(Facebook)、推特(Twitter)和照片墙&#…

C++的一些知识

一. 语法 move怎么用 https://blog.csdn.net/zhangmiaoping23/article/details/126051520 这个文章讲的很好,其中有一些疑惑的点 (1) 左值引用不能接右值 class T1{int a; }; int main(){T1 t1 T1();T1 && t1_temp T1(); //T1()是一个临时对象&#xf…

WPF 新手指引弹窗

新手指引弹窗介绍 我们在第一次使用某个软件时,通常会有一个“新手指引”教学引导。WPF实现“新手指引”非常方便,且非常有趣。接下来我们就开始制作一个简单的”新手指引”(代码简单易懂,便于移植),引用到我们的项目中又可添加一…

Windows电脑引导损坏?按照这个教程能修复

前言 Windows系统的引导一般情况下是不会坏的,小伙伴们可以不用担心。发布这个帖子是因为要给接下来的文章做点铺垫。 关注小白很久的小伙伴应该都知道,小白的文章都讲得比较细。而且文章与文章之间的关联度其实还是蛮高的。在文章中,你会遇…

Go语言程序设计-第6章--方法

Go语言程序设计-第6章–方法 对象就是简单的一个值或者变量,并且拥有其方法,而方法是某种特定类型的函数。 6.1 方法的声明 方法的声明和普通函数的声明类似,只是在函数名字前面多了一个参数。这个参数把这个方法绑定到这个参数对应的类型…

【影像组学入门百问】#58---#62

#58-使用PyRadiomics能提取出多少影像组学特征? 当前支持以下特征类别: 第一阶段统计量 基于形状的(3D) 基于形状的(2D) 灰度共生矩阵(GLCM) 灰度共生长度矩阵(GLRLM&a…

springboot接口文档

Swagger 在Spring Boot中生成和维护接口文档的一个常用方法是使用Swagger。Swagger是一个开源软件框架,它帮助开发者设计、构建、记录和使用RESTful Web服务。下面是在Spring Boot项目中使用Swagger来创建接口文档的详细步骤:1. 添加Swagger依赖 在你的Spring Boot项目的pom…