Vue3 -- 项目配置之eslint【企业级项目配置保姆级教程1】
下面是项目级完整配置1➡eslint:【吐血分享,博主踩过的坑你跳过去!!跳不过去?太过分了给博主打钱】
浏览器自动打开项目:
你想释放双手吗?你想每天早上打开电脑运行完项目自动在浏览器打开吗?不要9998,不要998,只要你在我们爱的 package.json
中配置一下即可显示。如下图所示:
是的没错,只需添加 "dev": "vite --open",
包你美梦成真。
配置eslint:
是谁以前在vue.config.js里面偷偷的添加lintOnSave: false
关闭eslint检查逃过n节 ,是你吗我的先生女士们。。是我!(扭曲)(爬行)(尖叫)因为eslint太烦了!!
但是eslint可以帮助我们检查js语法及少部分格式问题。 自从和我的同事(他有代码洁癖)一起工作之后,我发现我被迫改了很多…非常感谢你,和我一起实习的同事,因为有你,代码更规范~~~
eslint官网直达路线
安装eslint:
安装最新版本的eslint:
pnpm i eslint -D
告诉eslint,你要怎么工作:
npx eslint --init
我们用eslint 检查语法、发现错误,如下图选择:
我们的项目采用的js模块 的模块式开发,如下图:
框架选取vue,如下图:
是否使用ts?是的。如下图:
项目运行在浏览器还是node上,我们选择浏览器。如下图:
使用eslint去校验我们的vue、ts语法,需要安装它提示的三个插件,是否选择安装呢?是的。如下图:
使用什么包管理工具下载呢?我这里使用的是pnpm,根据自己选择哈。如下图:
安装成功如下图(安装成功会自动生成eslint.config.js):
安装其他版本的eslint:
but 我这次需要安装v8.x的 避免我的一些版本冲突问题哈,根据自己的需求选择。
pnpm install eslint@8.57.1 --save-dev
安装插件指令供配置:
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node @babel/eslint-parser
在根目录下创建 .eslintrc.cjs
文件,并配置它:
// @see: http://eslint.cnmodule.exports = {root: true,env: {browser: true,node: true,es6: true},// 指定如何解析语法parser: "vue-eslint-parser",// 优先级低于 parse 的语法解析配置parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: 2020,sourceType: "module",jsxPragma: "React",ecmaFeatures: {jsx: true}},// 继承某些已有的规则extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],/*** "off" 或 0 ==> 关闭规则* "warn" 或 1 ==> 打开的规则作为警告(不影响代码执行)* "error" 或 2 ==> 规则作为一个错误(代码不能执行,界面报错)*/rules: {// eslint (http://eslint.cn/docs/rules)"no-var": "error", // 要求使用 let 或 const 而不是 var"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行"prefer-const": "off", // 使用 let 关键字声明但在初始分配后从未重新分配的变量,要求使用 const"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们// typeScript (https://typescript-eslint.io/rules)"@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量"@typescript-eslint/no-empty-function": "error", // 禁止空函数"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore"@typescript-eslint/ban-ts-comment": "error", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述"@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长"@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型"@typescript-eslint/ban-types": "off", // 禁止使用特定类型"@typescript-eslint/no-var-requires": "off", // 允许使用 require() 函数导入模块"@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)"@typescript-eslint/no-require-imports": "off",// vue (https://eslint.vuejs.org/rules)"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用,此规则仅在启用该 no-unused-vars 规则时有效"vue/v-slot-style": "error", // 强制执行 v-slot 指令样式"vue/no-mutating-props": "error", // 不允许改变组件 prop"vue/custom-event-name-casing": "error", // 为自定义事件名称强制使用特定大小写"vue/html-closing-bracket-newline": "error", // 在标签的右括号之前要求或禁止换行"vue/attribute-hyphenation": "error", // 对模板中的自定义组件强制执行属性命名样式:my-prop="prop""vue/attributes-order": "off", // vue api使用顺序,强制执行属性顺序"vue/no-v-html": "off", // 禁止使用 v-html"vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时,必须提供默认值"vue/multi-word-component-names": "off", // 要求组件名称始终为 “-” 链接的单词"vue/no-setup-props-destructure": "off" // 禁止解构 props 传递给 setup}
};
根目录创建.eslintignore文件:
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
/src/mock/*
stats.html
在package.json文件中添加如下代码:
"lint": "eslint src",
"fix": "eslint src --fix",
测试一下eslint的效果:
fine!
自动修补了,有点意思啊eslint你小子
so,在运行前甚至都可以先 pnpm run lint --fix
了 (★ ω ★)
相关文章:

Vue3 -- 项目配置之eslint【企业级项目配置保姆级教程1】
下面是项目级完整配置1➡eslint:【吐血分享,博主踩过的坑你跳过去!!跳不过去?太过分了给博主打钱】 浏览器自动打开项目: 你想释放双手吗?你想每天早上打开电脑运行完项目自动在浏览器打开吗&a…...

鸿蒙开发应用权限管理
简介 一种允许应用访问系统资源(如:通讯录等)和系统能力(如:访问摄像头、麦克风等)的通用权限访问方式,来保护系统数据(包括用户个人数据)或功能,避免它们被…...

【数据库】如何保证数据库迁移过程中数据的一致性?
在数据库迁移过程中,保证数据的一致性是非常重要的,尤其是在涉及到多个表、多个数据库或分布式系统的情况下。以下是一些确保数据一致性的最佳实践和方法: 1. 备份数据 在开始迁移之前,进行全面的数据备份是确保数据一致性的第…...

C++之内存管理
🌹个人主页🌹:喜欢草莓熊的bear 🌹专栏🌹:C入门 目录 前言 一、C/C内存分配 二、 malloc、calloc、realloc、free 三、C内存管理方式 3.1 new/delete 操作内置类型 3.2 new和detele操作自定义类型…...

ISP是什么?
isp全称为Internet Service Provider,即互联网服务提供商,是一种向用户提供互联网接入服务的公司或组织,它们提供的服务包括互联网接入、域名注册、网站托管等等。 ISP的应用场景非常广泛,几乎所有的互联网用户都需要通过ISP来接…...

机房动环境监控用各种列表已经淘汰了,现在都是可视化图表展示了
在信息技术飞速发展的今天,机房作为数据存储、处理和传输的核心场所,其稳定运行至关重要。过去,机房动环境监控主要依赖各种列表形式来呈现数据,但如今,这种方式已经逐渐被淘汰,取而代之的是更加直观、高效…...

RHCE的练习(12)
写一个脚本,完成以下要求: 给定一个用户: 如果其UID为0,就显示此为管理员;否则,就显示其为普通用户; #!/bin/bash # 使用read命令获取用户名 read -p "请输入用户名: " username …...

uniapp自动注册机制:easycom
传统 Vue 项目中,我们需要注册、导入组件之后才能使用组件。 uniapp 框架提供了一种组件自动注册机制,只要你在 components 文件夹下新建的组件满足 /components/组件名/组件名.vue 的命名规范,就能直接使用。 注意:组件的文件夹…...

【论文阅读】(Security) Assertions by Large Language Models
论文笔记:(Security) Assertions by Large Language Models 来源:IEEE TRANSACTIONS ON INFORMATION FORENSICS AND SECURITY I. 引言 计算机系统的安全性通常依赖于硬件的根信任。硬件漏洞可能对系统造成严重影响,因此需要支持安全验证的技术。断言验证是一种流行的验证…...

C++ 编程基础(5)类与对象 | 5.8、面向对象五大原则
文章目录 一、面向对象五大原则1、单一功能(Single Responsibility Principle, SRP)2、开放封闭原则(Open/Closed Principle, OCP)3、里氏替换原则(Liskov Substitution Principle, LSP)4、接口隔离原则&am…...

node.js中express的基本了解
定义 Express是基于Node.js平台,快速、开放、极简的Web开发框架。 本质 Express是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法。 作用 与Node.js内置的http模块类似,Express也是专门用来创建Web服务器的,但它极大地简…...

AI大模型(一):Prompt AI编程
一、Prompt Engineering,提示工程 提示工程也叫指令工程: Prompt是发给大模型的指令,比如【讲个睡前故事】、【用Python写个消消乐游戏】等;本质上大模型相关的工程工作,都是围绕prompt展开的;提示工程门…...

ArcGIS Pro属性表乱码与字段名3个汉字解决方案大总结
01 背景 我们之前在使用ArcGIS出现导出Excel中文乱码及shp添加字段3个字被截断的情况,我们有以下应对策略: 推荐阅读:ArcGIS导出Excel中文乱码及shp添加字段3个字被截断? 那如果我们使用ArGIS Pro出现上述问题,该如何…...

小程序-基于java+SpringBoot+Vue的驾校预约平台设计与实现
项目运行 1.运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境:Tomcat 7.x,8.x,9.x版本均可 4.硬件环境:…...

计算机网络网关简介
网关,在计算机网络中扮演着至关重要的角色,它如同不同语言间的翻译官,让不同网络协议、不同体系结构的网络能够相互通信。简而言之,网关就是一个网络连接到另一个网络的“关口”,负责数据的接收、转换与发送。 在局域…...

如何用python将pdf转换为json格式
使用 Python 将 PDF 文件转换为 JSON 格式,主要步骤如下: 读取 PDF 内容:首先使用一个库读取 PDF 文件内容,如 PyMuPDF 或 pdfplumber。这些库可以逐页提取文本,并返回结构化的数据。 组织数据到 JSON:将提…...

STL关联式容器介绍
在前文中介绍了STL的序列式容器; STL序列式容器之vector-CSDN博客 STL序列式容器之list-CSDN博客 STL序列式容器之deque-CSDN博客 STL序列式容器之stack-CSDN博客 STL序列式容器之queue-CSDN博客 STL序列式容器之heap(堆)-CSDN博客 ST…...

java计算机毕业设计选题参考3000篇
基于微信小程序的springboot高校餐厅食品留样管理系统 springboot vue大学生创新创业训练项目管理系统 Springboot的疫情网课管理系统 基于微信小程序的计算机实验室排课与查询系统ssm后端 基于ssm后端的学生购电电费管理微信小程序weixin356 ssm机场网上订票系统 基于ssmvue的…...

JWT介绍、测试案例 以及实际开发中的使用
什么是JWT? JWT,通过数字签名的方式,以json对象为载体,在不同的服务终端之间安全的传输信息,用来解决传统session的弊端。 JWT在前后端分离系统,通过JSON形式作为WEB应用中的令牌(token),用于…...

快排和归并
目录 前言 快速排序 相遇位置一定比key小的原理(大): 避免效率降低方法(快排优化) 三数取中(选key优化) 小区间优化 hoare版本快排 挖坑法快排 前后指针快排 非递归快排 归并排序 非递…...

VUE+SPRINGBOOT实现邮箱注册、重置密码、登录功能
随着互联网的发展,网站用户的管理、触达、消息通知成为一个网站设计是否合理的重要标志。目前主流互联网公司都支持手机验证码注册、登录。但是手机短信作为服务端网站是需要付出运营商通信成本的,而邮箱的注册、登录、重置密码,无疑成为了这…...

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件
Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件 问题背景 今天在导报项目的时候遇到一个问题问题:在开发环境中一切正常,但在打包后的生产环境中,某些环境变量(如 VUE_APP_B…...

创建vue+electron项目流程
一个vue3和electron最基本的环境搭建步骤如下:// 安装 vite vue3 vite-plugin-vue-setup-extend less normalize.css mitt pinia vue-router npm create vuelatest npm i vite-plugin-vue-setup-extend -D npm i less -D npm i normalize.css -S ࿰…...

3. 用Ruby on Rails创建一个在线商城
哎呀,你这是想要我写一篇超长篇的Ruby on Rails教程啊!好吧,既然你这么热情,那我就勉为其难地给你来一篇生动有趣、充满比喻夸张讽刺修辞手法的教程吧! 1. 准备工作 1.1. 安装Ruby和Rails 1.1.1 安装Ruby 下载Ruby…...

jmeter常用配置元件介绍总结之配置元件
系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之线程组 4.jmeter常用配置元件介绍总结之函数助手 5.jmeter常用配置元件介绍总结之取样器 6.jmeter常用配置元件介绍总结之jsr223执行pytho…...

SpringBoot获取请求参数
spring boot获取请求参数 文章目录 spring boot获取请求参数一、简单参数二、实体参数三、数组集合参数四、日期参数五、Json参数六、路径参数 开头概述 在Spring Boot框架中,处理HTTP请求并获取请求参数是开发Web应用程序中的一项基本任务。无论是简单的GET请求还是…...

【数据结构】树——顺序存储二叉树
写在前面 在学习数据结构前,我们早就听说大名鼎鼎的树,例如什么什么手撕红黑树大佬呀,那这篇笔记不才就深入浅出的介绍二叉树。 文章目录 写在前面一、树的概念及结构1.1、数的相关概念1.2、数的表示1.3 树在实际中的运用(表示文…...

Android中perform和handle方法的区别——以handleLaunchActivity与performLaunchActivity为例
在Android系统中,perform和handle方法经常出现在关键流程中,分别承担不同的职责。这种命名约定反映了框架设计中的分层思想,帮助开发者区分任务的调度与实现。本文通过handleLaunchActivity和performLaunchActivity这两个典型方法的源码分析&…...

聊聊依赖性测试
在软件测试中,我们常常面临一个挑战:多个模块之间高度耦合,任何一个模块的异常都可能导致整个系统崩溃。如何确保这些模块之间的协作无缝衔接?这就需要依赖性测试的助力! 什么是依赖性测试?它与功能测试、…...

C++11————线程库
thread 类的简单介绍 在 c11 之前,涉及到多线程问题,都是和平台相关的,比如 windows 和 linux 下各自有自己的接口,这使得代码的可移植性比较差。在 c11 中引入了线程库,使得 c在编程时不需要依赖第三方库了 函数名 …...