idea调试vue项⽬
前⾔
之前尝试的各种前端编辑器H5Builder,SublimeText,,NotePad++等等；作为⼀名后端开发，⾃⼰是从Eclipse系列的IDE转向使⽤JetBrain系列，深受InteliJ IDEA的毒害
近期公司的项⽬使⽤VSCode开发。然⽽作为⼤集成的IDEA，更能解决开发过程中的问题，⽆论是代码提⽰、跳转、插件、提⽰等等，还是IDEA更加符合⾃⼰的使⽤习惯。
环境准备
1. 以上
2. 以上
3. 2017.3 以上 / IntelliJ IDEA 2017.3以上
安装代码检查依赖
1. npm 安装全局依赖
npm install -g babel-eslint eslint eslint-plugin- eslint-plugin-vue eslint-plugin-standard eslint-config-standard eslint-plugin-promise
显⽰安装结果
2. WebStorm/IDEA 在Plugin Repository 中安装 Eslint 插件 , Vue.js 插件；
idea debugplugin-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
JavaScriptDebug
4.先运⾏dev-server 配置(也可以在底部Terminal中运⾏npm run dev)
启动npm dev服务器
启动chrome调试
好了打上断点，现在可以开始开发调试了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。