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

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文件的代码格式化了。。。。。不管了

相关文章:

vue3 项目的最新eslint9 + prettier 配置

注意:eslint目前升级到9版本了 在 ESLint v9 中,配置文件已经从 .eslintrc 迁移到了 eslint.config.js 配置的方式和之前的方式不太一样了!!!! 详见自己的语雀文档:5、新版eslint9prettier 配…...

SAP GUI Script for C# SAP脚本开发快速指南与默认主题问题

SAP GUI Script for C# 快速指南 SAP 脚本的快速使用与设置. 解决使用SAP脚本执行后,默认打开的SAP是经典主题的问题 1. 解决默认主题问题 如果您使用的是SAP GUI 740,并遇到无法打开对话框的问题,请先将主题设置为经典主题(Classic Theme…...

JAVA泛型的作用

‌1. 类型安全(Type Safety)‌ 在泛型出现之前,集合类(如 ArrayList、HashMap)只能存储 Object 类型元素,导致以下问题: ‌问题‌:从集合中取出元素时,需手动强制类型转…...

Git Flow 分支管理策略

优势 清晰的分支结构:每个分支都有明确的用途,便于团队协作。 稳定的 master 分支:生产环境代码始终稳定。 灵活的发布管理:通过发布分支和热修复分支,可以灵活管理版本发布和紧急修复。 主要分支 master 分支 代表…...

FFmpeg + ‌Qt‌ 简单视频播放器代码

一个基于 ‌FFmpeg 4.x‌ 和 ‌Qt‌ 的简单视频播放器代码示例,实现视频解码和渲染到 Qt 窗口的功能。 1)ffmpeg库界面,视频解码支持软解和硬解方式。 2)QImage/QPixmap显示视频图片。 ‌1. Qt 项目配置(.pro 文件&…...

Unity跨平台构建快速回顾

知识点来源:人间自有韬哥在,豆包 目录 一、发布应用程序1. 修改发布必备设置1.1 打开设置面板1.2 修改公司名、游戏项目名、版本号和默认图标1.3 修改 Package Name 和 Minimum API Level 2. 发布应用程序2.1 配置 Build Settings2.2 选择发布选项2.3 构…...

【嵌入式学习2】内存管理

## C语言编译过程 预处理:宏定义展开、头文件展开、条件编译,这里并不会检查语法,将#include #define这些头文件内容插入到源码中 gcc -E main.c -o main.i 编译:检查语法,将预处理后文件编译生成汇编文件&#xff…...

密码学(Public-Key Cryptography and Discrete Logarithms)

Public-Key Cryptography and Discrete Logarithms Discrete Logarithm 核心概念:离散对数是密码学中一个重要的数学问题,特别是在有限域和循环群中。它基于指数运算在某些群中是单向函数这一特性。也就是说,给定一个群 G G G和一个生成元 …...

TDengine又新增一可视化工具 Perspective

概述 Perspective 是一款开源且强大的数据可视化库,由 Prospective.co 开发,运用 WebAssembly 和 Web Workers 技术,在 Web 应用中实现交互式实时数据分析,能在浏览器端提供高性能可视化能力。借助它,开发者可构建实时…...

【Linux文件IO】Linux中标准IO的API的描述和基本用法

Linux中标准IO的API的描述和基本用法 一、标准IO相关API1、文件的打开和关闭示例代码: 2、文件的读写示例代码:用标准IO(fread、fwrite)实现文件拷贝(任何文件均可拷贝) 3、文件偏移设置示例代码: 4、fgets fputs fget…...

深度学习篇---PaddleDetectionPaddleOCR

文章目录 前言1.代码2.代码介绍2.1 **导入模块**2.2 **配置区域**2.3 ExpressInfoProcessor类2.4 **主程序**: 3.使用说明3.1环境准备3.2模型准备3.3数据库初始化3.4串口配置3.5信息提取优化3.6注意事项 前言 本文简单介绍了PaddleDetection和PaddleOCR相结合的示例…...

Ant Design Vue Select 选择器 全选 功能

Vue.js的组件库Ant Design Vue Select 选择器没有全选功能&#xff0c;如下图所示&#xff1a; 在项目中&#xff0c;我们自己实现了全选和清空功能&#xff0c;如下所示&#xff1a; 代码如下所示&#xff1a; <!--* 参数配置 - 风力发电 - 曲线图 * 猴王软件学院 - 大强 …...

系统与网络安全------网络应用基础(1)

资料整理于网络资料、书本资料、AI&#xff0c;仅供个人学习参考。 TCP/IP协议及配置 概述 TCP/IP协议族 计算机之间进行通信时必须共同遵循的一种通信规定 最广泛使用的通信协议的集合 包括大量Internet应用中的标准协议 支持跨网络架构、跨操作系统平台的数据通信 主机…...

ZIP_STORED和ZIP_LZMA没有compresslevel参数!

在使用py的zipfile库进行压缩的时候&#xff0c;有这么一个函数&#xff1a; def write(self, filename, arcnameNone,compress_typeNone, compresslevelNone): 一般我们在压缩文件进去的时候都是用这个函数的&#xff1b; 对于compresslevel这个函数&#xff0c;它是用来指…...

坦克大战(c++)

今天我给大家分享一个c游戏。 废话不多说&#xff0c;作品展示&#xff1a; #include <stdio.h> #include <windows.h> #include <time.h> //里规格&#xff1a;长39*278 &#xff08;真坐标&#xff09;(假坐标宽为39) 高39 //外规格&#xff1a;长…...

论文阅读:2023 EMNLP SeqXGPT: Sentence-level AI-generated text detection

总目录 大模型安全相关研究:https://blog.csdn.net/WhiffeYF/article/details/142132328 SeqXGPT: Sentence-level AI-generated text detection https://aclanthology.org/2023.emnlp-main.73/ https://github.com/Jihuai-wpy/SeqXGPT https://www.doubao.com/chat/21003…...

JDK 24 发布,新特性解读!

一、版本演进与技术格局新动向 北京时间3月20日&#xff0c;Oracle正式发布Java SE 24。作为继Java 21之后的第三个非LTS版本&#xff0c;其技术革新力度远超预期——共集成24项JEP提案&#xff0c;相当于Java 22&#xff08;12项&#xff09;与Java 23&#xff08;12项&#…...

k8s中service概述(二)NodePort

NodePort 是 Kubernetes 中一种用于对外暴露服务的 Service 类型。它通过在集群的每个节点上开放一个静态端口&#xff08;NodePort&#xff09;&#xff0c;使得外部用户可以通过节点的 IP 地址和该端口访问集群内部的服务。以下是关于 NodePort Service 的详细说明&#xff1…...

Oracle归档配置及检查

配置归档位置到 USE_DB_RECOVERY_FILE_DEST&#xff0c;并设置存储大小 startup mount; !mkdir /db/archivelog ALTER SYSTEM SET db_recovery_file_dest_size100G SCOPEBOTH; ALTER SYSTEM SET db_recovery_file_dest/db/archivelog SCOPEBOTH; ALTER SYSTEM SET log_archive…...

计算机二级:函数基础题

函数基础题 第一题 rinput("请输入半径&#xff1a;") c3.1415926*r*2 print("{:.0f}".format(c))输出&#xff1a; Type Error第二题 a7 b2 print(a%2)输出 1第三题 ab4 def my_ab(ab,xy):abpow(ab,xy)print(ab,end"\n") my_ab(ab,2)prin…...

Python爬虫-爬取AliExpress商品搜索词排名数据

前言 本文是该专栏的第49篇,后面会持续分享python爬虫干货知识,记得关注。 本文,笔者以AliExpress平台为例。基于Python爬虫,通过某个指定的“搜索关键词”,批量获取该“搜索关键词”的商品排名数据。 具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。废…...

AI 时代,我们需要什么样的数据库?

AI 时代&#xff0c;我们需要什么样的数据库&#xff1f; 人工智能正在悄然改变软件开发的方式。过去一年间&#xff0c;诸如 GitHub Spark、Replit 和 Bolt 等新兴 AI 工具层出不穷&#xff0c;能够快速生成简单的前端应用&#xff0c;甚至无需传统意义上的后端服务就能部署上…...

刷机维修进阶教程-----adb禁用错了系统app导致无法开机 如何保数据无损恢复机型

在刷机维修过程中 。我们会遇到一些由于客户使用adb指令来禁用手机app而导致手机无法开机进入系统的故障机型。通常此类问题机型有好几种解决方法。但如果客户需要保数据来恢复机型。其实操作也是很简单的.还有类似误删除应用导致不开机等等如何保数据。 通过博文了解💝💝�…...

Vue3 实战:基于 mxGraph 与 WebSocket 的动态流程图构建

本文将详细介绍如何在 Vue3 项目中集成 mxGraph 可视化库&#xff0c;并通过 WebSocket 实现画布元素的实时更新。适合有 Vue 基础的前端开发者学习参考。 一、技术栈准备 Vue3&#xff1a;采用 Composition API 开发mxGraph&#xff1a;JavaScript 流程图库&#xff08;版本 …...

Ubuntu AX200 iwlwifi-cc-46.3cfab8da.0.tgz无法下载的解决办法

文章目录 前言一、检查网卡是否被识别二、确认内核模块是否可用1.AX200 wifi 要求内核5.12.检查 iwlwifi.ko 是否存在&#xff1a;3.如果未找到&#xff0c;可能是内核模块未正确生成。尝试安装 linux-modules-extra&#xff1a;4.再次检查 iwlwifi.ko 是否存在&#xff1a;5.确…...

蓝桥杯,利用 Vue.js 构建简易任务管理器

在日常开发中&#xff0c;我们经常需要处理各种任务和计划。一个简单且高效的任务管理器可以帮助我们更好地组织和安排时间。今天&#xff0c;我将向大家展示如何使用 Vue.js 构建一个简易的任务管理器。这个项目不仅能够帮助我们更好地理解 Vue.js 的基本语法和功能&#xff0…...

国际机构Gartner发布2025年网络安全趋势

转自&#xff1a;中国新闻网 中新网北京3月14日电 国际机构高德纳(Gartner)14日发布的消息称&#xff0c;网络安全和风险管理在2025年“面临挑战与机遇并存的局面”&#xff0c;“实现转型和提高弹性”对确保企业在快速变化的数字世界中&#xff0c;实现安全且可持续的创新至关…...

【设计模式】单件模式

七、单件模式 单件(Singleton) 模式也称单例模式/单态模式&#xff0c;是一种创建型模式&#xff0c;用于创建只能产生 一个对象实例 的类。该模式比较特殊&#xff0c;其实现代码中没有用到设计模式中经常提起的抽象概念&#xff0c;而是使用了一种比较特殊的语法结构&#x…...

Elasticsearch + Docker:实现容器化部署指南

Elasticsearch是一款强大的分布式搜索和分析引擎&#xff0c;广泛应用于日志分析、全文检索、实时数据分析等场景。而Docker作为一种轻量级的容器化技术&#xff0c;能够帮助开发者快速部署和管理应用。将Elasticsearch与Docker结合&#xff0c;不仅可以简化部署流程&#xff0…...

win32汇编环境,网络编程入门之十一

;win32汇编环境,网络编程入门之十一 ;在上一教程里&#xff0c;我们学习了如何读取大容量的网页内容&#xff0c;在这一教程里&#xff0c;我们学习一下如何在wininet或winhttp机制中提取网页中的超链接 ;>>>>>>>>>>>>>>>>>…...