当前位置: 首页 > news >正文

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&#xff1a;【吐血分享&#xff0c;博主踩过的坑你跳过去&#xff01;&#xff01;跳不过去&#xff1f;太过分了给博主打钱】 浏览器自动打开项目&#xff1a; 你想释放双手吗&#xff1f;你想每天早上打开电脑运行完项目自动在浏览器打开吗&a…...

鸿蒙开发应用权限管理

简介 一种允许应用访问系统资源&#xff08;如&#xff1a;通讯录等&#xff09;和系统能力&#xff08;如&#xff1a;访问摄像头、麦克风等&#xff09;的通用权限访问方式&#xff0c;来保护系统数据&#xff08;包括用户个人数据&#xff09;或功能&#xff0c;避免它们被…...

【数据库】如何保证数据库迁移过程中数据的一致性?

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

C++之内存管理

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

ISP是什么?

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

机房动环境监控用各种列表已经淘汰了,现在都是可视化图表展示了

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

RHCE的练习(12)

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

uniapp自动注册机制:easycom

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

【论文阅读】(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、单一功能&#xff08;Single Responsibility Principle, SRP&#xff09;2、开放封闭原则&#xff08;Open/Closed Principle, OCP&#xff09;3、里氏替换原则&#xff08;Liskov Substitution Principle, LSP&#xff09;4、接口隔离原则&am…...

node.js中express的基本了解

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

AI大模型(一):Prompt AI编程

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

ArcGIS Pro属性表乱码与字段名3个汉字解决方案大总结

01 背景 我们之前在使用ArcGIS出现导出Excel中文乱码及shp添加字段3个字被截断的情况&#xff0c;我们有以下应对策略&#xff1a; 推荐阅读&#xff1a;ArcGIS导出Excel中文乱码及shp添加字段3个字被截断&#xff1f; 那如果我们使用ArGIS Pro出现上述问题&#xff0c;该如何…...

小程序-基于java+SpringBoot+Vue的驾校预约平台设计与实现

项目运行 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境&#xff1a;IDEA&#xff0c;Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境&#xff1a;Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…...

计算机网络网关简介

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

如何用python将pdf转换为json格式

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

STL关联式容器介绍

在前文中介绍了STL的序列式容器&#xff1b; STL序列式容器之vector-CSDN博客 STL序列式容器之list-CSDN博客 STL序列式容器之deque-CSDN博客 STL序列式容器之stack-CSDN博客 STL序列式容器之queue-CSDN博客 STL序列式容器之heap&#xff08;堆&#xff09;-CSDN博客 ST…...

java计算机毕业设计选题参考3000篇

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

JWT介绍、测试案例 以及实际开发中的使用

什么是JWT&#xff1f; JWT&#xff0c;通过数字签名的方式&#xff0c;以json对象为载体&#xff0c;在不同的服务终端之间安全的传输信息&#xff0c;用来解决传统session的弊端。 JWT在前后端分离系统&#xff0c;通过JSON形式作为WEB应用中的令牌(token)&#xff0c;用于…...

快排和归并

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

VUE+SPRINGBOOT实现邮箱注册、重置密码、登录功能

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

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件

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

创建vue+electron项目流程

一个vue3和electron最基本的环境搭建步骤如下&#xff1a;// 安装 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 &#xff0…...

3. 用Ruby on Rails创建一个在线商城

哎呀&#xff0c;你这是想要我写一篇超长篇的Ruby on Rails教程啊&#xff01;好吧&#xff0c;既然你这么热情&#xff0c;那我就勉为其难地给你来一篇生动有趣、充满比喻夸张讽刺修辞手法的教程吧&#xff01; 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框架中&#xff0c;处理HTTP请求并获取请求参数是开发Web应用程序中的一项基本任务。无论是简单的GET请求还是…...

【数据结构】树——顺序存储二叉树

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

Android中perform和handle方法的区别——以handleLaunchActivity与performLaunchActivity为例

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

聊聊依赖性测试

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

C++11————线程库

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