vue项目使用eslint+prettier管理项目格式化

代码格式化、规范化说明

使用eslint+prettier进行格式化,vscode中需要安装插件ESLint、Prettier - Code formatter,且格式化程序选择为后者(vue文件、js文件要分别设置)  
对于eslint规则,在格式化时不会全部自动调整,建议的处理方式为:   
1.手工按提示进行处理  
2.vsocode中在源码上右键---源代码操作--Fix all ESLint auto-fixable problems(主要包含attribute小写、顺序、js代码块顺序等)  
使用此方式要注意,有时会处理错误,建议先格式化一次后再进行此操作  
3.执行npm run lint,此种方式针对所有文件,但有的错误或警告有时候无法修复  
4.对单行取消提示:在前面加注释如// eslint-disable-next-line vue/require-default-prop,如果是vscode可以通过鼠标悬浮出现修复提示后自动添加。但要注意,对有的代码,如html元素有多个attribute换行时,前面增加 // ....这样的注释并不被认可。  
5.对文件取消息提示:在vue文件第一行增加,在js文件第1行增加// eslint-disable  
注意:错误(红色)必须按提示进行处理,不能取消提示,警告(黄色)尽量处理,实在不好处理的,可按行或按文件取消提示

1、将指定版本的这些依赖安装到 devDependencies 中的 npm 命令:

npm install --save-dev @vue/eslint-config-standard@^4.0.0 eslint@^8.33.0 eslint-config-airbnb-base@^15.0.0 eslint-config-prettier@^8.6.0 eslint-plugin-import@^2.27.5 eslint-plugin-prettier@^3.1.4 eslint-plugin-prettier-vue@^2.1.1 eslint-plugin-vue@^9.9.0 prettier@^2.1.2 prettier-vue@^1.1.2

2、项目根路径引入相关配置文件

.prettir的全部规范只有十来个,详情可参考https://www.prettier.cn/docs/options.html)

3、scripts中引入lint

"lint": "eslint \"src/**/*.{js,vue}\" --quiet --fix",
"lint:prettier":"prettier --write \"src/**/*.{js,vue}\"",

4、使用lint

npm run lint
!!!!注意:eslint会自动修复一些错误,但有时会引入新的错误,为了确保不影响现有功能,请手动检查每个被修复的文件。!!!!

5、使用prettier脚本

npm run lint:prettier
会自动使用 Prettier 格式化项目文件errc.json:Prettier 的配置文件,用于规定代码格式化规则,如缩进、引号使用、分号添加等。
.prettierignore:指定 Prettier 不处理的文件或目录。
.eslintrc.json:ESLint 的配置文件,定义代码检查规则,包括语法错误、风格问题等。
.eslintignore:指定 ESLint 不检查的文件或目录。prettie

在这里插入图片描述
在这里插入图片描述

.prettierrc.json代码

{"printWidth": 120,"singleQuote": true,"useTabs": false,"semi": false,"tabWidth": 2,"trailingComma": "none","bracketSpacing": true,"jsxBracketSameLine": false,"arrowParens": "avoid","endOfLine": "lf"
}

.prettierignore代码

dist/*
node_modules

.eslintrc.json代码

{"root": true,"env": {"browser": true,"node": true,"es2021": true},"extends": ["airbnb-base/legacy","plugin:vue/recommended","prettier"],"parser": "vue-eslint-parser","parserOptions": {"ecmaVersion": "latest","sourceType": "module","ecmaFeatures": {"jsx": true}},"plugins": ["vue","import"],"rules": {"prefer-exponentiation-operator": "off","eqeqeq": "off","no-underscore-dangle": 0,"vue/multi-word-component-names": 0,"func-names": 0,"import/no-extraneous-dependencies": ["error",{"devDependencies": true,"optionalDependencies": true,"peerDependencies": true}],"no-console": ["warn",{"allow": ["warn","error","log"]}],"no-debugger": 2,"no-alert": 2,"no-param-reassign": ["error",{"props": false}],"lines-between-class-members": 0,"dot-notation": 0,"no-plusplus": ["error",{"allowForLoopAfterthoughts": true}]}
}

.eslintignore

dist/*
vue.config.js
vite.config.js

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

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

相关文章

Leetcode 整数转罗马数字

这段代码的算法思想是基于罗马数字的减法规则,将整数转换为罗马数字的字符串表示。下面是详细的解释: 算法步骤: 定义数值和符号对应关系:代码中定义了两个数组:values 和 symbols。values 数组包含了罗马数字的数值&…

web——sqliabs靶场——第六关——报错注入和布尔盲注

这一关还是使用报错注入和布尔盲注 一. 判断是否有sql注入 二. 判断注入的类型 是双引号的注入类型。 3.报错注入的检测 可以使用sql报错注入 4.查看库名 5. 查看表名 6.查看字段名 7. 查具体字段的内容 结束 布尔盲注 结束

Spring Cloud Eureka 服务注册与发现

Spring Cloud Eureka 服务注册与发现 一、Eureka基础知识概述1.Eureka两个核心组件2.Eureka 服务注册与发现 二、Eureka单机搭建三、Eureka集群搭建四、心跳续约五、Eureka自我保护机制 一、Eureka基础知识概述 1.Eureka两个核心组件 Eureka Server :服务注册中心…

CAN通讯演示(U90-M24DR)

概述 CAN通讯一般用的不多,相比于Modbus通讯不是特别常见,但也会用到,下面介绍一下CAN通讯,主要用U90军用PLC演示一下具体的数据传输过程。想更具体的了解的话,可以自行上网学习,此处大致介绍演示。…

时序论文19|ICML24 : 一篇很好的时序模型轻量化文章,用1k参数进行长时预测

论文标题:SparseTSF: Modeling Long-term Time Series Forecasting with 1k Parameters 论文链接:https://arxiv.org/pdf/2402.01533 代码链接:https://github.com/lss-1138/SparseTSF 前言 最近读论文发现时间序列研究中,模型…

(动画版)排序算法 -希尔排序

文章目录 1. 希尔排序(Shellsort)1.1 简介1.2 希尔排序的步骤1.3 希尔排序的C实现1.4 时间复杂度1.5 空间复杂度1.6 希尔排序动画 1. 希尔排序(Shellsort) 1.1 简介 希尔排序(Shells Sort),又…

Python学习从0到1 day26 第三阶段 Spark ④ 数据输出

半山腰太挤了,你该去山顶看看 —— 24.11.10 一、输出为python对象 1.collect算子 功能: 将RDD各个分区内的数据,统一收集到Driver中,形成一个List对象 语法: rdd.collect() 返回值是一个list列表 示例: from …

DNS解析库

DNS解析库 dnsDNS的解析库以及域名的详解解析库dns解析的端口dns域名的长度限制流程优先级在现实环境中实现内网的dns解析 练习(Ubuntu内网实现DNS解析)主服务器备服务器 dns 域名系统,域名和ip地址互相映射的一个分布式的数据库&#xff0c…

kafka 生产经验——数据积压(消费者如何提高吞吐量)

bit --> byte --> kb -->mb -->gb --> tb --> pb --> eb -> zb -->yb

【记录】公司管理平台部署:容器化部署

前置条件 技能要求 了解Docker基本使用和常用命令。会写Dockerfile文件。会写docker-compose文件环境要求 云服务器,已安装好安装Docker本机 IntelliJ IDEA 2022.1.3配置 配置服务器SSH连接 进入 Settings -> Tools -> SSH Configurations 点击加号创建SSH连接配置 填…

从零开始 blender插件开发

blender 插件开发 文章目录 blender 插件开发环境配置1. 偏好设置中开启相关功能2. 命令行打开运行脚本 API学习专有名词1. bpy.data 从当前打开的blend file中,加载数据。2. bpy.context 可用于获取活动对象、场景、工具设置以及许多其他属性。3. bpy.ops 用户通常…

el-table 行列文字悬浮超出屏幕宽度不换行的问题

修改前的效果 修改后的效果 ui框架 element-plus 在网上找了很多例子都没找到合适的 然后这个东西鼠标挪走就不显示 控制台也不好调试 看了一下El-table的源码 他这个悬浮文字用的el-prpper 包着的 所以直接改 .el-table .el-propper 设置为max-width:1000px 就可以了 吐槽一…

Tcp中的流量控制,拥塞控制,超时重传时间的选择,都附带相应例子说明

端口号的了解 通常进行通信时,发送方使用任意端口,指定接收方为指定端口,因为接收方在接收到后的需要根据发送方指定的接收方端口号,来选择使用哪一个服务进程进行处理。 端口号还可以分类为两个大类: TCP和UDP报文的…

Nextflow最佳实践:如何在云上高效处理大规模数据集

1. Nextflow 软件架构介绍 Nextflow 是一个用于简化数据驱动计算流程的工具,可以在各种计算环境中轻松部署。它采用了分布式计算和容器技术,实现了高度模块化、可重复性和可扩展性。NextFlow 的软件架构主要包括以下几个部分: 用户界面&…

一文看懂ERP、SCM、SRM、WMS、TMS、进销存管理系统

经常有人来私信问我ERP、SCM、SRM、WMS、TMS、进销存管理系统等等,它们听起来都很专业,但到底各自是什么?承担着怎样的角色呢?它们具体都有哪些功能?相互之间又存在怎样的关联,对企业而言又意味着什么呢&am…

深度学习——优化算法、激活函数、归一化、正则化

文章目录 🌺深度学习面试八股汇总🌺优化算法方法梯度下降 (Gradient Descent, GD)动量法 (Momentum)AdaGrad (Adaptive Gradient Algorithm)RMSProp (Root Mean Square Propagation)Adam (Adaptive Moment Estimation)AdamW 优化算法总结 经验和实践建议…

YOLOv11实战宠物狗分类

本文采用YOLOv11作为核心算法框架,结合PyQt5构建用户界面,使用Python3进行开发。YOLOv11以其高效的特征提取能力,在多个图像分类任务中展现出卓越性能。本研究针对5种宠物狗数据集进行训练和优化,该数据集包含丰富的宠物狗图像样本…

星期-时间范围选择器 滑动选择时间 最小粒度 vue3

星期-时间范围选择器 功能介绍属性说明事件说明实现代码使用范例 根据业务需要,实现了一个可选择时间范围的周视图。用户可以通过鼠标拖动来选择时间段,并且可以通过快速选择组件来快速选择特定的时间范围。 如图: 功能介绍 时间范围选择&…

云岚到家 秒杀抢购

目录 秒杀抢购业务特点 常用技术方案 抢券 抢券界面 进行抢券 我的优惠券列表 活动查询 系统设计 活动查询分析 活动查询界面显示了哪些数据? 面向高并发如何提高活动查询性能? 如何保证缓存一致性? 数据流 Redis数据结构设计 如…

JavaWeb常见注解

1.Controller 在 JavaWeb 开发中,Controller是 Spring 框架中的一个注解,主要用于定义控制器类(Controller),是 Spring MVC 模式的核心组件之一。它表示该类是一个 Spring MVC 控制器,用来处理 HTTP 请求并…