前言
之前尝试的各种前端编辑器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 插件;
3. 禁用原生的代码检验,启用ESlint
1.IDEA/WebStorm->Preferences,先开启Eslint
2.IDEA/WebStorm->Preferences->Editor->Inspections->JavaScript->关闭自身检查只保留ESlint
4.替换IDEA/WebStorm自带的格式化代码(ctrl+alt+L)
在项目根目录 .eslintrc.js 上右键,点击菜单底部 "Apply ESLint Code Style Rule";之后自动格式化就会按照 eslint 的规则
代码编写保存前需要手动执行格式化,否则不符合eslint代码规范的代码无法编译通过。
运行调试
1.点击右上角运行调试窗 Edit Configurations
2. 如图,添加类型为npm的配置;执行脚本内容为dev;这一步等同于用控制台终端手动执行 npm run dev;用于启动node服务器
3.如同,再添加一个JavaScript Debug 类型的配置,用于调试;其中http://localhost:9527 指向页面启动的地址。默认使用Chrome浏览器
4.先运行dev-server 配置(也可以在底部Terminal中运行npm run dev)
好了打上断点,现在可以开始开发调试了。