作者sky810684 (sky172839465)
看板Soft_Job
標題[心得] JavaScript 產生你的程式碼片段
時間Fri Jun 7 09:33:53 2019
各位 端午節快樂！
趁著放假寫了篇有趣的心得，最近用 JS 刷 LeetCode ，同時想加上測試與筆記，
可是要一個個手動加上去很麻煩啊！所以這篇文章就誕生了！
Medium：
https://medium.com/yusong-blog/9a74ca06a7d5
事情是這樣子的
最近試著用 JavaScript 寫 LeetCode ，每解開一個問題預計會產出
題目的解答、解答的測試案例、解答的筆記並且將這些檔案的連結寫入專案的描述裡，
一共 1 個資料夾加上 5 個檔案，如連結所示：
https://yusong.page.link/leetcode-in-js-structure
1. src/easy/0001-two-sum/index.js 題目的解答
2. src/easy/0001-two-sum/README.md 解答的筆記
3. src/easy/index.js 給測試案例使用的解答共同的出口
4. __tests__/easy/0001-two-sum.test.js 解答的測試案例，確保解答符合需求
5. README.md 專案的描述，當有新解答時描述最底下的表格應跟著新增一筆
連結上是每次要開始新的一題需要先準備好的檔案內容，真的非常枯燥又繁瑣，
有時候還會漏了某個檔案，尤其是加入新的專案描述…
這時候就會像面對考試時會突然覺得桌面的髒亂到不馬上整理不行，
我也突然產生了一股不想辦法解決這些重複性高的工作不行的使命感…
教練我只想寫 Code
在想要怎麼達成這個使命時，想到 Angular CLI 協助開發的體驗挺好的！
只要在指令列輸入 ng g c new-cmp 就會幫你把新的檔案建立好，
並且連 import module 等等的語法都寫好了！
稍微看一下 Angular CLI 的程式碼後發現，其實是透過 NodeJS 產生檔案，
再來只需要像印出九九乘法表把內容組一組輸出成檔案就好了！
透過 JavaScript 產生程式碼片段
只要知道底下 2 件事即可產生任何客製化的程式碼片段：
1. 要在瀏覽器外執行 JavaScript 可以透過 node index.js 在 NodeJS 上執行
2. 使用 NodeJS 的 File System API 產生檔案
首先試著產生一個 hello world 的文字檔
https://yusong.page.link/generate-hello-world-in-js
再來把前面提過九九乘法表在 markdown 上實作一次吧！
markdown 的表格欄位如果變多了寫起來很容易少寫或多寫，
所以能透過程式自動產生是最理想的
https://yusong.page.link/generate-nine-nine-table-in-js
最後加入一些套件，玩點有趣的花式操作 ，執行後詢問使用者問題並將
回覆結果做成 JavaScript Object 的格式寫入檔案 ans.js
1. npm init 初始化 package.json
2. npm i --save-dev colors inquirer 安裝套件
3. JavaScript only !
https://yusong.page.link/generate-complex-file-in-js
colors：讓執行過程中印在終端機上的 console.log 加上不同色彩
Inquirer：可以寫入問題讓使用者填寫、選擇答案、驗證回答、修改內容…etc
化繁為簡後
現在來看看，能自動產生程式碼片段後，
寫 LeetCode 前要準備好那些檔案變得多麽的輕鬆
https://youtu.be/j5XeZQNUx2E
加入提問來決定產生的內容，有 3 個原因：
1. 驗證資料格式、避免輸入錯誤資訊，結果檔案已經被產生出來
2. 內容太多了，問題的長度如果太長，整行指令看起來很不方便
3. 一段時間沒開發後可能已經不記得參數要放什麼了
結尾
好了！這下子我終於可以心無旁騖專心地 LeetCode 了！
除非桌面又開始令人感到凌亂不堪
希望這篇文章可以讓你把重複性高的工作透過熟悉的 JavaScript
整理後自動產生提高作業的生產力與專注力，並且降低出錯與遺漏的機率，
如果有對這篇文章有任何建議或疑問歡迎在底下留言與分享，謝謝
-----
Sent from JPTT on my iPad
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.33.19.17 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Soft_Job/M.1559871236.A.BE0.html
※ 編輯: sky810684 (114.33.19.17 臺灣), 06/07/2019 09:54:37
1F：→ chuegou: ？06/07 10:07
※ 編輯: sky810684 (223.138.124.238 臺灣), 06/07/2019 10:32:57
2F：→ sky810684: 沒有編輯好內文，被截掉了XD06/07 10:33
3F：推 king22649: vscode snippet?06/07 10:58
4F：噓 pig2014: 題目也沒多複雜，要刷不會用cpp嗎06/07 13:22
5F：推 CaptainH: js社群的水準真是從來不讓人失望06/07 14:15
6F：→ loadingN: 看到別人用ptt發medium 我就pass了06/07 15:16
7F：推 jack42107: 感謝分享 願意分享就是推06/07 15:34
8F：→ iven00000000: 可能是面試需求吧，我面試寫python自然就用python06/07 17:17
9F：→ iven00000000: 練 06/07 17:17
10F：推 lightyen: snippet +106/07 18:16
11F：→ sky810684: vscode 的 snippet 是針對目前的檔案所以不太夠用，需06/07 21:07
12F：→ sky810684: 求中同時有好幾個檔案需要新的程式碼片段或是更新甚至06/07 21:07
13F：→ sky810684: 移除，這樣還是需要一個個手動操作06/07 21:07
14F：推 xxxorc: 若要推廣的建議話要包成 command line binary 吧06/07 22:37
15F：→ xxxorc: 然後推到 npm 上, 這樣就很好安裝06/07 22:37
16F：→ xxxorc: 不懂這跟 js 社群有什麼關係, 樓主是應該把內文直接貼上來06/07 22:38
17F：推 xxxorc: 分享就給推 不然這個版也沒什麼有趣的東西06/07 22:42
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/07/2019 23:08:31
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/07/2019 23:28:07
18F：→ sky810684: 感謝提醒，沒有注意到貼連結要附上內文，這個心得只是 06/07 23:37
19F：→ sky810684: 希望不知道能這樣用 NodeJS 的人可以多一些選擇，然後06/07 23:37
20F：→ sky810684: 自己寫自己客製化的程式碼片段，所以沒必要放到 npm 上06/07 23:37
21F：→ sky810684: 面 XD06/07 23:37
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/07/2019 23:38:40
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/08/2019 00:11:13
22F：推 mepowerlmay: 產生器不是比較好？ 06/08 01:42
內文有說明同時有好幾個檔案，還需要更新現有的程式碼，用產生器會少掉一些客製化的彈性
23F：推 WashFreeID: 覺得直接用vscode的leetcode套件會方便很多 06/08 12:02
因為想留下解題的紀錄，不只是刷題，所以才會這樣做
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/08/2019 16:37:49
※ 編輯: sky810684 (122.121.12.100 臺灣), 06/08/2019 16:39:18