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

Vue 2 + Vite 项目集成 ESLint 和 Prettier

news 来源：原创 2025/5/9 14:58:06

在 Vue 2 + Vite 项目中集成 ESLint 和 Prettier 可以帮助你规范代码风格并自动格式化代码。以下是详细的步骤：

1. 安装 ESLint 和 Prettier 相关依赖

在项目根目录下运行以下命令，安装 ESLint、Prettier 和相关插件：

npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier @babel/eslint-parser

eslint: ESLint 核心库。
prettier: Prettier 核心库。
eslint-plugin-vue: Vue 2 的 ESLint 插件。
eslint-config-prettier: 关闭 ESLint 中与 Prettier 冲突的规则。
eslint-plugin-prettier: 将 Prettier 作为 ESLint 的插件运行。
@babel/eslint-parser: 用于解析 ES6+ 语法。

2. 初始化 ESLint 配置

在项目根目录下运行以下命令，初始化 ESLint 配置：

npx eslint --init

根据提示选择以下配置：

How would you like to use ESLint? To check syntax, find problems, and enforce code style
What type of modules does your project use? JavaScript modules (import/export)
Which framework does your project use? Vue
Does your project use TypeScript? No
Where does your code run? Browser
What format do you want your config file to be in? JavaScript

完成后，会生成一个 .eslintrc.js 文件。

3. 修改 ESLint 配置

打开 .eslintrc.js 文件，修改为以下内容：

module.exports = {root: true,env: {browser: true,node: true,},parserOptions: {parser: '@babel/eslint-parser', // 使用 @babel/eslint-parser 解析器sourceType: 'module',},extends: ['plugin:vue/essential', // Vue 2 的 ESLint 插件'eslint:recommended', // ESLint 推荐规则'plugin:prettier/recommended', // Prettier 插件],rules: {'prettier/prettier': 'error', // 启用 Prettier 的规则'vue/multi-word-component-names': 'off', // 关闭 Vue 组件名必须多单词的规则},
};

4. 配置 Prettier

在项目根目录下创建 Prettier 的配置文件 .prettierrc，并添加以下内容：

{"semi": true,"singleQuote": true,"tabWidth": 2,"trailingComma": "es5","printWidth": 80
}

semi: 是否在语句末尾添加分号。
singleQuote: 是否使用单引号。
tabWidth: 缩进空格数。
trailingComma: 是否在多行结构的最后一行添加逗号。
printWidth: 每行代码的最大长度。

5. 添加 Prettier 忽略文件

在项目根目录下创建 .prettierignore 文件，指定不需要格式化的文件或目录：

/dist/
/node_modules/
/public/

6. 添加格式化脚本

在 package.json 中添加以下脚本：

{"scripts": {"lint": "eslint --ext .js,.vue src", // 检查代码"lint:fix": "eslint --ext .js,.vue src --fix", // 自动修复 ESLint 错误"format": "prettier --write \"src/**/*.{js,vue}\"" // 格式化代码}
}

运行以下命令检查代码：

npm run lint

运行以下命令自动修复 ESLint 错误：

npm run lint:fix

运行以下命令格式化代码：

npm run format

7. 配置 Vite 插件（可选）

为了让 Vite 在开发时支持 ESLint，可以安装 vite-plugin-eslint 插件：

安装插件：

npm install --save-dev vite-plugin-eslint

在 vite.config.js 中配置插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';export default defineConfig({plugins: [vue(),eslintPlugin({include: ['src/**/*.js', 'src/**/*.vue'], // 检查的文件范围}),],
});

现在，运行 npm run dev 时，Vite 会自动检查 ESLint 错误。

8. 配置编辑器（可选）

如果你使用的是 VSCode，可以安装 ESLint 和 Prettier 插件并启用保存时自动格式化：

安装以下插件：
- ESLint
- Prettier - Code formatter
在 VSCode 的设置中搜索 format on save，并启用保存时自动格式化。
确保默认格式化工具为 Prettier：
- 打开一个文件，右键选择 Format Document With...，然后选择 Prettier。

9. 提交时自动格式化（可选）

如果你想在 Git 提交时自动格式化代码，可以使用 husky 和 lint-staged：

安装依赖：

npm install --save-dev husky lint-staged

在 package.json 中添加配置：

{"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"src/**/*.{js,vue}": ["prettier --write","eslint --fix","git add"]}
}

初始化 husky：
```
npx husky install
```

现在，每次提交代码时，lint-staged 会自动格式化代码并修复 ESLint 错误。

10. 测试

运行以下命令检查代码格式：

npm run lint
npm run format

如果一切正常，你的代码将按照 ESLint 和 Prettier 的规则自动格式化和修复。

通过以上步骤，你的 Vue 2 + Vite 项目就成功集成了 ESLint 和 Prettier，并可以享受自动格式化和代码检查的便利！

Vue 2 + Vite 项目集成 ESLint 和 Prettier

在 Vue 2 Vite 项目中集成 ESLint 和 Prettier 可以帮助你规范代码风格并自动格式化代码。以下是详细的步骤： 1. 安装 ESLint 和 Prettier 相关依赖在项目根目录下运行以下命令，安装 ESLint、Prettier 和相关插件： npm install --save-de…...

编程日记 2025/5/9 14:58:06

uniapp canvas 生成海报并保存到相册

前言： 之前写过一篇canvas小程序画图只要是canvas各种方法的实际应用，有兴趣的小伙伴也可以看看微信小程序：使用canvas 生成图片并分享_小程序canvas生成图片-CSDN博客上一篇文章是小试牛刀，这次是更加全面的记录生成海报的…...

编程日记 2025/5/8 21:19:36

无人机不等同轴旋翼架构设计应用探究

“结果显示，对于不等组合，用户应将较小的螺旋桨置于上游以提高能效，但若追求最大推力，则两个相等的螺旋桨更为理想。” 在近期的研究《不等同轴旋翼性能特性探究》中，Max Miles和Stephen D. Prior博士深入探讨了不同螺…...

编程日记 2025/5/9 14:12:39

C语言中隐式类型转换截断和整型提升

C的整形算数总是至少以缺省整形类型的精度来进行的为了获得这个精度表达式中的字符和短整形操作数在使用之前被转换为普通整形这种类型转换成为整型提升给出代码实例↓ #include<stdio.h> int main() {//char signed charchar a 3;char b 127;char c a b;pri…...

编程日记 2025/5/9 14:44:30

R语言学习计划启动

R语言入门课生信基地已然落地，我们希望能够给大家提供系统性、形成性、规范性的生信教学。前面几次活动中同学们表示希望能够有线下集中学习以及针对性的指导、答疑。所以，此次我们计划于2025年02月22日~23日(周六周日)推出"生信R语言入门课"…...

编程日记 2025/5/9 14:32:04

AI写代码工具时代：前端开发技能迭代的挑战与应对

近年来，人工智能（AI）技术飞速发展，深刻地改变着各个行业，前端开发领域也不例外。AI技术不仅带来了新的开发模式，也显著加快了前端开发技能的迭代速度，给前端工程师带来了巨大的挑战。本文将深入…...

编程日记 2025/5/9 14:23:25

消息队列之-springcloud-mq-stream 学习

背景：开发中我们往往需要用到mq中间件进行消息处理，但是市面上的mq中间件实在太多了，导致我们在集成过程中困难重重，尤其在微服务当中，比如我们有一个订单模块、物流模块他们都用到了mq，订单用的是rabbitmq 物流用的是kafka 导致当我们需要向这两个模块推送mq消息时，需…...

编程日记 2025/5/9 13:57:00

线性表顺序表顺序表的静态分配 //线性表的元素类型为 ElemType//顺序表的静态分配 #define MaxSize10 typedef int ElemType; typedef struct{ElemType data[MaxSize];int length; }SqList;顺序表的动态分配 //顺序表的动态分配 #define InitSize 10 typedef struct{El…...

编程日记 2025/5/5 12:49:25

【16届蓝桥杯寒假刷题营】第1期DAY4

5.倍数区间 - 蓝桥云课 5. 倍数区间问题描述给定一个长度为 n 的数组 a，定义 f(i) 表示包含 ai 的最长区间长度，要求该区间中的所有数都是 ai 的倍数。请计算不同的 f(i) 的个数，其中 1≤i≤n。输入格式第一行包含一个正整数 n …...

编程日记 2025/5/5 21:49:24

「软件设计模式」适配器模式（Adapter）

软件设计模式深度解析：适配器模式（Adapter）（C实现） 一、模式概述适配器模式（Adapter Pattern）是结构型设计模式中的"接口转换器"，它像现实世界中的电源适配器一样&#…...

编程日记 2025/5/9 2:20:30

进阶版MATLAB 3D柱状图

%% 1. 数据准备 % 假设数据是一个任意形式的矩阵 % 例如：5行 x 7列的矩阵 data [3 5 2 6 8 4 7;7 2 6 9 3 5 8;4 8 3 7 2 6 9;6 1 5 8 4 7 2;9 4 7 3 6 2 5];% 定义行和列的标签（可选） rowLabels {Row1, Row2, Row3, Row4, Row5}; % 行标签…...

编程日记 2025/5/9 13:50:08

【Elasticsearch】token filter分词过滤器

以下是Elasticsearch中常见的分词过滤器（Token Filter）的详细说明，基于搜索结果中的信息整理： 1.Apostrophe • 功能：处理文本中的撇号（apostrophe），例如将“OReilly”转换为“ore…...

编程日记 2025/5/9 14:04:13

一天急速通关SpringMVC

一天急速通关SpringMVC 0 文章介绍1 介绍1.1 MVC架构与三层架构1.2 Spring MVC介绍1.3 入门程序 2 请求的映射3 请求数据的接收3.1 RequestParam接收3.2 POJO/JavaBean接收3.3 RequestHeader和CookieValue接收 4 请求数据的传递5 视图5.1 视图的理解5.2 请求转发和响应重定向的…...

编程日记 2025/5/3 19:52:36

MongoDB 7 分片副本集升级方案详解（下）

#作者：任少近文章目录 1.4 分片升级1.5 升级shard11.6 升级shard2,shard31.7 升级mongos1.8重新启用负载均衡器1.9 推荐MongoDB Compass来验证数据 2 注意事项： 1.4 分片升级使用“滚动”升级从 MongoDB 7.0 升级到 8.0，即在其他成员可用…...

编程日记 2025/5/8 7:05:10

如何在 MySQL 5.6 中实现按季度分组并找到销量最高的书籍

如何在 MySQL 5.6 中实现按季度分组并找到销量最高的书籍引言问题描述实现步骤1. 计算每本书在每个季度的累计销量2. 找到每个季度的最高累计销量3. 匹配最高销量的书籍总结扩展练习引言在数据分析和业务报表中，经常需要对数据进行分组统计，并找到每…...

编程日记 2025/5/9 13:39:51

JAVA生产环境(IDEA)排查死锁

使用 IntelliJ IDEA 排查死锁 IntelliJ IDEA 提供了强大的工具来帮助开发者排查死锁问题。以下是具体的排查步骤： 1. 编写并运行代码首先，我们编写一个可能导致死锁的示例代码： public class DeadlockExample {private static final Obj…...

编程日记 2025/5/9 13:57:00

群体智能优化：粒子群算法（PSO）详解与实战

一、引言：从鸟群行为到优化算法 1995年，社会心理学家James Kennedy和电气工程师Russell Eberhart通过观察鸟群觅食行为，提出了著名的粒子群优化算法（Particle Swarm Optimization, PSO）。这一算法仅用不到30年时间&am…...

编程日记 2025/5/6 20:56:30

k8s集群搭建参考（by lqw）

文章目录声明配置yum源安装docker安装 kubeadm，kubelet 和 kubectl部署主节点其他节点加入集群安装网络插件声明由于看了几个k8s的教程，都存在各种问题，自己搭建的时候，踩了不少坑，最后还是靠百度csdnchatGPT才搭建…...

编程日记 2025/5/8 9:57:56

vue3+vite项目引入electron运行为桌面项目

一、安装electron npm install --save-dev electron二、项目根目录添加electron文件在此文件夹中添加两个js文件：main.js、preload.js main.js: // Modules to control application life and create native browser window const { app, BrowserWindow } requ…...

编程日记 2025/5/9 14:41:56

教育小程序+AI出题：如何通过自然语言处理技术提升题目质量

随着教育科技的飞速发展，教育小程序已经成为学生与教师之间互动的重要平台之一。与此同时，人工智能（AI）和自然语言处理（NLP）技术的应用正在不断推动教育内容的智能化。特别是在AI出题系统中，如何…...

编程日记 2025/5/3 7:23:03

使用 Flask 构建流式返回服务

使用 Flask 构建流式返回服务是一个很常见的应用场景，特别是在需要逐步传输大数据或进行长时间操作的场景下（比如下载大文件、实时日志等）。Flask 中可以通过 Response 对象来实现流式响应。以下是一个简单的例子，展示了如何在 Fl…...

编程日记 2025/5/5 22:00:42

Redis 集群相关知识介绍

Redis 集群详解：从入门到实战 Redis 是一个高性能的开源数据库，支持多种数据结构，广泛应用于缓存、消息队列、实时分析等领域。随着业务规模的增长，单机 Redis 的性能和容量往往无法满足需求，因此 Redis 集群&#xf…...

编程日记 2025/5/4 2:08:39

宏基传奇swift edge偶尔开机BIOS重置

电脑是acer swift edge， SFA16-41，出厂是Win11系统， BIOS版本出厂1.04，更新到了目前最新1.10。问题是会偶尔开机ACER图标变小跑到屏幕左上方，下次开机BIOS就会被重置，开机等待很长时间。因为是偶尔现象的…...

编程日记 2025/5/7 6:12:25

DeepSeek是如何通过“蒸馏”技术打造自己的AI模型

1 引言： 最近，外媒对中国公司——DeepSeek进行了猛烈抨击，指控其采用了所谓的“蒸馏”（Distillation）技术，涉嫌抄袭甚至作弊。那么，什么是“蒸馏”技术？ 在人工智能领域，…...

编程日记 2025/5/3 10:54:52

你如何利用SIMD（如SSE/AVX）优化图像处理的性能？

SIMD优化问题 1. SIMD 在图像处理中的优化方式2. 典型应用场景3. SIMD 的常见优化技巧4. 总结利用 SIMD（Single Instruction, Multiple Data） 指令集（如 SSE/AVX/AVX2/AVX-512）优化图像处理的性能，可以极大地提升计算…...

编程日记 2025/5/9 6:14:10

支付宝 IoT 设备入门宝典（上）设备管理篇

相信不少朋友最近都被支付宝“碰一下”广告刷屏，“不用打开 APP 支付就碰一下”几个字一出简直自带BGM……其实“碰一下”就是支付宝 IoT 设备的一种，趁着热度还在，我会分为设备管理和设备经营上下两篇，简单介绍一下支付宝 IoT&am…...

编程日记 2025/5/7 15:40:48

Go语言 Web框架Gin

Go语言 Web框架Gin 参考 https://docs.fengfengzhidao.com https://www.liwenzhou.com/posts/Go/gin/#c-0-7-2 返回各种值返回字符串 package mainimport ("net/http""github.com/gin-gonic/gin")func main() {router : gin.Default()router.GET("…...

编程日记 2025/5/6 3:31:20

蓝桥杯-洛谷刷题-day5（C++）（为未完成）

1.P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 i.题目 ii.代码 #include <iostream> #include <string> using namespace std;int N, Na, Nb; //0-"剪刀", 1-"石头", 2-"布", 3-"蜥", 4-"斯"&#xff1…...

编程日记 2025/5/9 14:31:06

【Unity3D优化】使用ASTC压缩格式优化内存

在Unity3D手游开发中，合理选择纹理压缩格式对于优化内存占用、提高渲染效率至关重要。本文将记录近期在项目内进行的图片压缩格式优化过程，重点介绍从ETC2到ASTC 5x5的优化方案及其带来的收益。 1. 现状分析：从ETC2到ASTC 6x6 block 在项目…...

编程日记 2025/5/4 16:33:07

NO.13十六届蓝桥杯备战|条件操作符|三目操作符|逻辑操作符|!||||(C++)

条件操作符条件操作符介绍条件操作符也叫三⽬操作符，需要接受三个操作数的，形式如下： exp1 ? exp2 : exp3条件操作符的计算逻辑是：如果 exp1 为真， exp2 计算， exp2 计算的结果是整个表达式的结果&am…...

编程日记 2025/5/9 5:47:37

【uniapp-小程序】实现方法调用的全局tips弹窗

【uniapp-小程序】实现方法调用的全局tips弹窗开发背景弹窗组件全局调用封装配置项入参全局注入使用附带：如何在uniapp-H5项目中实现全局自定义弹窗组件定义定义vue插件引入笑死，只有在想找工作的时候才会想更新博客。开发背景本来是个uniapp开发…...

编程日记 2025/5/9 14:02:30

springboot如何将lib和jar分离

遇到一个问题，就是每次maven package或者maven install后target中的jar很大，少的50几MB，大的100多兆优化前： 优化后： 优化前优化后压缩率77.2MB4.65MB93% 具体方案： pom.xml中 <build><…...

编程日记 2025/5/8 11:17:48

深入探索C语言中的字符串处理函数：strstr与strtok

在C语言的字符串处理领域， strstr 和 strtok 是两个非常重要的函数，它们各自承担着独特的功能，为开发者处理字符串提供了强大的支持。一、strstr函数：字符串查找的利器 strstr 函数用于在一个字符串中查找另一个字符串的首次出现…...

编程日记 2025/5/3 23:35:07

Django学习笔记（第一天：Django基本知识简介与启动）

博主毕业已经工作一年多了，最基本的测试工作已经完全掌握。一方面为了解决当前公司没有自动化测试平台的痛点，另一方面为了向更高级的测试架构师转型，于是重温Django的知识，用于后期搭建测试自动化平台。为什么不选择Java&#x…...

编程日记 2025/5/5 18:12:29

npm版本号标记

在 npm 中，版本号的标记遵循语义化版本控制（Semantic Versioning, SemVer）的规则，版本号通常由主版本号（major）、次版本号（minor）和修订版本号（patch）组成，格式为： <major>.<minor>.<patch>1. 版本号格式主版本号（major）：当你做了不兼…...

编程日记 2025/5/6 11:26:58

无人机雨季应急救灾技术详解

无人机在雨季应急救灾中发挥着至关重要的作用，其凭借机动灵活、反应迅速、高效安全等特点，为救灾工作提供了强有力的技术支撑。以下是对无人机雨季应急救灾技术的详细解析： 一、无人机在雨季应急救灾中的应用场景 1. 灾情侦查与监测无人机…...

编程日记 2025/5/7 11:12:24

算法与数据结构（多数元素）

题目思路方法一：哈希表因为要求出现次数最多的元素，所以我们可以使用哈希映射存储每个元素及其出现的次数。每次记录出现的次数若比最大次数大，则替换。方法二：摩尔算法摩尔的核心算法就是对抗，因为存在次数多…...

编程日记 2025/5/9 14:19:53

详解如何使用Pytest内置Fixture tmp_path 管理临时文件

关注开源优测不迷路大数据测试过程、策略及挑战测试框架原理，构建成功的基石在自动化测试工作之前，你应该知道的10条建议在自动化测试中，重要的不是工具临时目录在测试中起着至关重要的作用，它为执行和验证代码提供了一个可控…...

编程日记 2025/5/4 15:14:12

量子计算的五大优势

量子计算的优势有哪些？ 量子计算是一个快速发展的领域，有望彻底改变我们处理复杂计算问题的方式。那么，量子计算的优势是什么？与经典计算相比，量子计算又有哪些优势呢？当我们探索量子力学的世界以及量子系…...

编程日记 2025/5/8 8:12:01

行内元素和块级元素

行内元素和块级元素 1.行内元素1.1什么是行内元素1.2行内元素的特点1.3常见的行内元素 2.块级元素2.1什么是块级元素2.2块级元素的特点2.3常见的块级元素 3.行内元素和块级元素的区别 1.行内元素 1.1什么是行内元素行内元素是指在网页中不会独占一行,而是与其他行内元素在同…...

编程日记 2025/5/7 8:08:04

java面试题-集合篇

Collection 1.Collection有哪些类？ Java集合框架中的Collection接口是所有集合类的基础接口，定义了一些基本的集合操作，如添加元素、删除元素、判断是否包含某个元素等。常见的集合类包括List、Set和Queue。 List List接口定义了按照索引…...

编程日记 2025/5/3 18:51:22

二十九、vite项目集成webpack+vue2项目

一、开发基座应用： 1、安装依赖 npm i @micro-zoe/micro-app@0.8.6 --save 2、在入口处引入（main.ts） import microApp from @micro-zoe/micro-appmicroApp.start()...

编程日记 2025/5/7 5:42:45

小程序之间实现互相跳转的逻辑

1：小程序之间可以实现互相跳转吗可以实现互相跳转！ 2：小程序跳转是否有限制有限制！限制如下 2.1：需要用户触发跳转从 2.3.0 版本开始，若用户未点击小程序页面任意位置，则开发者将无法调用此接口自动跳转至其他小程序。 2.2：需要用户确认跳转从 2.3.0 版本开始…...

编程日记 2025/5/6 2:26:40

算法——数学建模的十大常用算法

数学建模的十大常用算法在数学建模竞赛和实际问题解决中起着至关重要的作用。以下是这些算法的具体信息、应用场景以及部分算法的C语言代码示例（由于篇幅限制，这里只给出部分算法的简要代码或思路，实际应用中可能需要根据具体问题进行调整和扩…...

编程日记 2025/5/6 7:19:32

cookie、session、jwt、Oauth2.0、sso 分别有什么用

cookie、session、jwt都是 web 应用中的认证方式，最早只有 cookie，后面觉得所有数据存储在客户端不安全，就出现了 cookie-session，再后面有了 jwt。 cookie工作原理 cookie 数据存储在用户的本地。服务器完全根据 cookie 确定访…...

编程日记 2025/5/4 15:05:24

maven使用默认settings.xml配置时，Idea基于pom.xml更新依赖时报错，有些组件下载时连接超时

1、问题背景：maven使用默认settings.xml配置时，Idea基于pom.xml更新依赖时报错，有些组件下载时连接超时， 通过日志发下，去连接maven.org网站下载依赖，有时候肯定会超时。 2、解决办法：使用国外…...

编程日记 2025/5/6 2:57:00

信息收集-Web应用搭建架构指纹识别WAF判断蜜罐排除开发框架组件应用

知识点： 1、信息收集-Web应用-架构分析&指纹识别 2、信息收集-Web应用-架构分析&WAF&蜜罐 3、信息收集-Web应用-架构分析&框架组件识别指纹识别 EHole_magic https://github.com/lemonlove7/EHole_magic 指纹识别 Wappalyzer https://github.com…...

编程日记 2025/5/4 12:59:40

蓝桥杯之图

图： 对于图来说，重点在于之后的最短路径算法，这边简单做一下了解即可...

编程日记 2025/5/3 20:25:02

ProxySQL构建PolarDB-X标准版高可用路由服务三节点集群

ProxySQL构建PolarDB-X标准版高可用路由服务三节点集群一、PolarDB-X标准版主备集群搭建三台机器上传 polardbx 包，包可以从官网https://openpolardb.com/download获取，这里提供离线rpm。 1、上传 polardbx 安装包到 /opt目录下 rpm -ivh t-pol…...

编程日记 2025/5/9 11:15:08

【leetcode】双指针：移动零 and 复写零

文章目录 1.移动零2.复写零 1.移动零 class Solution { public:void moveZeroes(vector<int>& nums) {for (int cur 0, dest -1; cur < nums.size(); cur)if (nums[cur] ! 0)swap(nums[dest], nums[cur]);} };class Solution { public:void moveZeroes(vector&l…...

编程日记 2025/5/3 17:53:24