生成前端代碼的一些工具介紹
在前端開發的過程中，很多相同的代碼會寫很多遍。如：開始新項目的時候，要寫和舊項目類似腳手架代碼；新建一個組件的時候，要按約定寫組件結構。如果這些重複代碼能用工具來生成，能提升前端的開發效率。
生成代碼的工具分爲兩類：基於命令的和基於圖像界面的。
基於命令的工具的優點是，可配置高，效率快。缺點是，可發現性差。適合配置項目很多，配置可以組合的情況。
基於圖像界面的優點是，可發現性強，操作簡單。缺點是如果配置項很多，容易變得很難用。
羅嗦了一堆，下面開始介紹正題。
項目腳手架代碼生成工具
項目腳手架主要做的項目的構建流程，環境的配置等。做到開箱即用。
基於命令的
- yo 曾經流行過的一個腳手架生成工具。支持定義腳手架內容。基於 yo 的第三方腳手架也很多。
- vue-cli 。 Vue 項目腳手架。支持自定義腳手架內容，感興趣的可以讀讀 從vue-cli源碼學習如何寫模板。
- create react app React 腳手架。比較輕量級，只是整合 webpack 和 react-router。
- react boilerplate React 腳手架。比較重量級，整合了webpack 和 react router, redux, redux suga, reselect 等。
基於圖形界面的
組件代碼生成工具
基於命令的
- react boilerplate 的
nam run generate可生成組件的腳手架代碼。
頁面代碼生成工具
基於命令的
- 代碼編輯器的代碼片段(Code Snippent)功能。主流的代碼編輯器(Sublime,Atom,VS Code，Web Strom等) 都支持代碼片段。也有寫好的代碼片段的編輯器插件。主流的框架基本都有對應的代碼片段工具。
- Emmet 提供 HTML，CSS，JS 的自動補全功能。
- Bootstrap 3 Snippets
- Vuejs Snippets