前端項目vue3項目集成eslint@9.x跟prettier

tips: 這些涉及編輯器的修改不一定能及時生效,如果沒有生效,可以試試重啟編輯器窗口

編輯器集成

我的編輯器是vscode,需要安裝這兩個編輯器插件

eslint
prettier

我這個配置主要是通過eslint提供的配置cli命令生成,在里面加入了對prettier的支持。
eslint官方提供的命令,根據他的提供的選項一項一項選就可以了,我這里是生成的ts + vue的項目

npm init @eslint/config@latest

生成的最初代碼

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import { defineConfig } from "eslint/config";export default defineConfig([{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], plugins: { js }, extends: ["js/recommended"] },{ files: ["**/*.{js,mjs,cjs,ts,mts,cts,vue}"], languageOptions: { globals: globals.browser } },tseslint.configs.recommended,pluginVue.configs["flat/essential"],{ files: ["**/*.vue"], languageOptions: { parserOptions: { parser: tseslint.parser } } },
]);

我安裝的項目中的插件

eslint-config-prettier (關閉 ESLint 中所有與 Prettier 沖突的??格式化規則??(如縮進、引號、分號等),避免重復檢查和修復沖突)
eslint-plugin-prettier (將 Prettier 的格式化規則??作為 ESLint 規則運行??,使 Prettier 的格式問題通過 ESLint 報錯,并支持 eslint --fix 自動修復)

.prettierc.json (prettier的格式化配置規則,放在項目根目錄中)

{"printWidth": 150,"tabWidth": 2,"semi": false,"singleQuote": true,"trailingComma": "none","bracketSpacing": true,"bracketSameLine": true,"arrowParens": "always","endOfLine": "auto"
}

最終完整代碼

import js from '@eslint/js'
import globals from 'globals'
import tseslint from 'typescript-eslint'
import pluginVue from 'eslint-plugin-vue'
import { defineConfig } from 'eslint/config'
import EslintConfigPrettier from 'eslint-config-prettier'
import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended'export default defineConfig([{ files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'], plugins: { js }, extends: ['js/recommended', pluginPrettierRecommended] },{files: ['**/*.{js,mjs,cjs,ts,mts,cts,vue}'],languageOptions: {globals: {...globals.browser,...globals.node}}},tseslint.configs.recommended,pluginVue.configs['flat/essential'],{ files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },{rules: {//	這條規則是說如果變量未被更改,則應用const聲明,// 這里寫出來的原因是只有ts文件有效,而vue文件中沒有自動修復,我就在這里重寫了,保證行為一致'prefer-const': ['error',{destructuring: 'any',ignoreReadBeforeAssign: false}],'vue/multi-word-component-names': 'off'}},EslintConfigPrettier
])

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/88506.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/88506.shtml
英文地址,請注明出處:http://en.pswp.cn/web/88506.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

登錄超時問題的排查方法與預防經驗分享

??一、排查方法????檢查網絡連接??確保網絡穩定,嘗試重啟路由器或切換網絡(如從WiFi切換到移動數據)。使用命令(如 ping 或 traceroute)測試網絡連通性,排查是否存在丟包或高延遲。??驗證服務端狀…

uniapp,Anroid10+版本如何保存圖片并刪除

Android 10系統開始 進一步增強了平臺功能,為外部存儲設備上的應用和用戶數據提供了更好的保護。作為這項工作的一部分,平臺引入了進一步的改進,以簡化向分區存儲的轉換。 為了讓用戶更好地控制自己的文件,保護用戶隱私數據&#…

Jenkins Pipeline 語法

Pipeline 簡介 Jenkins2.x 的核心是使用 pipeline 來構建項目,也就是流水線,將 Jenkins1.0 版本中基于表單的配置信息比如 JDK/SVN 以及參數的配置都轉變成了代碼,即 pipeline as Code。 傳統的表單方式有以下缺點: 需要大量的 web 表單交互,有時候需要進行很多次的切換…

搭建滲透測試環境

一、基于docker搭建靶場 #此步驟需要科學上網 #從軟件源中下載 docker.io 和 docker -compose 軟件包及其依賴項。 sudo apt-get install docker.io docker-compose #查看docker版本 docker -v #查看docker信息 docker info #重啟docker服務 sudo systemctl daemon-reload sudo…

(一)OpenCV——噪聲去除(降噪)

高斯濾波器(針對高斯噪聲) 高斯噪聲是指它的概率密度函數服從高斯分布(即正態分布)的一類噪聲。常見的高斯噪聲包括起伏噪聲、宇宙噪聲、熱噪聲和散粒噪聲等等。 高斯濾波(Gaussian filter) 包含許多種,包括低通、帶…

百度開源文心 4.5 系列開源大模型 GitCode 本地化部署,硅基流動:文心 vs. DeepSeek vs. Qwen 3.0 深度測評

百度開源文心 4.5 系列開源大模型 GitCode 本地化部署,硅基流動:文心 vs. DeepSeek vs. Qwen 3.0 深度測評 文章目錄百度開源文心 4.5 系列開源大模型 GitCode 本地化部署,硅基流動:文心 vs. DeepSeek vs. Qwen 3.0 深度測評背景百…

「日拱一碼」022 機器學習——數據劃分

目錄 基于單次隨機劃分的方法 普通單次隨機劃分(train_test_split) 分層單次隨機劃分(使用 train_test_split 的 stratify 參數) 基于多次隨機劃分的方法 普通多次隨機劃分(ShuffleSplit) 分層多次隨機劃分(StratifiedShuffleSplit…

lora網關

所需配置的引腳,SPI傳輸,PG13復位(輸出引腳,推挽輸出),PE2忙碌(輸入引腳,浮空輸入)PE6PE5輸出。若利用延時處理按鍵消抖,hal庫里用systick中斷實現延時&#…

5G IMS注冊關鍵一步:UE如何通過ePCO獲取P-CSCF地址

看似簡單的P-CSCF地址傳遞,背后是5G核心網控制面與用戶面的精密協作。ePCO作為高效的信令載體,承載著IMS業務觸達的第一把鑰匙。 在5G網絡中建立IMS PDN連接時,UE(用戶設備)獲取P-CSCF(Proxy-Call Session Control Function)地址是IMS業務(如VoLTE、VoNR)成功注冊和運…

JVM方法區的運行時常量區到底存儲哪些數據?

JDK8以后,運行時常量池邏輯上屬于方法區;但: 其中的字符串常量池實際位置移至到了java堆;其中一些符號引用也存儲到了元空間;字符串常量池,元空間,運行時常量區的具體關系請看這篇博客&#xf…

Go defer(二):從匯編的角度理解延遲調用的實現

Go的延遲調用機制會在當前函數返回前執行傳入的函數,它會經常被用于關閉文件描述符、關閉數據庫連接以及解鎖資源。之前的文章( Go defer(一):延遲調用的使用及其底層實現原理詳解 )詳細介紹了defer的使用以…

Android 12系統源碼_分屏模式(一)從最近任務觸發分屏模式

前言 打開MainActivity,然后進入最近任務觸發分屏,可以成功進入分屏模式。 本篇文章我們來具體梳理一下這個過程的源碼調用流程。 一 launcher3階段 1.1 源碼 //packages/apps/Launcher3/quickstep/src/com/android/quickstep/views/TaskView.java publi…

Flask 入門教程:用 Python 快速搭建你的第一個 Web 應用

文章目錄前言一、什么是 Flask?📌 Flask 的優勢1. 輕量靈活2. 易于上手3. 可擴展性強4. 自由度高5. 社區活躍,資料豐富Flask 主要用來做什么?二、Flask快速入門1.創建一個Flask項目2.開啟debug,修改host,端…

實習第一個小需求樣式問題總結

Vue2 vxe-table Element UI 表頭下拉詳情實現總結一、核心功能實現表頭下拉按鈕交互初始嘗試 expand-change 事件無法滿足需求&#xff0c;改用 vxe-table 的 toggle-row-expand 事件&#xff1a;<vxe-table toggle-row-expand"handleExpandChange"><temp…

Linux中LVM邏輯卷擴容

在Linux系統中對根目錄所在的LVM邏輯卷進行擴容&#xff0c;需要依次完成 物理卷擴容 ? 卷組擴容 ? 邏輯卷擴容 ? 文件系統擴容 四個步驟。以下是詳細操作流程&#xff1a;一、確認當前磁盤和LVM狀態# 1. 查看磁盤空間使用情況 df -h /# 2. 查看塊設備及LVM層級關系 lsblk# …

微軟365 PDF導出功能存在本地文件包含漏洞,可泄露敏感服務器數據

微軟365的"導出為PDF"功能近期被發現存在嚴重的本地文件包含(Local File Inclusion, LFI)漏洞&#xff0c;攻擊者可利用該漏洞獲取服務器端的敏感數據&#xff0c;包括配置文件、數據庫憑證和應用程序源代碼。該漏洞由安全研究員Gianluca Baldi發現并報告給微軟&…

臺球 PCOL:極致物理還原的網頁斯諾克引擎(附源碼深度解析)

> 無需下載,打開瀏覽器即可體驗專業級斯諾克!本文將揭秘網頁版臺球游戲的物理引擎與渲染核心技術 在游戲開發領域,臺球物理模擬一直被視為**剛體動力學皇冠上的明珠**。今天我們要解析的**臺球 PCOL**(Pure Canvas Online Billiards)正是一款突破性的網頁版斯諾克游戲…

springboot-2.3.3.RELEASE升級2.7.16,swagger2.9.2升級3.0.0過程

一、pom文件版本修改<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.16</version><relativePath/> </parent>如果用到了“spring-boot-starter…

Python-正則表達式-信息提取-滑動窗口-數據分發-文件加載及分析器-瀏覽器分析-學習筆記

序 欠4前年的一份筆記 &#xff0c;獻給今后的自己。 正則表達式 概述 正則表達式&#xff0c;Regular Expression&#xff0c;縮寫為regex、regexp、RE等。 正則表達式是文本處理極為重要的技術&#xff0c;用它可以對字符串按照某種規則進行檢索、替換。 1970年代&…

一文入門神經網絡:神經網絡概念初識

神經網絡的世界遠比你想象得更豐富多元。從基礎架構到前沿融合模型&#xff0c;我為你梳理了當前最值得關注的神經網絡類型&#xff0c;不僅包括那些“教科書級”的經典模型&#xff0c;也覆蓋了正在改變行業格局的新興架構。以下是系統分類與核心特點總結&#xff1a;一、基礎…