適合前端開發人員的最佳 IDE 和文字編輯器

十幾兩年前，網站是用手和常規文字編輯器製作的。編寫您自己的 html 標籤，使用 CSS 中的內聯樣式進行一點魔法，加上有趣的動畫 - 該網站就可以使用了。 如今，創建和開發網站或應用程式是一個結構化的過程。您可以使用網站建立器在一分鐘內建立一個網站，也可以為此苦惱幾個月。隨著 Web 開發的變化，新的框架、插件和應用程式不斷湧現，以簡化編碼。附加工具簡化您的工作環境並提高生產力。我們使用版本控制系統進行協作開源專案管理和 jQuery 等函式庫。開發環境在創建網站的過程中扮演著非常重要的角色。選擇理想的文字處理器可能是一項具有挑戰性但可行的任務，需要應用實證研究。如何不迷失在工具、應用程式和插件的海洋中？您應該為日常工作選擇哪一種文字編輯器，為寵物項目選擇哪一種？我們為初級前端開發人員整理了一份最受歡迎工具的小清單。我們是否忘記在文章中提及您最喜歡的編輯器？留下意見！

記事本++

發布： 2003 年 11 月 24 日。最簡單的文字編輯器，具有語法突出顯示和選項卡。支援多種程式語言和技術。非常適合剛踏上 Web 開發之路的初學者。 可能性：

• 創建書籤；
• 自動複製和保存已建立的文件；
• 標準文本編碼的支援和轉換；
• 使用者可以獨立設定語法高亮規則；
• 安裝各種有用的插件；
• 設定和重新定義熱鍵；
• 拼字檢查和文字加密；
• 玩俄羅斯方塊（以防你厭倦了編碼）；
• 可以管理大量數據。

該編輯器的另一個“功能”被認為是“復活節彩蛋”，其形式是顯示黑暗之父達斯·維德和“仇恨文件夾”之父比爾·蓋茨的名言。 美中不足的是：介面過於簡化，不符合現今的開發標準。它可以比喻為白天手電筒的光。 語法反白： + 自動標籤偵測： + 作業系統相容性： Windows、ReactOS。 免費版本：是的。 連結： https: //notepad-plus-plus.org/download/v7.5.1.html

括號

發布日期： 2014 年 11 月 4 日。Adobe 擁有許多很酷的產品，深受前端開發人員和設計師的喜愛。括號就是其中之一。這個免費、開源、跨平台的編輯器是基於 JavaScript、HTML5 和 CSS3，因此它的工作專門針對這些內容。如果您對 JavaScript 有基本的了解，那麼這就是您應該開始使用的編輯器。因為他將為擴張提供所有必要的工具。該編輯器需要一些改進，但總體而言，它的開發相當活躍，並且在開發人員中很受歡迎。此外，每個用戶都可以進行自己的更改並創建其他擴充功能。 可能性：

• 編輯 JS、CSS 和 HTML 文件的技巧；
• 支援在瀏覽器中即時查看程式碼（即時預覽）；
• 與FTP伺服器同步；
• 支援CSS自動編譯成less檔；
• 提供您在處理文字時可以使用的一系列字體（可以添加它們）；
• 使用版本控制系統 – Git。

2017 年的新版本引入了搜尋記錄、發送和接收不同編碼的文件、使用熱鍵瀏覽編輯歷史記錄、啟用和停用擴充功能以及 Linux 本機選單的功能。 語法反白： + 自動標籤偵測： + 作業系統相容性： macOS、Windows 和 Linux。 免費版本：是的。 連結： http: //brackets.io

昇華

發布： 2008 年 1 月 18 日。跨平台程式碼編輯器和整合開發環境 (IDE)。我們喜歡這個編輯器的速度和易用性，而Coda和TextMate 則半途而廢，並因更新非常不便而令主要用戶群感到失望。 可能性：

• 快速導航檔案、符號和某些程式碼片段（這就是它受到許多用戶喜愛的原因）；
• 輸入字元時語法檢查功能立即生效；
• 使用巨集優化和重複最近的操作；
• 自動儲存代碼，防止遺失；
• 支援各種視覺主題和程式語言；
• 保存常用的關鍵字和程式碼片段；
• 一組現成的 Python 插件；

語法反白： + 自動標籤偵測： + 作業系統相容性： Windows、Mac OS、GNU/Linux。 免費版：是（無功能限制），但審核應用程式後，需要購買許可證。 連結： http: //www.sublimetext.com/3

網路風暴

發佈時間： 2015年。這不是一個普通的文字編輯器，而是一個JavaScript、CSS和HTML的整合開發環境。它的作者是 JetBrains，該公司創建了深受 JavaRush 學生喜愛的 IntelliJ IDEA 環境。WebStorm 是最聰明、最受歡迎的編輯器之一。支援主要框架：AngularJS、React 和 Meteor，用於在 Node.js 上建立應用程式。WebStorm 是一個相當複雜的環境，但同時它對於需要大量擴充和功能的人來說非常有用。 可能性：

• 由於與版本控制系統 Git、GitHub、Mercurial 集成，可以有效地處理不同規模的專案。這使您可以在 IDE 中「提交」檔案、查看變更並解決衝突；
• LiveEdit - 顯示初步更改，無需重新載入頁面（適用於 Google Chrome 瀏覽器）；
• 編輯過程中的程式碼分析；
• 重構和調試 Javascript 和 Node.js 應用程式的程式碼；
• 支援 ECMAScript、TypeScript、CoffeeScript 和 Dart 語言；
• 使用 Node.js Express 範本建立應用程式；
• 使用 Mocha、Karma 和 Protractor 等框架進行啟動和調試。您可以在編輯器本身或方便的樹形選單中對其進行測試，從中您可以快速返回文字；
• 完全支援LESS、Sass、SCSS、Stylus預處理器；
• 在終端機視窗中快速搜尋；
• 建構涉及多個 Javascript 庫的專案；
• 支援 JQuery、YUI、Prototype、DoJo、MooTools、Qooxdoo 和 Bindows；
• 初步支援並使用 Angular 2。

語法反白： + 自動標籤偵測： + 作業系統相容性： Windows、Mac OS、GNU/Linux。 免費版：有30天的試用版，之後您需要購買授權。 連結： http: //www.jetbrains.com/webstorm/

原子

發佈： 2014 年 2 月 26 日。由大家最愛的Github的作者創建的免費開源軟體。它基於 50 個模組構建，並使用 Node JS、CoffeeScript、CSS、HTML 和 C++ 編寫。您還可以開發自己的模組並將其發佈到儲存庫中以供開放存取。該開發環境非常易於使用，附加插件有助於擴展使用它的可能性。 可能性：

• 使用 GUI 進行配置而不是 json 文件；
• 查看程式碼及其片段的小地圖；
• 按項目和文件快速搜尋；
• 方便的側邊欄和文件樹；
• Github 上提供了大量的擴充；
• Emmet、Autoprefixer、Livereload 支援；
• 透過側邊欄樹查看文件；
• 能夠根據個人用戶偏好自訂編輯器；
• 存在內建檔案管理器；
• 無需安裝帶有插件的控制包，使用圖形使用者介面就足夠了；
• 支援用 Node.js 編寫的插件；
• 直接在編輯器中預覽 PNG、JPEG 影像；
• 提供與 Git 版本控制系統的配合。

美中不足的是它需要大量記憶體並且無法處理大數據檔案。 語法反白： + 自動標籤偵測： + 作業系統相容性： Windows 7、8、Mac OS 10.8、Linux。 免費版本：是的。 連結： https: //atom.io

維姆

發佈時間： 1991 年 11 月 2 日。你可能會問：老 Vim 在現代編輯器清單中忘了什麼？事實上，Vim 是一個完全現代且功能強大的文字編輯器，是在舊 vi 的基礎上創建的，可在 UNIX 作業系統上使用。而且它在不斷發展。開發人員幾乎每年都會進行更改，添加新的插件和附加元件。上一次發生這種情況是在 2016 年，擴展的數量和速度確實令人驚嘆，值得一看。Vim 是一個多模式編輯器。您可以同時使用多種方式進行工作：命令、插入或視覺。然而，值得考慮的是，對於新手開發人員來說，這相當複雜。儘管具有多年經驗的專家並不了解其許多功能。 可能性：

• 支援標準文字編碼；
• 您可以同時處理多個文件；
• 自動辨識並轉換文件；
• 與 Perl、Tcl、Python 和 Ruby 程式語言相容；
• 為每個使用者的需求創造舒適的設定；
• 記錄和執行巨集；
• 視覺模式可以執行許多有用的功能（例如，突出顯示文字區塊）；
• 支援從右到左書寫的非標準語言（如阿拉伯語或希伯來語）；
• 方便的搜尋詞和命令歷史設定；
• 支援完全使用鍵盤而不使用滑鼠；
• 在處理大檔案時表現出驚人的效能。

語法突出顯示： + 自動標籤檢測： + 作業系統相容性： Windows、DOS、Linux、BSD 和Mac OS、iOS、Android、AmigaOS、Atari MiNT、BeOS、NextStep、OS/2、OSF、RISC OS、SGI、 VMS。 免費版本：是的。 連結： https: //vim.sourceforge.io/download.php

網豆

發佈時間： 1997 年。免費、開源 IDE，由 Oracle 贊助並得到熱情開發人員的支持。它不斷地被開發和補充各種擴展，以提高便利性和速度。 可能性：

• 視窗和儲存管理；
• 介面和設計變更（包括選單和彈出視窗）；
• 建立與遠端伺服器的連線；
• 可以進行程式碼重構；
• 有附加元件、模板和程式碼產生器；
• 支援多種程式語言；
• 自動語法檢查和糾正；
• 客製化編輯器以滿足使用者的需求；
• 啟動和調試 JavaScript 和 Node.JS 應用程式；
• 支援 PHP 框架（Symfony、Zend 和 Yii）。

美中不足的是：它消耗大量記憶體。 語法反白： + 自動標記偵測： + 作業系統相容性： Microsoft Windows、Linux、FreeBSD、Mac OS X、OpenSolaris 和 Solaris。 免費版本：是的。只是它是免費的。 連結： https: //netbeans.org

硬派獎勵：記事本，又稱“記事本”

發佈時間： 1985 年，與 Windows 1.0 一起發布。是的，是的，預設安裝在所有 Windows 電腦上的同一個記事本。「這個古老的東西在這裡被遺忘了？這與發展有什麼關係？」你問。事實上，我們知道今天任何人都不太可能在經典記事本中創造任何嚴肅的東西。然而，正是在這個程式中，許多新手開發人員在過去的 15-20 年裡「組裝」了他們的第一個網站並編寫了他們的第一個程式。 我們的意思是，如果你想學習，沒有什麼可以阻止你。對於真正的開發人員（以及想成為開發人員的人）來說，記事本並不是障礙。 特點：只有黑文，只有硬核。 美中不足：沒有美中不足：「記事本」在極簡主義方面堪稱完美！ 語法高亮：沒有。訓練你的記憶力！ 自動標籤偵測：哇！ 免費版本：記事本與 Windows 一樣免費。