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,一经查实,立即删除!

相关文章

易考八股文之Elasticsearch合集

1、为什么要使用 Elasticsearch? 系统中的数据, 随着业务的发展, 时间的推移, 将会非常多,而业务中往往采用模糊查询进行数据的 搜索,而模糊查询会导致查询引擎放弃索引, 导致系统查询数据时都是全表扫描&…

Python 使用链式赋值

n n_ max(round(n * gd), 1) if n > 1 else n # depth gainPython 使用链式赋值将同一个值同时赋给多个变量。这意味着 n 和 n_ 会同时接收相同的结果值。我们可以将这行代码逐步拆解,以便理解传值的顺序和方法: 逐步解析 先计算右侧表达式的值&a…

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 :服务注册中心…

PowerShell 的执行策略限制了脚本的运行

问题 . : 无法加载文件 C:\Users\pumpkin84514\Documents\WindowsPowerShell\profile.ps1,因为在此系统上禁止运行脚本。有关详细信 息,请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 3 …

计算机网络(3)网络拓扑和IP地址,MAC地址,端口地址详解

ok网络拓扑以及令人困惑的IP地址,MAC地址和端口地址来了!!! 网络拓扑是指计算机网络中各个节点(如计算机、路由器、交换机等)以及它们之间连接的布局或结构。(人话翻译过来也就是网络拓扑是计算…

Git - Think in Git

记录一些使用Git时的一些想法 区的概念 当 clone 仓库代码到本地后四个区相同 当编辑代码后,工作区 与其余三个区不同 当使用 add 将修改的代码暂存后,索引区与 工作区 相同 当使用 commit 将修改的代码提交后,仓库区 与 索引区 和 工作区 相…

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

Database Advantages (数据库系统的优点)

数据库管理系统(DBMS)提供了一种结构化的方式来存储、管理和访问数据,与传统的文件处理系统相比,数据库提供了许多显著的优点。以下是数据库系统的主要优势: 1. Data Integrity (数据完整性) 概念:数据完整…

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

前置条件 技能要求 了解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 用户通常…

JavaScript 观察者设计模式

观察者模式:观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。而js中最常见的观察者模式就是事件触发机制。 ES5/ES6实现观察者模式(自定义事件) - 简书 先搭架子 要有一个对象&#xff…

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

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

IO技术详解

IO监控项在监控中一直是很重要的存在,服务有IO,磁盘有IO,操作系统也有IO,IO到底是什么呢 IO IO,即“输入/输出”(Input/Output),是指计算机系统或设备之间交换数据的过程。这个概念…