系列文章:
工欲善其事, 必先利其器. 一个好的开发环境能让你事半功倍. 大家一起来, 把刀磨快加油干 ^_^
宝宝们请注意, 由于项目中用到了 async 函数, 所以 node 需要 v7.6.0+ 的版本
配置 eslint 开启 vscode 自动修复
配置 eslint
- 首先, 安装
eslint
npm i eslint -D复制代码
-
其次, 初始化
eslint在项目的根目录下执行./node_modules/.bin/eslint --init -
在命令行提示中选择第一个
Use a popular style guide回车 -
接下来的提示中, 仍然选择第一个
Airbnb, 相对严格 -
Do you use React?写n然后回车. -
配置文件格式选择默认即可
-
设置完配置文件格式以后, eslint 会自动检测依赖这里我们直接回车就可以啦~
-
下一步, 等
-
下一步, 编辑器安装
eslint插件 -
安装完成后重启编辑器, 我们把示例代码行尾的封号去掉后发现编辑器已经标红, 说明 eslint 已经能够正常工作. 配置成功, 是不是心跳蹦蹦迪~
开启 vscode 自动修复
通过上一步的配置我们已经能够让编辑器识别出我们代码中不规范的地方, 但是还不够. 既然编辑器能够识别出错误, 它要是还能修正错误岂不是爽死
-
第一步, 打开 vscode 配置文件
command + , -
第二步, 在功能搜索框中输入
autofix -
第三步, 按照如下图所示的方式配置.
至此, 我们的编辑器已经可以自动修复 eslint 中发现的 代码规范 相关的一些错误啦, 就像下边酱紫.
删除封号以后, 保存编辑器自动把封号给我们加上啦, 开发体验 666, 爽到飞起 ^_^
ps: 至此, vscode 配置自动修复功能完成, 告诉你个秘密, vue react 都可以自动修复的哟, 有兴趣的小伙伴请评论区交流~
兼容 es6
大写的 PS: 以下配置用于普通的 node 项目没有问题, 但是在脚手架项目中会出现时而好用时而不好用的问题, 具体原因我还没有搞清楚. 希望老司机不吝赐教, 评论区, 我等你
目前我的解决方案是, 把 es6 的模块导入规则手动改成了 commonjs 规范(实在不喜欢 babel 转码然后还给更改目录), 目前线上跑着的代码地址为
现代的前端开发人员, es6 已经成为了刚需, 然鹅, node 对 es6 并没有完全兼容(到目前为止), 为了全方位使用最新的语法. 我们引入 babel
首先, 安装依赖
npm i @babel/core@7.1.6 babel-core@^6.26.3 babel-plugin-transform-es2015-modules-commonjs@6.26.2 babel-polyfill@6.26.0 babel-preset-env@1.7.0 babel-preset-latest-node@2.0.2 babel-register@6.26.0 -S复制代码
在项目的根目录中添加 .babelrc 在该文件中粘贴以下内容
{ "presets": ["env"], "plugins": ["transform-es2015-modules-commonjs"]}复制代码 创建入口文件 index.js 并粘贴以下内容
require('babel-register');const babel = require('@babel/core');const babelPresetLatestNode = require('babel-preset-latest-node');babel.transform('code();', { presets: [[babelPresetLatestNode, { target: 'current', }]],});require('babel-polyfill');require('./src');复制代码 创建 src 目录, 并添加 index.js a.js 文件, 文件内容如下
// index.jsimport a from './a';a.a();// a.jsexport default { a() { console.log('12345'); },};复制代码 此时执行 node index.js 顺利打印出 12345
最后改造 bin/learn.js 内容如下:
#!/usr/bin/env noderequire('../'); // 执行入口文件复制代码 此时在命令行中执行 learn
到目前为止, 我们的开发环境搭建完成. 撒花庆祝 ^_^
下集预告: 下一节, 我们将会对接 获取项目信息, 有兴趣的小伙伴可以提前预习一哈, 大家玩儿的开心 ?