前言

之前尝试的各种前端编辑器H5Builder,SublimeText,VSCode,NotePad++等等；作为一名后端开发，对比微软的VSCode和JetBrain系列的IDEA，个人比较习惯使用后者。

近期公司的项目使用VSCode开发，我觉得VSCode作为一个超级编辑器，功能确实十分强大，并不是专业的IDE。所以我认为Intellij IDEA 更能解决开发过程中的问题，无论是代码提示、跳转、插件、生态等等，还是IDEA更加符合自己的使用习惯。

环境准备

所需要的最低版本

1. nodejs v8.x.x

2. npm v5.x.x

3. WebStorm 2017.3 或IntelliJ IDEA 2017.3

安装代码检查依赖

1. npm 安装全局依赖，参考以下脚本指令（推荐全局安装，也可以将IDEA中的module环境切换到当前项目，在当前项目的package.json中安装）

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服务器

5.运行debug 配置，此时会单独启动一个与IDEA连接的Chrome浏览器；Chrome中的控制台信息将会直接打印在IDEA的Console中。

启动chrome调试

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

断点调试