idea调试vue项目

article/2025/10/15 0:37:08

前言

之前尝试的各种前端编辑器H5Builder,SublimeText,VSCode,NotePad++等等;作为一名后端开发,自己是从Eclipse系列的IDE转向使用JetBrain系列,深受InteliJ IDEA的毒害

近期公司的项目使用VSCode开发。然而作为大集成的IDEA,更能解决开发过程中的问题,无论是代码提示、跳转、插件、提示等等,还是IDEA更加符合自己的使用习惯。


环境准备

1. nodejs v8.x.x以上

2. npm v5.x.x以上

3. WebStorm 2017.3 以上 / IntelliJ IDEA 2017.3以上 

安装代码检查依赖

1. npm 安装全局依赖

npm install -g babel-eslint eslint eslint-plugin-node eslint-plugin-vue eslint-plugin-standard eslint-config-standard eslint-plugin-promise

 

显示安装结果

2. WebStorm/IDEA 在Plugin Repository 中安装 Eslint 插件 , Vue.js 插件;

 

plugin-vue

 

plugin-eslint

3. 禁用原生的代码检验,启用ESlint

1.IDEA/WebStorm->Preferences,先开启Eslint 

2.IDEA/WebStorm->Preferences->Editor->Inspections->JavaScript->关闭自身检查只保留ESlint

 

启用Eslint

禁用原生检查,仅保留ESLint

4.替换IDEA/WebStorm自带的格式化代码(ctrl+alt+L)

在项目根目录 .eslintrc.js 上右键,点击菜单底部 "Apply ESLint Code Style Rule";之后自动格式化就会按照 eslint 的规则

代码编写保存前需要手动执行格式化,否则不符合eslint代码规范的代码无法编译通过。

按照当前项目中的eslint文件配置格式

运行调试

1.点击右上角运行调试窗 Edit Configurations 

Edit Configuration

2. 如图,添加类型为npm的配置;执行脚本内容为dev;这一步等同于用控制台终端手动执行 npm run dev;用于启动node服务器

添加npm run dev

3.如同,再添加一个JavaScript Debug 类型的配置,用于调试;其中http://localhost:9527 指向页面启动的地址。默认使用Chrome浏览器

 

JavaScriptDebug

4.先运行dev-server 配置(也可以在底部Terminal中运行npm run dev)

 

启动npm dev服务器

 

启动chrome调试

好了打上断点,现在可以开始开发调试了。

 

断点调试

作者:tangH_c143
链接:https://www.jianshu.com/p/3f7504558f0d
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


http://chatgpt.dhexx.cn/article/YaN3eFxV.shtml

相关文章

IDEA 调试技巧

简介 在工作中看到很多水平不错的程序员,在调试代码的时候,也还只是停留在单步 debug 的阶段。如果能掌握更多的代码调试技巧,那么将大大提升工作效率。下面就让我么一起来系统的学习下 IDEA 的调试技巧吧。 debug界面介绍 默认设置下&…

# Idea 调试 Debug 技巧

Idea 调试 Debug 技巧 IDEA 为我们提供了很多简单且非常强大的调试功能 在需要调试的行打上断点,debugger 方式启动Idea 控制台如下 调试功能说明 Show Execution Point 快捷键:Alt F10回到当前激活的断点处:当你的鼠标不在断点所处的…

idea 调试

1、这里以一个web工程为例,点击图中按钮开始运行web工程。 2、设置断点 3、使用postman发送http请求 4、请求发送之后会自动跳到断点处,并且在断点之前会有数据结果显示 5、按F8 在 Debug 模式下,进入下一步,如果当前行断点是一个…

debug idea js,IDEA调试javaScript

谈起JavaScript调试,大家可能想到的就是FireFox下的FireBug,这毫无疑问,FireBug基本已经成为JavaScript开发人员的必备工具。在本文中,将向大家介绍如何在IDEA下远程调试JavaScript,毕竟能在IDE工具中直接设置断点&…

IDEA调试

IDEA调试 1 调试界面各按钮的含义2 调试过程中修改变量的值3 快速定位bug4 实战 IDEA是Java常用的开发工具,这里记录一下IDEA调试相关操作。 1 调试界面各按钮的含义 2 调试过程中修改变量的值 3 快速定位bug 4 实战 可以通过下面的代码实际操作操作,以…

IDEA如何进行debug调试

🌴IDEA如何进行debug调试 🍃第一步,设断点,打开debug🍃第二步,使用Debug调试的功能键 程序调试,相信是所有程序员必经之路,因为程序写出来是不可能没有错误的,当然除了非…

IDEA调试技巧(图文详解,保姆教程)

文章目录 基础篇:一、行断点二、详细断点(源断点)三、方法断点四、异常断点五、字段断点 进阶篇一、条件表达式二、通过调试来打印堆栈信息三、可以通过调试来解析表达式四、避免操作资源drop frames五、常用按键功能介绍六、调试源码七、str…

Intellij IDEA 调试功

本文简单介绍 IDEA 编辑器的调试功能,主要包括断点调试、单点调试、高级调试。可以收藏本文章,使用到的时候方便查找。 1.设置断点 选定要设置断点的代码行,在行号的区域后面单击鼠标左键即可。 2.开启调试会话 点击红色箭头指向的小虫子,开始进入调试。 IDE下方出现 Deb…

在Intellij IDEA中使用Debug

Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。 所以学习下如何在Intellij IDE…

IDEA的debug调试技巧详解

目录 一、概述 二、debug操作分析 1、打断点 2、运行debug模式 3、重新执行debug 4、让程序执行到下一次断点后暂停 5、让断点处的代码再加一行代码 6、停止debug程序 7、显示所有断点 8、添加断点运行的条件 9、屏蔽所有断点 10、把光标移到当前程序运行位置 11、…

app分享到微信的方案

来源分析 商业分析在微信的使用人数已经高居各通讯APP的榜首的同时,微信成为了我国移动流量最大的平台之一。在次趋势的引导下,很多的商家、体户便抓住了这一机遇,利用微信这个渠道来做产品的推广、以及营销方案宣传。但是好景不长&#xff…

java版微信分享功能(支持分享给好友/分享到朋友圈)

点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐] 先上官方文档:http://mp.weixin.qq.com/wiki/home/index.html 做之前建议先过遍文档,文档都说的清晰明了。 如果已经看过文档,那我们一起整理下JSSDK的流程步骤: 绑定域名 …

Android中实现微信分享的功能

在android开发中微信分享功能还是经常用到的,比如把文字,图片,网页类型,小程序类型的文件等分享给微信好友,朋友圈等。官方文档 那么接下来就来说说如何去实现吧 一.添加依赖 implementation com.tencent.mm.opensdk:…

H5链接分享到微信

在开发中最长遇到的一个需求就是微信分享&#xff0c;那么怎么实现呢&#xff0c;我使用uni-app写的 首先需要一个引导分享的图片 <view v-show"yd" class"boxContent" click"getclose(text)"><image class"yd" src"/s…

微信小程序学习 onShareAppMessage转发分享

最近在做仿抽奖助手小程序&#xff0c;遇上分享的一个问题。抽奖助手分享出来的商品缩略图很清晰且格式更好&#xff0c;而我们分享出来的是页面的默认截图&#xff0c;感觉不好看。其实它这个地方用的是图片&#xff0c;增加一个imageUrl即可。 onShareAppMessage(options) 在…

H5微信分享、自定义微信分享

在一个h5页面添加微信&#xff0c;分享给微信好友、朋友圈、腾讯微博 下面来实现 。 需要&#xff1a; 1、需要一个企业版的微信公众号&#xff08;认证过的&#xff09; 2、一台服务器 企业版的微信公众号原因&#xff1a; 在微信公众平台的接口权限内可以看到&#xff…

使用shareSDK实现微信多图分享到朋友圈Url分享到朋友圈URL分享到好友 问题记录

问题概述 其实第三方分享很早就有了&#xff0c;这个按理说这个应该没什么难度&#xff0c;为啥记录一下呢&#xff0c;因为项目中同时出现了 朋友圈多图分享&#xff08;多张URL集合&#xff09;&#xff0c;朋友圈URL分享&#xff0c;群和个人URL&#xff0c;图片分享。基本…

iOS ShareSDK实现分享——微信分享

最近领导让添加ios 微信分享视频的功能&#xff0c;之前做的只有微信分享本地图片的功能。 查看官网并没有找到答案&#xff0c;后来在其官网论坛中http://bbs.mob.com/thread-20938-1-1.html 这里面发现新版的sdk&#xff08;v3.2.1&#xff09;中才添加的微信分享本地文件&a…

微信分享功能

最近在做手机端页面&#xff0c;需要一个分享功能&#xff0c;其实自身分享是可以的&#xff0c;但是为了分享出的内容丰富&#xff0c;比如缩略图了&#xff0c;描述了等等&#xff0c;如下图所示&#xff1a; 步骤一&#xff1a;绑定域名 先登录微信公众平台进入“公众号…

Android app分享文件到微信

两种实现方案&#xff1a; 1.使用WXFileObject构造分享方法发送到微信&#xff1b; 2.调用系统分享方法&#xff0c;把文件直接发送到微信&#xff1b; 那么下面来分别看看怎么实现&#xff1a; 〇、准备工作 首先&#xff0c;需要在AndroidManifest.xml中配置FileProvider信…