作者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/cn.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