html編輯軟體有哪些-前端問答-PHP中文網

1. Nuclide" >1. Nuclide

#3. Sublime Text" >#3. Sublime Text

5. Vim 編輯器" >5. Vim 編輯器

6. GNU Emacs 編輯器" >6. GNU Emacs 編輯器

7. Spacemacs 編輯器" >7. Spacemacs 編輯器

9. WebStorm" >9. WebStorm

10. TextMate 編輯器" >10. TextMate 編輯器

首頁

web前端

前端問答

html編輯軟體有哪些

青灯夜游

Mar 30, 2021 pm 02:35 PM

html 程式碼編輯器

html編輯軟體有：Nuclide、Atom、Sublime Text、Visual Studio Code、Vim編輯器、GNU Emacs編輯器、Spacemacs編輯器、Deco IDE、WebStorm、TextMate編輯器等。

html編輯軟體有哪些

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

市面上用來開發工作的編輯器非常多，筆者會常常因為不同的程式語言該如何選擇好用的編輯器而感到糾結。而在隨後從事 React Native 開發工作過程中，對相應的編輯器做了一些探索和研究，本文總結了一些非常適合行動應用開發的編輯器和 IDE。

1. Nuclide

官網： https://nuclide.io/
Github 專案地址：facebook / nuclide(https://github.com/facebook/nuclide)
#文件：
- #設定：https://nuclide.io/docs/editor/setup/
- Nuclide with React Native：https://nuclide.io/docs/platforms/react-native/
支援平台：Windows、Mac、Linux
Licence：開源
功能：
- ##遠端開發
- Developing Hack
- 支援Mercurial
- 工作集

2. Atom

官網： https://atom.io/

Github 專案網址：atom(https://github.com/atom)
文件：
- 設定：http://flight-manual.atom.io/
- Atom with React Native：https://blog.sendbird.com/tutorial-build-a-messaging-app -using-react-native/
支援平台：Windows、Mac、Linux
Licence：開源
特性：
- 跨平台編輯
- 內建套件管理器
- 智慧型自動補全
- 檔案系統瀏覽器
- 多個窗格
- 尋找與取代

Atom 是一款現代化、易用、可控制的文字編輯器。 Atom 被開發人員廣泛應用於多種程式語言。它有一個龐大而活躍的社區，誕生了許多有用的插件。

Atom 常用的套件：

atom-react-native-autocomplete package - 此套件針對 React-Native，為 Atom 編輯器提供自動補全功能。
atom-react-native-css - 這是一個內建支援 SASS、SCSS 的 React-Native 元件的套件。 React-native-css 將有效的 CSS、SASS轉換為 CSS 的 Facebook 子集。
react-native-snippets - 該套件是 Atom和 Nuclide 的 React Native 片段。
zenchat-snippets - 它是react-native、redux 和 ES6 的片段集合。
atom-xcode - 用於整合 Mac Xcode 和 atom。安裝之後，iOS 模擬器可以在 atom 內進行控制。
language-babel - 包含所有 JavaScript 版本的語法，包括 ES2016 和 ESNext、用於 Facebook React 的 JSX 語法、以及 Atom 的 etch。

推薦教學：《html影片教學》

#3. Sublime Text

官網：https://www.sublimetext.com/
Github 專案網址：SublimeText(https://github.com/SublimeText)
#文件：
- 設定：https://www.sublimetext.com/docs/3/
- SublimeText for React Native：https://zaicheng.me/2016/06/20/react- native-initial-setup/
- 為React-JSX 開發設定SublimeText：(http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/)
支援平台：Windows、Mac、Linux
Licence：可以免費下載試用，繼續使用需購買License。
特性：
- Goto Anything 功能
- 多選擇
- 指令終端機
- 分心自由模式
- 分割編輯
- 即時專案開關
- 外掛API
- 可自訂任何東西
- 跨平台
#設定React Native：nitinh.com/2015/02/setting-sublime-text-react-jsx-development/

Sublime Text 是一個複雜的文字編輯器，可用於編寫程式碼、做標記和編寫普通文字。社群提供了大量的插件擴展其功能。 Sublime Text 一直是開發人員最愛的編輯器。

Sublime Text 常用套件

Sublime Text 常用套件

react-native-snippets - 用於react native 的Sublime Text 的片段集合babel-sublime - 具有React JSX 擴充功能的ES6 JavaScript 的語法定義。

4. Visual Studio Code

################

官網：https://code.visualstudio.com/
Github 專案網址：Microsoft/vscode(https://github.com/Microsoft/vscode)
文件：
- 設定：https://code.visualstudio.com/docs
- 使用Visual Studio Code 開發React Native 應用：https://blogs.msdn.microsoft.com /visualstudio/2016/02/22/develop-reactnative-apps-in-visual-studio-code/
支援平台：Windows、Mac、Linux
特性：
- 內建Git 指令
- 可擴充且可自訂

Visual Studio Code 是由Microsoft 為Windows、Linux 和OS X 開發的原始碼編輯器。它是免費且開源的，支援調試、嵌入式 Git 控制項、語法高亮、智慧程式碼補全、程式碼片段和程式碼重構。

擴充功能

ReactNative Tools - 此擴充功能為React Native 專案提供了開發環境。你可以偵錯程式碼，從指令終端快速執行 react-native 指令，並使用 IntelliSense 瀏覽 React Native API 的物件、函數和參數。
Vim編輯器

5. Vim 編輯器

Github 專案網址：vim/vim(https://github.com/vim/vim)
文件：
- #React-JSX 設定Vim：https:// jaxbot.me/articles/setting-up-vim-for-react-js-jsx-02-03-2015
支援平台：Mac、Linux
功能：
- #持久、多層次的撤銷樹
- 廣泛的外掛系統
- 支援數百種程式語言和檔案格式
- 強大的搜尋和取代功能
- 能夠與許多工具整合

Vim是一種高度可配置的文字編輯器，可以非常有效率地建立和變更任何類型的文字。大多數 UNIX 系統都以 “vi” 的形式支援它。許多開發人員喜歡使用 Vim 進行各種編輯工作。 Vim 非常穩定，並且不斷發展而變得更好。

Vim 外掛程式

#vim-jsx - 提供 JSX 的語法高亮與縮排。
vim-react-snippets - 一組為 Vim 打造的可與Facebook 的 React 函式庫一起使用的片段。
vim-babel - 一組為 Vim 打造的可與Facebook 的 React 函式庫一起使用的片段。

6. GNU Emacs 編輯器

官網： https://www.gnu.org/software/emacs/
文件：
- #官方文件：https://www.gnu.org/software/emacs/documentation. html
- 針對React Native 的初始設定：http://www.cyrusinnovation.com/initial-emacs-setup-for-reactreactnative/
License：遵循GPL
支援平台：Windows、Mac、Linux
功能：
- 內容感知編輯模式，包含語法著色，適用於多種檔案類型。
- 完整的內建文檔，包括新手教學。
- 幾乎支援所有腳本語言的 Unicode 編碼。
- 高度可定制，使用 Emacs Lisp 程式碼或圖形介面。
- 具有用於下載和安裝擴充功能的套件系統。

GNU EMACS 是可擴充、可自訂、免費、自由的文字編輯器。

擴充

web-mode.el - 它是一個自主的 emacs 主模組，用於編輯 Web模板。它與許多語言相容，包括 JSX（React）。

7. Spacemacs 編輯器

- ##官網：http://spacemacs.org/
- Github 專案網址：syl20bnr/spacemacs(https://github.com/syl20bnr/spacemacs)

官方文件：http://spacemacs.org/doc/DOCUMENTATION.html

#License：開源

#支援平台：Windows、Mac、 Linux

功能：

密鑰綁定使用助記符前綴進行組織

可發現- 創新的即時顯示可用的鍵綁定。

相似的功能具有與之相同的金鑰

簡單的查詢系統可以快速找到可用的層、套件等。

###社群驅動的配置提供了強大的使用者可調的套件，bug 可快速修復。 ###############Spacemacs 是一個社群驅動的 Emacs 發行版 - 最好的編輯器既不是 Emacs 也不是Vim，它是 Emacs 和 Vim 相結合！ #########擴充功能############React layer - 適用於 React 的 ES6 和 JSX 設定層。它將自動識別 .jsx 和 .react.js 檔案。一個用於 React整合的包層。 ############8. Deco IDE########################

官網：https://www.decosoftware.com/
Github 專案網址：decosoftware/deco-ide(https://github.com/decosoftware/deco-ide)
文件：
- 官方文件：https://www.decosoftware.com/docs
支援平台：Mac（僅適用於iOS )
License：開源
功能：
- #元件搜尋與插入
- 即時調整
- 新檔案支架

Deco 是專為React Native 打造的IDE。它是一個用於編寫 React Native 應用程式的一體化解決方案，無需任何環境設定即可下載和使用。 Deco 專注於元件重複使用，並支援使用者對 UI 的即時編輯，從而改善了React Native 開發工作流程。

9. WebStorm

官網： https://www.jetbrains.com/webstorm/
文件：
官方文件：https://www.jetbrains.com/webstorm/documentation/
- 使用外部工具：https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/
- License：收費（單一使用者第一年需支付129 美元）
- 支援平台：Windows、Mac、Linux
- 功能：
- 智慧編碼協助

#版本控制系統

###無縫工具整合######調試、追蹤與測試#######內建終端機########################################## WebStorm 建立在開源IntelliJ 平台之上，JetBrains 已經開發並完善了15多年。它提供與 VSC、本地歷史功能的緊密整合，具有充滿活力的插件生態系統，是完全可配置的，還提供大量其他的功能。 WebStorm 為 React 和 JSX 提供高級支持，並提供 React Native 應用程式的核心編碼協助。 ###

10. TextMate 編輯器

官網：https ://macromates.com/
文件：
- 官方文件：http://manual.macromates.com/en/
License：收費（單一使用者License 為48.75歐元）
支援平台：Mac
特性：
- 快速概述和導航功能彈出
- 可以把你最喜歡的腳本語言當作插件整合
- 從文件中執行Shell 指令
- 程式碼高亮
- 可與Xcode 協作並建立Xcode 專案