VUE3项目学习系列--项目配置(二)

        在项目团队开发过程中,多人协同开发为保证项目格式书写格式统一标准化,因此需要进行代码格式化校验,包括在代码编写过程中以及代码提交前进行自动格式化,因此需要进行在项目中进行相关的配置使之代码格式一致。 

一、eslint配置

eslint是提供一个插件化的javascript代码检测工具。

安装eslint

pnpm i eslint -D

生成配置文件,执行如下命令后自动生成对应的配置文件:eslint.cjs

 nps eslint --init

执行命令后根据提示选择如下配置完成文件生成 

添加eslint校验规则

module.exports = {// 环境配置"env": {"browser": true,//浏览器运行"es2021": true},// 规则继承"extends": [// 全部规则默认是关闭的,该配置会开启推荐规则,按照文档进行配置"eslint:recommended","plugin:@typescript-eslint/recommended","plugin:vue/vue3-essential"],"overrides": [{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],"parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["@typescript-eslint","vue"],// eslint 规则"rules": {'no-var': 'error',  // 禁止var'no-multiple-empty-lines': ['warn', {max: 1}], // 不允许多个空行'no-useless-escape': 'off', // 关闭禁止不必要的转义字符// typeScript'@typescript-eslint/no-unused-vars': 'error','@typescript-eslint/no-explicit-any': 'off',// eslint-plugin-vue'vue/multi-word-component-names': 'off',  // 关闭名称只能-连接'vue/no-mutating-props': 'off',  // 关闭组件prop不能改变'vue/attribute-hyphenation': 'off', // 关闭对模板中自定义组件强制执行属性命名样式}
}

添加忽略校验文件配置,创建文件:.eslintignore 

dist
node_modeules

添加运行脚本

在package.json 中新增运行脚本

  "scripts": {"lint": "eslint src","fix": "eslint src --fix"},

 二、配置prettier

eslint是针对javascript进行语法检测,保证程序的准确运行,preitter是对代码格式进行统一格式化的工具,保证项目格式一致美观;

1、安装依赖包

 pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier

2、添加.preitterc.json文件

{"singleQuote": true,"semi": false,"bracketSpacing": true,"htmlWhitespaceSensitivity": "ignore","endOfLine": "auto","trailingComma": "all","tabWidth": 2}

3、添加.prettierignore文件

/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*

当代码不规范时执行如下就会提示错误:

 三、配置stylelintrc.cjs

1、安装依赖

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-cnfig-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

2、配置.stylelintignore文件

/node_modules/*
/dist/*
/html/*
/public/*

3、配置.stylelintrc.cjs文件

// @see https://stylelint.bootcss.com/module.exports = {extends: ['stylelint-config-standard', // 配置stylelint拓展插件'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化'stylelint-config-standard-scss', // 配置stylelint scss插件'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,'stylelint-config-prettier', // 配置stylelint和prettier兼容],overrides: [{files: ['**/*.(scss|css|vue|html)'],customSyntax: 'postcss-scss',},{files: ['**/*.(html|vue)'],customSyntax: 'postcss-html',},],ignoreFiles: ['**/*.js','**/*.jsx','**/*.tsx','**/*.ts','**/*.json','**/*.md','**/*.yaml',],/*** null  => 关闭该规则* always => 必须*/rules: {'value-keyword-case': null, // 在 css 中使用 v-bind,不报错'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"'no-empty-source': null, // 关闭禁止空源码'selector-class-pattern': null, // 关闭强制选择器类名的格式'property-no-unknown': null, // 禁止未知的属性(true 为不允许)'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask'selector-pseudo-class-no-unknown': [// 不允许未知的选择器true,{ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略属性,修改element默认样式的时候能使用到},],},
}

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

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

相关文章

【世界首富宝座易主】贝佐斯超越马斯克,再登世界首富宝座

贝佐斯超越马斯克,再登世界首富宝座 杰佛瑞普雷斯顿「杰夫」贝佐斯(英语:Jeffrey Preston1964年1月12日),生于美国新墨西哥州,美国网际网路巨头亚马逊公司创始人及现任董事长,《华盛顿邮报》大股…

哈希的简单介绍

unordered系列关联式容器 在C98中,STL提供了底层为红黑树结构的一系列关联式容器,在查询时效率可达到 l o g 2 N log_2 N log2​N,即最差情况下需要比较红黑树的高度次,当树中的节点非常多时,查询效率也不理想。最好的…

一本书讲透ChatGPT——理论与实践的完美结合,大模型技术工程师的必备指南

写在前面 OpenAI 在 2022 年 11 月推出了人工智能聊天应用—ChatGPT。它具有广泛的应用场景,在多项专业和学术基准测试中表现出的智力水平,不仅接近甚至有时超越了人类的平均水平。这使得 ChatGPT 在推出之初就受到广大用户的欢迎,被科技界誉…

如何使用反射操作类和对象?

什么是反射? 反射(Reflection)是Java编程语言中的一种强大的特性,允许程序在运行时检查和操作对象、类、方法等程序元素的信息。通过反射,程序可以在运行时获取类的信息、调用对象的方法、操作类的属性等,…

Vue3学习记录(三)--- 组合式API之生命周期和模板引用

一、生命周期 1、简介 ​ 生命周期,指的是一个 Vue 实例从创建到销毁的完整阶段,强调的是一个时间段。 ​ 生命周期钩子函数,指的是 Vue 实例提供的内置函数,函数的参数为一个回调函数。这些钩子函数会在实例生命周期的某些固定…

拜占庭将军问题与区块链

文章目录 拜占庭将军问题问题背景问题的现实意义将军-副官模型三将军问题四将军问题3m将军问题 口头消息算法基本假设方法介绍正确性证明 签名消息算法 区块链区块链是什么区块链对于拜占庭将军问题的解决方法工作量证明奖励机制最长链原则小结 区块链的意义 总结 拜占庭将军问…

Tomcat 漏洞处理

1.目录遍历 要求不允许通过网址访问 Tomcat 的 example ,manager 等自带目录,我选择了最直接的办法,删除 Tomcat 中 webapps 目录下除了项目外的其它所有文件夹。 2.Tomcat AJP 修改 Tomcat 配置文件 /root/apache-tomcat-7.0.109/conf/se…

总结:前后端集合、数组类型数据交互底层原理,SpringBoot框架解析

总结:前后端集合、数组类型数据交互底层原理,SpringBoot框架解析 一前后端信息交互本质:1.两台电脑可以通过收发电磁波、控制网线电路开关等基础物理设施,就可以进行物理层面的电信号交互,电信号又可以通过各种传感设备…

机器学习是什么?如何从入门到精通?

机器学习(Machine Learning)是一种从数据中自动学习模式和规律,并用于做出预测和决策的领域。它利用统计学、数学和计算机科学的方法,让计算机从大量数据中学习并不断优化模型,以实现自动化的决策和预测。 要从入门到…

在Linux中使用docker【中】(常见命令上)

在Linux中使用docker【中】(常见命令上) 一、Docker介绍二、在Linux中使用Docker的意义2.1 轻量级与资源高效2.2 快速部署与版本控制2.3 隔离与安全2.4 简化运维2.5 跨平台兼容2.6 持续集成与持续部署(CI/CD) 三、Docker的安装3.1…

win系统如何同时安装MySQL5和MySQL8

win系统如何同时安装MySQL5和MySQL8 文章目录 win系统如何同时安装MySQL5和MySQL81、准备好两种版本的数据库2、下载后解压到你指定的目录3、手动配置安装MySQL5和8安装MySQL53.1创建my.ini文件3.2生成data文件夹 安装MySQL83.1创建my.ini文件3.2生成data文件夹 4、配置环境变量…

汽车车灯照明灯具维修的常见误区有哪些呢?

汽车车灯照明灯具维修的常见误区有哪些呢? 汽车灯具维修的常见误区包括以下几个方面: 忽视车灯的日常保养:许多车主在日常使用中忽视了车灯的保养,只有当车灯出现故障时才进行维修。然而,定期检查和保养车灯是预防故障发生的重要…

蓝牙耳机什么牌子好?五款优质蓝牙耳机无广推荐!

​许多人向我询问关于蓝牙耳机的推荐,以及如何选购蓝牙耳机,有哪些性价比高的蓝牙耳机等问题。我已经从网络上搜集并比较了几十款耳机,现在我将分享一些我认为不错的蓝牙耳机。无论是在音质还是配置方面,这些耳机都是非常不错的。…

关于vue创建项目以及关于eslint报错的问题

vue创建完项目以后如果报parsing error no babel config file。。。这样的错误的话,关闭项目,用vscode进入项目中打开项目就可以解决了。 1 代码保存的时候会自动将单引号报错为双引号 导致eslint报错的问题, 解决思路: 在项目根…

启英泰伦「离线自然说」:让照明语音交互更自然、更便捷

随着科技的不断发展,智能家居已经成为现代生活的一部分。其中,智能照明作为智能家居的重要组成部分,为人们带来了更加便捷、舒适的照明体验。然而,传统的离线语音交互技术在智能照明领域的应用一直受到词条存储量的限制&#xff0…

有个朋友被骗了,大家要擦亮眼睛

1.引言 大家好,我是Leo哥🫣🫣🫣,昨天凌晨有个粉丝朋友找到Leo哥,咨询一些问题,现在的朋友们真卷呐,大半夜还在挑灯夜战。可无奈Leo哥12点之前已经睡了,身体为重&#xf…

智慧公厕:改变城市公共卫生管理的未来

现代城市发展快速,人口不断增加,公共卫生管理面临着严峻的挑战。传统公厕的建设、管理和使用模式已经无法满足日益提高的卫生与环保需求。然而,随着科技的进步与智能化的发展,智慧公厕正成为一种全新的解决方案,为城市…

R语言简介,R语言开发环境搭建步骤,R基础语法以及注释详解

R语言是一种用于统计计算与绘图的编程语言,由新西兰奥克兰大学的统计学家罗斯伊哈卡和罗伯特杰特曼于1993年发明。R语言是一种自由、免费、源代码开放的软件,属于GNU系统的一个分支,如今被广泛地应用于统计分析、数据挖掘等领域。 R语言的特…

数据库设计革命:逻辑模型的演变与面向对象的突破

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua,在这里我会分享我的知识和经验。&#x…

demo破坏升级

如果我们刚才所解释的dom破坏形式不再是单纯的x一层结构,而是x,y这种形式,两层结构,我们该怎么办 举个例子吧 我们的想法是先取x再取y,想法很简单,现实很苦感,看看结果吧 取出来的是undefined…