前言

之前尝试的各种前端编辑器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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

idea调试vue项目相关推荐

浏览器下载安装vue js devtools调试vue项目
下载vue js devtools插件的方式: 推荐网址: 1.https://www.extfans.com/ 2.百度下载谷歌浏览器助手插件,直接进入谷歌网上应用商店进行下载 3.https:// ...
安卓手机模拟器调试--vue项目在线调试（HBuilder X, 配合模拟器--夜神模拟器）及打包
1.下载HBuilder X 下载地址 -- https://www.dcloud.io/ 2.打开HBuilder 建一个项目 3. 打包自己的Vue项目,vue-cli2 在目录下的config文 ...
vue调试工具如何使用_教你使用Vue.js的DevTools来调试vue项目
Vue DevTools项目的官方主页位于GitHub上:https://http://github.com/vuejs/vue-devtools.你可以找到安装说明,帮助解决一些问题等等.目前该扩展 ...
谷歌浏览器调试vue项目
前言众所周知,在项目过程中我们常常遇到的一个问题就是本地调试的时候没问题但是发布到线上的时候就不行了.在时间充裕的情况下,我们当然可以慢慢调试,但是那是不可能的.在线上遇到问题时,难免会倍感压力和 ...
Chrome调试vue项目时session异常,后端tp6 session使用异常
Chrome调试时跨站不能设置cookie问题 this set-cookie didn't specify a "SameSite" attribute,然后变成默认Lax. 然 ...
Vue项目构建开发入门
Vue项目构建开发入门开篇:Vue CLI 3 项目构建基础大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的.我之前写过一篇文章,这样评价 Vue.js ...
vue项目手机调试配置
vue开发手机版项目过程中,需要手机调试,网上给的方法有很多, 我的设备是win10电脑 + 安卓手机, 常用两种手机调试本地项目方法:chrome和微信开发者工具. 一.vue-cli2项目中更改配 ...
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools Vue-Devtools 插件是一个 Vue 项目的调试插件 Microsoft Edge 浏览器是 ...
vue项目移动H5的页面调试
移动H5的页面调试 1.eruda 直接在html中外链引入初始化;然后重新运行项目即可看到 <script src="//cdn.bootcdn.net/ajax/libs/erud ...

idea调试vue项目

前言

环境准备

安装代码检查依赖

运行调试

idea调试vue项目相关推荐

最新文章

热门文章