# 開發工具介紹

###### tags: `新尖兵`

actualizado en el **dos** de **noviembre** de 2021

- 本文件的分享網址是 [https://reurl.cc/WXN7dy](https://reurl.cc/WXN7dy)
- HTML/CSS 課程的參考資料短網址是 [https://reurl.cc/Q69kd9](https://reurl.cc/Q69kd9)
- Python 課程參考資料的短網址是 [https://reurl.cc/dxXL1D](https://reurl.cc/dxXL1D)
- HTML/CSS & Python 應用課程的[程式碼壓縮檔](https://drive.google.com/drive/folders/13O-WKC_HBEyKqCh1ZOGvnGSMuJ5vjrXW?usp=sharing) ( [https://reurl.cc/DZgQ1E](https://reurl.cc/DZgQ1E) )

---
目錄：

[toc]

祝大家在學習的過程中<font color='firebrick'>**快樂**</font>**順利**。

-------------

## 文字編輯器及整合開發環境

- [VSCODE](https://code.visualstudio.com/)
- [Sublime Text](https://www.sublimetext.com/download)
- [PyCharm](https://www.jetbrains.com/pycharm/)
- [Atom](https://atom.io/)
- [vim](https://www.vim.org)

### Kite

- [自動補全程式碼的專業工具](https://www.kite.com/)

### VSCODE Extensions

- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) （推薦使用）
- [Open in browser](https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser) （推薦使用）
- [Sublime Text Keymap and Settings Importer](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings)
- [Code Runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner) (特別適合 Python 開發者使用)
- [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv) （瀏覽 csv 檔案的工具）
- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
- [Bracket pair colorization 10,000x faster](https://code.visualstudio.com/blogs/2021/09/29/bracket-pair-colorization)
- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
- [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
- [Live Servre](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- [Live Saas Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
- [6 Awesome CSS Extensions for VS Code](https://www.digitalocean.com/community/posts/6-awesome-css-extensions-for-vs-code)
- <font color='firebrick'>Strongly Recommended： 在Sublime/VSCODE 中快速輸入HTML /CSS指令的</font> [Emmet 鍵盤指令速查表](https://docs.emmet.io/cheat-sheet/)
- [Useful VS Code Extensions For Front-End Developers](https://ithelp.ithome.com.tw/articles/10156314)
- [javaScript in Visual Studio Code](https://code.visualstudio.com/docs/languages/javascript)
- [vscode extension: jQuery Code Snippets by Don Jayamanne](https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets)
- [vscode-icon](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
- [SQLite Plugin](https://marketplace.visualstudio.com/items?itemName=alexcvzz.vscode-sqlite)
- [CodeSnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
- [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)

### Atom
- [hydrogen](https://atom.io/packages/hydrogen) ([Installation](https://nteract.gitbooks.io/hydrogen/content/docs/Installation.html))
- [atom-python-run](https://atom.io/packages/atom-python-run)
- [busy signal](https://atom.io/packages/busy-signal)
- [vim mode plus](https://atom.io/packages/vim-mode-plus)
- [ex-mode](https://atom.io/packages/ex-mode)
- [atm-live-server](https://atom.io/packages/atom-live-server)
- [emmet](https://atom.io/packages/emmet)
- [pigments](https://atom.io/packages/pigments)
- [atm-html-preview](https://atom.io/packages/atom-html-preview)
- [color-picker](https://atom.io/packages/color-picker)
- [atom beautify](https://atom.io/packages/atom-beautify)
- [highlight-selected](https://atom.io/packages/highlight-selected)
- [open-in-browser](https://atom.io/packages/open-in-browser)
- [autoclose-html](https://atom.io/packages/autoclose-html)

### Sublime Packages

- [AutoFileName](https://packagecontrol.io/packages/AutoFileName)
- [Rainbow CSV](https://packagecontrol.io/packages/rainbow_csv)
- [Sublime Text 3 推薦安裝的套件](https://www.webdesigns.com.tw/sublime-text3-2.asp)
- [sublime text package: jQuey](https://packagecontrol.io/packages/jQuery)

## Web Based Tools

### Python Developer
- [Jupyter Home](https://jupyter.org/)
- [binder](https://mybinder.org/)
- [Google Colab](https://colab.research.google.com/)

### FrontEnd Developer

#### CodePen

- [codepen.io](https://codepen.io/)
- [Codepen Project - 完整的線上編輯器](https://ithelp.ithome.com.tw/articles/10203414)
- [十分鐘快速入門上手 CodePen（有中文翻譯）](https://hsiangfeng.github.io/other/20201020/1425713503/)
- [CodePen Is a Nearly Perfect Place for Kids to Learn to Code](https://medium.com/young-coder/codepen-is-a-nearly-perfect-place-for-kids-to-learn-to-code-ed0a855d6fdd)
- [YouTube Video: Learn to use CodePen from a co-founder of CodePen](https://www.youtube.com/watch?v=vb9uYBtqmeM)
- [YouTube Video: Intro to Codepen - 2020](https://www.youtube.com/watch?v=K7OjHORWRqo)

#### Other JS Online Environments

- [codesandbox](https://codesandbox.io/)
- [JSFiddle](https://jsfiddle.net/)
- [JS Bin](https://jsbin.com/)

## 圖床管理 （圖牀不是 picture bed，是 image hosting service）

注意：以下兩個工具的用途是上傳圖片，以及快速取得圖片的網址，不是網路儲存服務的供應商。像 [imgur](https://imgur.com/) 或是 GitHub 才是我們認知的圖床本身。

- [Mac: uPic](https://github.com/gee1k/uPic)
- [Windows/Mac: PicGo](https://github.com/Molunerfinn/PicGo)

## node.js \& npm 套件管理工具

- [node.js (繁體中文主頁)](https://nodejs.org/zh-tw/)
- [node.js (en)](https://nodejs.org/en/)
- [安裝](https://nodejs.org/zh-tw/download/) --》 推薦用官網下載的安裝程式來安裝 node.js / npm
- [使用套件管理器安裝 Node.js](https://nodejs.org/zh-tw/download/package-manager/)
- [Downloads (en)](https://nodejs.org/en/download/) 英文版頁面
- [在 Windows 上安裝 NodeJS](https://docs.microsoft.com/zh-tw/windows/dev-environment/javascript/nodejs-on-windows)
- [Node.js 系列學習日誌 #2 - 安裝配置與 npm 包管理器](https://ithelp.ithome.com.tw/articles/10157347)
- [微軟教學課程：適用於初學者的 Node.js](https://docs.microsoft.com/zh-tw/windows/dev-environment/javascript/nodejs-beginners-tutorial)
- [Install NPM using Chocolatey on Windows](https://vocon-it.com/2019/11/19/install-npm-using-chocolatey-on-windows/)
- [npmjs](https://www.npmjs.com/) 搜尋 npm 套件
- [npm 套件管理工具](https://andy6804tw.github.io/2017/12/14/npm-tutorial/)
- [npm 入門到進階: 常用指令與版本規則教學](https://linyencheng.github.io/2020/03/22/tool-npm/)
- [NPM（Node Package Manager） 常用指令](https://medium.com/web-design-zone/%E5%B8%B8%E7%94%A8npm-%E6%8C%87%E4%BB%A4-8b2ffe556d1d)

## 版本管理工具

- [Git Download](https://git-scm.com/downloads)
- [GitHub](https://github.com/)
- [SourceTree](https://www.sourcetreeapp.com/)
- [GitHub Desktop](https://desktop.github.com/)
- [GitKaren](https://www.gitkraken.com/)

## 資料庫

- [DBeaver COmmunity](https://dbeaver.io/)
- [DB Browser for SQLite](https://sqlitebrowser.org/)
- [MySQL Community Server Download](https://dev.mysql.com/downloads/mysql/)
- [MySQL Workbench Download](https://dev.mysql.com/downloads/workbench/)
- [MySQL Connector/Python Developer Guide](https://dev.mysql.com/doc/connector-python/en)
- [mysql-connector-python](https://pypi.org/project/mysql-connector-python/)
- [Node.js MySQL](https://www.w3schools.com/nodejs/nodejs_mysql.asp)
- [express.js](https://expressjs.com/)
- [MDN: Express/Node introduction](https://developer.mozilla.org/zh-TW/docs/Learn/Server-side/Express_Nodejs/Introduction)
- [express.js: 使用中介軟體](https://expressjs.com/zh-tw/guide/using-middleware.html)
- [Node.js+Express 安裝設置與簡單實作](https://medium.com/@charming_rust_oyster_221/node-js-express-%E5%AE%89%E8%A3%9D%E8%A8%AD%E7%BD%AE%E8%88%87%E7%B0%A1%E5%96%AE%E5%AF%A6%E4%BD%9C-5920e1d70d9d)
- [mysqljs](https://github.com/mysqljs/mysql)
- [vscode extension: REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
- [GitHub](https://github.com/Huachao/vscode-restclient)
- [使用 Rest Client 來測試 api VS Code 擴充套件](https://www.gss.com.tw/blog/%E4%BD%BF%E7%94%A8-rest-client-%E4%BE%86%E6%B8%AC%E8%A9%A6-api-vs-code%E6%93%B4%E5%85%85%E5%A5%97%E4%BB%B6)
- [Download Postman](https://www.postman.com/downloads/)
- [MongoDB Home:](https://www.mongodb.com/)
- [MongoDB Community Download](https://www.mongodb.com/try/download/community)
- [Install MongoDB Community Edition](https://docs.mongodb.com/v4.0/administration/install-community/)
- [Install MongoDB Community Edition on Windows](https://docs.mongodb.com/v4.0/tutorial/install-mongodb-on-windows/)
- [How to Use Python with MongoDB](https://www.mongodb.com/languages/python)
- [W3School: Python and Mongo](https://www.w3schools.com/python/python_mongodb_getstarted.asp)
- [pymongo](https://pypi.org/project/pymongo/)
- [Mongoose.js](https://mongoosejs.com/)

## 其他工具（終端機等）

- [iTerm](https://iterm2.com/)
- [Hyper](https://hyper.is/)
- [Cmder](https://cmder.net/)
- [HomeBrew (Mac Only)](https://brew.sh/)
- [curl Download](https://curl.se/download.html)
- [curl for Mac](https://curl.se/download.html#MacOSX)
- [curl for windows](https://curl.se/windows/)