vue3 项目的最新eslint9 + prettier 配置

注意:eslint目前升级到9版本了

在 ESLint v9 中,配置文件已经从 .eslintrc 迁移到了 eslint.config.js

配置的方式和之前的方式不太一样了!!!!

详见自己的语雀文档:5、新版eslint9+prettier 配置


eslint.config.js

import { defineConfig } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import Prettier from 'eslint-plugin-prettier/recommended'
import ts from '@typescript-eslint/eslint-plugin'
import tsParser from '@typescript-eslint/parser'export default defineConfig([{ files: ['**/*.{js,mjs,ts,vue}'] },{files: ['**/*.{js,mjs,ts,vue}'],languageOptions: { globals: globals.browser }},{files: ['**/*.{js,mjs,ts,vue}'],plugins: { js },extends: ['js/recommended']},tseslint.configs.recommended,pluginVue.configs['flat/essential'],{files: ['**/*.vue'],languageOptions: { parserOptions: { parser: tseslint.parser } }},{files: ['**/*.ts', '**/*.tsx'], // 针对 TypeScript 文件languageOptions: {parser: tsParser // 使用 TypeScript 解析器},plugins: {'@typescript-eslint': ts // 启用 @typescript-eslint 插件},rules: {'@typescript-eslint/no-explicit-any': 'off' // 关闭 any 类型的检查}},Prettier //注意必须放最后,不然eslint的默认配置会给prettier的规则覆盖掉
])

 .prettierrc.cjs

module.exports = {printWidth: 120, // 每行代码长度(默认80)tabWidth: 2, // 每个tab相当于多少个空格(默认2)useTabs: false, // 是否使用tab进行缩进(默认false)singleQuote: true, // 使用单引号(默认false)semi: false, // 声明结尾使用分号(默认true)trailingComma: 'none', // 多行使用拖尾逗号(默认none)bracketSpacing: true, // 对象字面量的大括号间使用空格(默认true)jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾,而不是另起一行(默认false)arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号(默认avoid)proseWrap: 'preserve', // 编辑器自动换行endOfLine: 'auto' // 换行符
}

 这个时候我准备再配置一下css的代码格式化规范,安装Stylelint 

如果你希望将 Stylelint 集成到 ESLint 的工作流中,可以使用 eslint-plugin-stylelint 插件。这样,你可以在运行 ESLint 时同时检查 CSS 文件。

 原因:eslint-plugin-stylelint 目前只支持 ESLint v8,而我的项目使用的是 ESLint v9,因此出现了依赖冲突。

注意:如果不集成在eselint,eslint-plugin-stylelint 目前只支持 ESLint v8,而你的项目使用的是 ESLint v9,

解决方案:单独运行 Stylelint,而不通过 ESLint 集成或者使用prettier格式化等等。。。我没试过,后来没有配置css文件的代码格式化了。。。。。不管了

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

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

相关文章

基于FPGA的16QAM+帧同步系统verilog开发,包含testbench,高斯信道,误码统计,可设置SNR

目录 1.算法仿真效果 2.算法涉及理论知识概要 2.1 16QAM调制解调原理 2.2 帧同步 3.Verilog核心程序 4.完整算法代码文件获得 1.算法仿真效果 vivado2019.2仿真结果如下(完整代码运行后无水印): 设置SNR12db 将FPGA数据导入到MATLAB显…

[学成在线]06-视频分片上传

上传视频 需求分析 教学机构人员进入媒资管理列表查询自己上传的媒资文件。 点击“媒资管理” 进入媒资管理列表页面查询本机构上传的媒资文件。 教育机构用户在"媒资管理"页面中点击 "上传视频" 按钮。 点击“上传视频”打开上传页面 选择要上传的文件…

Maven安装与环境配置

首先我们先介绍一些关于Maven的知识,如果着急直接看下面的安装教程。 目录 Maven介绍 Maven模型 Maven仓库 Maven安装 下载 安装步骤 Maven介绍 Apache Maven是一个项目管理和构建工具,它基于项目对象模型(Project Object Model , 简称: POM)的概念…

【新能源汽车温度采集与控制系统设计深度解析】

面向汽车行业研发与测试测量设备从业者的技术指南 一、硬件架构设计 新能源汽车的温度采集与控制系统是保障电池、电机、电控等核心部件安全运行的核心技术之一。其硬件架构需兼顾高精度、抗干扰、可靠性与集成化,以下从信号调理电路、ADC模块、隔离设计三个维度展…

AI Tokenization

AI Tokenization 人工智能分词初步了解 类似现在这个,一格子 一格子,拼接出来的,一行或者一句,像不像,我们人类思考的时候组装出来的话,并用嘴说出来了呢。

React(四)setState原理-性能优化-ref

setState详解 实现原理 开发中我们并不能直接修改State来重新渲染界面: 因为修改State之后,希望React根据最新的State来重新渲染界面,但这种方式的修改React并不知道数据发生了变化; React并没有类似于Vue2中的Object.defineP…

SSH密钥认证 + 文件系统权限控制 + Git仓库配置+封存与解封GIT仓库

在本地服务器上实现多个用户仅通过git push操作修改仓库、禁止其他改写方式的需求,可以通过以下步骤实现: 方法概述 通过SSH密钥认证 文件系统权限控制 Git仓库配置,确保用户仅能通过git push命令提交修改,而无法通过直接操作服…

全文通读:126页华为IPD集成产品开发与DFX实战【文末附可编辑PPT下载链接】

绑定资料内容: 12023华为流程体系及落地实施【108页 PPT】.pptx22024版基于华为IPD与质量管理体系融合的研发质量管理【63页】.pptx

//TODO 动态代理的本质?

待解决 //TODO 面试题 为啥mybatis的mapper只有接口没有实现类,但它却能工作??(ai参考,待深究源码) 1. 动态代理生成代理对象 MyBatis 使用 JDK 动态代理 为每个 Mapper 接口生成代理对象: • 核心类:MapperProxy(…

C++11中智能指针的使用(shared_ptr、unique_ptr、weak_ptr)

C11中智能指针的使用(shared_ptr、unique_ptr、weak_ptr) 一、shared_ptr原理 shared_ptr 是另一种智能指针,用于实现多个 shared_ptr 实例共享同一个对象的所有权。它通过内部的控制块(通常是一个包含计数器和指向对象的指针的结构)来管理…

2024年认证杯SPSSPRO杯数学建模B题(第二阶段)神经外科手术的定位与导航全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 B题 神经外科手术的定位与导航 原题再现: 人的大脑结构非常复杂,内部交织密布着神经和血管,所以在大脑内做手术具有非常高的精细和复杂程度。例如神经外科的肿瘤切除手术或血肿清除手术,通常需要…

尝试在软考62天前开始成为软件设计师-信息系统安全

安全属性 保密性:最小授权原则(能干活的最小权限)、防暴露(隐藏)、信息加密、物理保密完整性(防篡改):安全协议、校验码、密码校验、数字签名、公证 可用性:综合保障( IP过滤、业务流控制、路由选择控制、审计跟踪)不可抵赖性:数字签名 对称加密 DES :替换移位 3重DESAESR…

Rocky9.5基于sealos快速部署k8s集群

首先需要下载 Sealos 命令行工具,sealos 是一个简单的 Golang 二进制文件,可以安装在大多数 Linux 操作系统中。 以下是一些基本的安装要求: 每个集群节点应该有不同的主机名。主机名不要带下划线。 所有节点的时间需要同步。 需要在 K8s …

G口服务器和普通服务器之间的区别

今天小编主要来为大家介绍一下G口服务器和普通服务器之间的区别! 首先,从硬件配置上看,普通服务器通常都会配备中央处理器、内存和硬盘等基本的硬件配置,能够适用于各种应用程序和服务;G口服务器除了基础的硬件配置还增…

Cursor软件如何刷新机器码流程

一.退出Cursor软件账号 打开Cursor软件,点击设置-->General-->Account-->Log out,现将Cursor软件上登录的账户退出。 二.将Cursor官网上登录的Cursor账户也清空掉 点击头像--> ACCOUNT SETTINGS -->Account-->Advanced-->Delete Account-->…

类与对象(中)(详解)

【本节目标】 1. 类的6个默认成员函数 2. 构造函数 3. 析构函数 4. 拷贝构造函数 5. 赋值运算符重载 6. const成员函数 7. 取地址及const取地址操作符重载 1.类的6个默认成员函数 如果一个类中什么成员都没有,简称为空类。 空类中真的什么都没有吗&…

开发语言漫谈-groovy

groovy是一门脚本语言,在前期的脚本语言中简单介绍了下。现在再深入介绍下,因为它是本平台上选用的脚本语言。所谓脚本语言就是不用编译,直接执行。这种特色非常适合做嵌入编程,即编即用。我们知道平台后台的业务开发语言是Java&a…

React+Ant Design的Layout布局实现暗黑模式切换

目录 效果预览完整代码我遇到的BUG问题代码BUG1:暗黑模式下内容区不变成深色BUG2:光亮模式下的左右区域是深色 补充知识ConfigProvider是什么?Ant Design中的theme如何使用?theme 配置的常见字段主题算法通过 useToken 获取主题 效…

TCP 三次握手与四次挥手过程

TCP 作为一种面向连接的、可靠的传输层协议,其连接管理机制对于保障数据的可靠传输至关重要。 三次握手(建立连接) 三次握手是 TCP 建立连接时所采用的机制,其目的在于确保客户端和服务器双方都具备发送和接收数据的能力&#x…

【线程安全的单例模式和STL是否是线程安全/智能指针是否是线程安全】

文章目录 一、单例模式的特点二、饿汉模式实现单例三、懒汉模式实现单例四、STL线程安全吗?五、智能指针线程安全吗? 一、单例模式的特点 一个类,只应该实例化了一个对象,就是单例。 二、饿汉模式实现单例 举个饿汉模式的例子&…