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

Vue 2 + Webpack 项目中集成 ESLint 和 Prettier

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


1. 安装 ESLint 和 Prettier 相关依赖

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

npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier babel-eslint
  • eslint: ESLint 核心库。
  • prettier: Prettier 核心库。
  • eslint-plugin-vue: Vue 2 的 ESLint 插件。
  • eslint-config-prettier: 关闭 ESLint 中与 Prettier 冲突的规则。
  • eslint-plugin-prettier: 将 Prettier 作为 ESLint 的插件运行。
  • babel-eslint: 用于解析 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', // 使用 babel-eslint 解析器},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. 配置编辑器(可选)

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

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

8. 提交时自动格式化(可选)

如果你想在 Git 提交时自动格式化代码,可以使用 huskylint-staged

  1. 安装依赖:

    npm install --save-dev husky lint-staged
    
  2. package.json 中添加配置:

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

    npx husky install
    

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


9. 测试

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

npm run lint
npm run format

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


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

相关文章:

Vue 2 + Webpack 项目中集成 ESLint 和 Prettier

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

Renesas RH850 EEL库的优点

文章目录 1. 磨损均衡(Wear Leveling)2. 数据抽象与易用性3. 后台维护与自动刷新4. 多优先级操作5. ECC 错误处理与数据完整性EEL 与 FDL 的协作机制1. 分层架构2. 存储池划分3. 协作流程4. 同步与互斥5. 性能优化实际应用场景示例场景:车辆里程存储总结1. 磨损均衡(Wear L…...

torch导出ONNX模型报错:OnnxExporterError: Module onnx is not installed

问题: 使用torch 导出模型为onnx文件时报错:torch.onnx.OnnxExporterError: Module onnx is not installed! 环境: 操作系统 Win10 python运行环境 Anacoda3 torch 2.6.0 torchvision …...

LabVIEW 用户界面设计基础原则

在设计LabVIEW VI的用户界面时,前面板的外观和布局至关重要。良好的设计不仅提升用户体验,还能提升界面的易用性和可操作性。以下是设计用户界面时的一些关键要点: 1. 前面板设计原则 交互性:组合相关的输入控件和显示控件&#x…...

使用Python爬虫实时监控行业新闻案例

目录 背景环境准备请求网页数据解析网页数据定时任务综合代码使用代理IP提升稳定性运行截图与完整代码总结 在互联网时代,新闻的实时性和时效性变得尤为重要。很多行业、技术、商业等领域的新闻都可以为公司或者个人发展提供有价值的信息。如果你有一项需求是要实时…...

qt QTextEdit用法总结

1. 基本介绍 QTextEdit 是 Qt 中用于显示和编辑富文本(支持 HTML 子集)和纯文本的控件。 支持文本格式(字体、颜色、对齐)、列表、表格、图片插入等富文本功能。 底层通过 QTextDocument 管理内容,提供强大的文本处理…...

《open3d qt 网格采样成点云》

open3d qt 网格采样成点云 效果展示二、流程三、代码效果展示 二、流程 创建动作,链接到槽函数,并把动作放置菜单栏 参照前文 三、代码 1、槽函数实现 void on_actionMeshUniformSample_triggered();//均匀采样 void MainWindow::...

企业数据安全:切实有效的数据安全保障措施分享:

确保企业数据安全是一项持续不懈的任务,鉴于技术的飞速发展,网络攻击者持续探索新型手段以窃取敏感信息并谋取利益。若企业欲避免成为数据泄露的下一个牺牲品,就必须始终保持警觉,预先规划,以不变应万变。为了帮助企业…...

rocketmq-netty通信设计-request和response

1、NettyRemotingServer启动分析 org.apache.rocketmq.remoting.netty.NettyRemotingServer#start public void start() {this.defaultEventExecutorGroup new DefaultEventExecutorGroup(nettyServerConfig.getServerWorkerThreads(),new ThreadFactory() {private AtomicI…...

DeepSeek 助力 Vue 开发:打造丝滑的卡片(Card)

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 💕 目录 Deep…...

计算机组成原理—— 总线系统(十一)

在追求梦想的旅途中,我们常常会遇到崎岖的道路和难以预料的风暴。然而,正是这些挑战塑造了我们的坚韧和毅力,使我们能够超越自我,触及那些看似遥不可及的目标。不要因为一时的困境而气馁,也不要因为他人的质疑而动摇自…...

电商小程序(源码+文档+部署+讲解)

引言 随着移动互联网的快速发展,电商小程序成为连接消费者与商家的重要桥梁。电商小程序通过数字化手段,为消费者提供了一个便捷、高效的购物平台,从而提升购物体验和满意度。 系统概述 电商小程序采用前后端分离的架构设计,服…...

8、k8s的pv和pvc

pv和pvc的概念 静态 动态——>自动分配 pv:persistent volume,持久化存储卷,描述或者定义存储卷的类型。集群范围内的存储概念,代表的是实际的存储空间(本地磁盘、网络系统文件nfs,云存储&#xff09…...

【limit 1000000,10 加载很慢该怎么优化?】

在 SQL 数据库中,使用 LIMIT 子句进行分页查询时,如果偏移量(offset)很大,查询性能可能会变得非常差。 这是因为数据库需要扫描和跳过大量的记录才能到达所需的起始位置,然后再取出所需的记录数。 例如,LIMIT 1000000, 10 表示跳过前 100 万条记录,然后取接下来的 10…...

通过IDEA傻瓜式快速分析java堆内存快照

背景 很多开发都觉得分析堆快照查找内存泄漏、大对象等是一个比较需要技术功底的能力,但其实不然,通过IDEA就可以直接快速分析。 操作流程 通过idea直接打开已经找运维或自行dump好的.hprof文件 选中后,IDEA默认会在底部分析器tab展示解析…...

测试方案整理

搜索引擎放在那里?研发 查看问题样本或者在提取再批量入录等情况,一旦我没有勾选或者全选中已经批量入录的样本,那么在直接点击批量提取或查看问题样本的后,会自动默认为选择全选样本还是按照输入错误处理? 批量查看返…...

2025年视觉、先进成像和计算机技术国际学术会议(VAICT2025)

2025年视觉、先进成像和计算机技术国际学术会议(VAICT2025) 2025 International Conference on Vision, Advanced Imaging,and Computer Technology 【重要信息】 二轮截稿时间:2025年3月18日 注册截址时间:2025年4月11日 会…...

【黑马点评】jmeter测试秒杀接口前后耗时,和查询店铺(redis+caffeine二级缓存)接口

【黑马点评】jmeter测试秒杀接口前后耗时,和查询店铺缓存穿透接口 4.测试秒杀接口耗时4.1 修改VoucherOrderController4.2 测试原本的接口耗时 5. 测试缓存穿透 这篇是测试,使用RabbitMQ消息异步处理订单,以及不异步处理订单的耗时对比 以及查…...

盛铂科技 SCP4006/4018/4040:国产袖珍式功率计 射频微波功率探头 平均功率计

在通信、电子测量等领域,功率计是确保信号稳定、系统高效运行的关键设备。盛铂科技自主研发的 SCP4000 系列自带 USB 接口的袖珍式 CW 信号平均功率计,以其卓越的性能、高性价比和便捷的操作,在众多同类产品中脱颖而出,成为行业内…...

数据科学之数据管理|统计学

使用python学习统计 目录 01 统计学基础 7 一、 统计学介绍 7 二、 数据和变量 8 02 描述统计 10 一、 描述统计概述 10 二、 分类变量的描述 11 三、 等距数值变量的描述 13 四、 等比数值变量的描述 16 五、 常用软件包介绍 16 六、 数值变量的描述统计 18 (一)…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...