系列文章:
- 【手把手帶你擼一個腳手架】第一步, 建立第一個命令
- 【手把手帶你擼一個腳手架】第二步, 搭建開發環境
- 【手把手帶你擼一個腳手架】第三步, 獲取 github 專案資訊
- 【手把手帶你擼一個腳手架】第四步, 通過擼碼獲取專案資訊
- 【手把手帶你擼一個腳手架】第五步, 擼完收工
工欲善其事, 必先利其器. 一個好的開發環境能讓你事半功倍. 大家一起來, 把刀磨快加油幹 ^_^
寶寶們請注意, 由於專案中用到了 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
到目前為止, 我們的開發環境搭建完成. 撒花慶祝 ^_^
下集預告: 下一節, 我們將會對接 gayhub 公共 api 獲取專案資訊, 有興趣的小夥伴可以提前預習一哈, 大家玩兒的開心 ?
