系列文章:
- [【手把手带你撸一个脚手架】第一步, 创建第一个命令](https://www.jianshu.com/p/17384daf707e)
- [【手把手带你撸一个脚手架】第二步, 搭建开发环境](https://www.jianshu.com/p/86553c641bf9)
- [【手把手带你撸一个脚手架】第三步, 获取 github 项目信息](https://www.jianshu.com/p/1c5bcc2856dc)
- [【手把手带你撸一个脚手架】第四步, 通过撸码获取项目信息](https://www.jianshu.com/p/b15ea26e6d0b)
- [【手把手带你撸一个脚手架】第五步, 撸完收工](https://www.jianshu.com/p/1d764b4f22e2)
> 工欲善其事, 必先利其器. 一个好的开发环境能让你事半功倍. 大家一起来, 把刀磨快加油干 ^_^
## 配置 eslint 开启 vscode 自动修复
### 配置 eslint
- 首先, 安装 `eslint`
```shell
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
> 现代的前端开发人员, es6 已经成为了刚需, 然鹅, node 对 es6 并没有完全兼容(到目前为止), 为了全方位使用最新的语法. 我们引入 babel
首先, 安装依赖
```shell
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` 在该文件中粘贴以下内容
```js
{
"presets": ["env"],
"plugins": ["transform-es2015-modules-commonjs"]
}
```
创建入口文件 `index.js` 并粘贴以下内容
```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 文件, 文件内容如下
【【手把手带你撸一个脚手架】第二步|【手把手带你撸一个脚手架】第二步, 搭建开发环境】```js
// index.js
import a from './a';
a.a();
// a.js
export default {
a() {
console.log('12345');
},
};
```
此时执行 `node index.js` 顺利打印出 12345
最后改造 `bin/learn.js` 内容如下:
```js
#!/usr/bin/env node
require('../');
// 执行入口文件
```
此时在命令行中执行 learn
兼容 es6 成功
到目前为止, 我们的开发环境搭建完成. 撒花庆祝 ^_^
下集预告: 下一节, 我们将会对接 [gayhub 公共 api](https://developer.github.com/v3/repos/) 获取项目信息, 有兴趣的小伙伴可以提前预习一哈, 大家玩儿的开心
