【手把手带你撸一个脚手架】第二步, 搭建开发环境

系列文章:

工欲善其事, 必先利其器. 一个好的开发环境能让你事半功倍. 大家一起来, 把刀磨快加油干 ^_^

宝宝们请注意, 由于项目中用到了 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 转码然后还给更改目录), 目前线上跑着的代码地址为 github

现代的前端开发人员, 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.js
import a from './a';
a.a();

// a.js
export default {
  a() {
    console.log('12345');
  },
};

此时执行 node index.js 顺利打印出 12345

最后改造 bin/learn.js 内容如下:

#!/usr/bin/env node
require('../'); // 执行入口文件

此时在命令行中执行 learn

兼容 es6 成功

到目前为止, 我们的开发环境搭建完成. 撒花庆祝 ^_^

下集预告: 下一节, 我们将会对接 gayhub 公共 api 获取项目信息, 有兴趣的小伙伴可以提前预习一哈, 大家玩儿的开心 😄