事情是這樣子的 🧐
最近試著用 JavaScript 寫 LeetCode ，每解開一個問題預計會產出題目的解答、解答的測試案例、解答的筆記並且將這些檔案的連結寫入專案的描述裡，一共 1 個資料夾加上 5 個檔案，如下圖所示：
+-- src/
| +-- easy/
+ | +-- 0001-two-sum/
+ | +-- index.js
+ | +-- README.md
+ | +-- index.js
+-- __tests__/
| +-- easy/
+ | +-- 0001-two-sum.test.js
+ +-- README.md- src/easy/0001-two-sum/index.js 題目的解答
- src/easy/0001-two-sum/README.md 解答的筆記
- src/easy/index.js 給測試案例使用的解答共同的出口
- tests/easy/0001-two-sum.test.js 解答的測試案例，確保解答符合需求
- README.md 專案的描述，當有新解答時描述最底下的表格應跟著新增一筆
連結上是每次要開始新的一題需要先準備好的檔案內容，真的非常枯燥又繁瑣，有時候還會漏了某個檔案，尤其是加入新的專案描述…這時候就會像面對考試時會突然覺得桌面的髒亂到不馬上整理不行，我也突然產生了一股不想辦法解決這些重複性高的工作不行的使命感…
教練我只想寫 Code 😭
在想要怎麼達成這個使命時，想到 Angular CLI 協助開發的體驗挺好的！只要在指令列輸入 ng g c new-cmp 就會幫你把新的檔案建立好，並且連 import module 等等的語法都寫好了！
稍微看一下 Angular CLI 的程式碼後發現，其實是透過 NodeJS 產生檔案，再來只需要像印出九九乘法表把內容組一組輸出成檔案就好了！
透過 JavaScript 產生程式碼片段 🤩
只要知道底下 2 件事即可產生任何客製化的程式碼片段：
- 要在瀏覽器外執行 JavaScript 可以透過 node index.js 在 NodeJS 上執行
- 使用 NodeJS 的 File System API 產生檔案
首先試著產生一個 hello world 的文字檔
const fs = require('fs')
fs.writeFileSync('./helloWorld.txt', 'hello world', 'utf8')
再來把前面提過九九乘法表在 markdown 上實作一次吧！
markdown 的表格欄位如果變多了寫起來很容易少寫或多寫，所以能透過程式自動產生是最理想的 😍
const fs = require('fs')
let contents = ''
for (let i = 1; i <= 9; i++) {
let row = []
for (let j = 1; j <= 9; j++) {
row.push(`${i} x ${j} = ${i * j}`)
}
contents += `|${row.join('|')}|\n`
}
const table =
`||||||||||
| :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
${contents}
`
fs.writeFileSync('./nine-nine-table.md', table, 'utf8')
最後加入一些套件，玩點有趣的花式操作 🌈，執行後詢問使用者問題並將回覆結果做成 JavaScript Object 的格式寫入檔案 ans.js
- npm init 初始化 package.json
- npm i --save-dev colors inquirer 安裝套件
- JavaScript only !
const fs = require('fs')
const inquirer = require('inquirer')
const colors = require('colors')
const NAME_QUIZ = {
type: 'input',
name: 'name',
message: 'Please enter your name',
}
const GENDER_QUIZ = {
type: 'list',
name: 'gender',
message: 'Please choose your gender',
choices: [ 'Male', 'Female', 'None']
}
const getExporterContent = ans =>
`const ans = ${JSON.stringify(ans, null, 2).replace(/"/g, '\'')}
export default ans
`
const ask = async () => {
console.log(colors.bgCyan(' Start '), 'asking question 👇')
const ans = await inquirer.prompt([NAME_QUIZ, GENDER_QUIZ])
fs.writeFileSync('./ans.js', getExporterContent(ans), 'utf8')
console.log(colors.bgCyan(' END '), 'Thanks for your replied 👆')
}
ask()
化繁為簡後 ✨
現在來看看，能自動產生程式碼片段後，寫 LeetCode 前要準備好那些檔案變得多麽的輕鬆 🎉
https://www.youtube.com/watch?v=j5XeZQNUx2E
加入提問來決定產生的內容，有 3 個原因：
- 驗證資料格式、避免輸入錯誤資訊，結果檔案已經被產生出來
- 內容太多了，問題的長度如果太長，整行指令看起來很不方便
- 一段時間沒開發後可能已經不記得參數要放什麼了
👉 影片中產生檔案的主程式碼
結尾 🏁
好了！這下子我終於可以心無旁騖專心地 LeetCode 了！除非桌面又開始令人感到凌亂不堪 😏
希望這篇文章可以協助你打造自己的程式碼片段，把重複性高的工作透過熟悉的 JavaScript 整理後自動產生提高作業的生產力與專注力，並且降低出錯與遺漏的機率，如果有對這篇文章有任何建議或疑問歡迎在底下留言與分享，謝謝 🙌