值得新手關(guān)注的十大優(yōu)秀CSS編輯器
譯文【51CTO.com快譯】作為一種簡(jiǎn)單的語(yǔ)言，CSS雖然能夠在不需要特殊編輯器的情況下，即可完成代碼的編寫(xiě)，但是不可否認(rèn)的是：如果擁有合適的代碼編輯器，開(kāi)發(fā)者將能夠在編寫(xiě)CSS代碼時(shí)，將錯(cuò)誤最小化，并在總體上提高自身的效率。
在實(shí)際工作中，我們往往能夠看到：一些資深的開(kāi)發(fā)人員擁有著自己的一套得心應(yīng)手的工具譜。通過(guò)各種高效的代碼編輯器，他們能夠靈活地適用于不同的需求和項(xiàng)目場(chǎng)景。當(dāng)然，如果您是一名剛?cè)胄械摹⒒蚴浅跎鍯SS的新手的話，我們將在此為您重點(diǎn)介紹幾種具有出色功能的優(yōu)秀代碼編輯器。在它們之中，有的屬于免費(fèi)，而有的屬于付費(fèi)?？偟膩?lái)說(shuō)，這些工具各有各的特點(diǎn)和適用場(chǎng)景。事不宜遲，下面就讓我們開(kāi)始逐一了解吧。
和我們將要在下面介紹的其他代碼編輯器相比，Visual Studio Code是一個(gè)相對(duì)較新的代碼編輯器。不過(guò)，目前它已迅速成為了最受歡迎的代碼編輯器之一，尤其是在Web開(kāi)發(fā)人員圈內(nèi)。
Visual Studio Code具有針對(duì)多種語(yǔ)言的大量語(yǔ)法突出顯示功能，其中包括諸如：SCSS和LESS等CSS和CSS預(yù)處理器(Pre-processors)。與此同時(shí)，CSS IntelliSense、CSS Peek和CSS Modules等擴(kuò)展模塊也會(huì)憑借著使用CSS，而變得更加強(qiáng)大。
- 兼容性：Windows、macOS和Linux。
- 特殊功能：能夠方便開(kāi)發(fā)人員快速地上手。它不但可與Gulp和Grunt等許多語(yǔ)言和工具一起使用，并且具有大量的擴(kuò)展模塊。
macOS中的Visual Studio代碼
作為一個(gè)免費(fèi)的源代碼編輯器，Notepad++被認(rèn)為是Windows“記事本”的替代品。它不但簡(jiǎn)單、運(yùn)行快速，并且支持CSS等多種語(yǔ)言。在編寫(xiě)CSS時(shí)，它可以給開(kāi)發(fā)者提供Word補(bǔ)全、函數(shù)補(bǔ)全、以及函數(shù)參數(shù)提示之類(lèi)的服務(wù)，以提高整體的工作效率。
- 兼容性： Windows。
- 特殊功能：語(yǔ)法突出顯示與折疊、宏記錄和回放、以及文檔結(jié)構(gòu)圖。
Notepad++的界面
3.WebStorm
WebStorm是Jetbrains公司旗下一款JavaScript開(kāi)發(fā)工具。JetBrain的IDE可以對(duì)包括CSS在內(nèi)的所有內(nèi)容，實(shí)現(xiàn)正確的自動(dòng)化完成功能，以方便您隨時(shí)獲悉有關(guān)CSS問(wèn)題的提示。通過(guò)與Stylelint之類(lèi)工具進(jìn)行“開(kāi)箱即用”式地集成，WebStorm也可以幫助您格式化、并保持CSS代碼的一致性。
- 兼容性：Windows、macOS和Linux。
- 特殊功能：能夠與諸如Stylelint、Grunt、Gulp、以及NPM等Web開(kāi)發(fā)工具無(wú)縫集成。可被內(nèi)置于各種工具中，實(shí)現(xiàn)調(diào)試、跟蹤、以及智能化的自動(dòng)完成等功能。
4.Coda
Coda是一種具有內(nèi)置CSS編輯器的高級(jí)代碼編輯器。通過(guò)為您提供兩種CSS編輯模式，它可以為開(kāi)發(fā)者提供更加靈活的設(shè)計(jì)體驗(yàn)，并能夠在代碼被更改之后立即展示結(jié)果。值得一提的是，您還可以在編輯器的實(shí)時(shí)預(yù)覽(Live Preview)工具中覆蓋某個(gè)網(wǎng)站的CSS。
- 兼容性：macOS。
- 特殊功能：通過(guò)與TouchBar集成，提供實(shí)時(shí)的預(yù)覽、以及內(nèi)置的SFTP/FTP。
5.Atom
Atom是由Github構(gòu)建的免費(fèi)開(kāi)源的編輯器。它不僅僅具有代碼編輯功能，還帶有一個(gè)嵌入式的Git Control，可與GitHub進(jìn)行無(wú)縫集成。您可以安裝多個(gè)CSS附加組件，以增強(qiáng)用戶對(duì)CSS編輯的體驗(yàn)。
- 兼容性：Windows、macOS和Linux。
- 特殊功能：既可以通過(guò)各種API輕松地實(shí)現(xiàn)擴(kuò)展和破解，又能夠與CSS、以及時(shí)下流行的CSS預(yù)處理器配合使用。
可編輯CSS的Atom代碼編輯器
Sublime Text是另一種流行的Web開(kāi)發(fā)代碼編輯器。在提供跨平臺(tái)工作的前提下，它可以原生地支持包括CSS在內(nèi)的多種語(yǔ)言和標(biāo)記語(yǔ)言。同時(shí)，它也提供了許多擴(kuò)展模塊，以改善用戶在使用編輯器時(shí)的CSS編輯體驗(yàn)。另外，Sublime Text還引入了其他項(xiàng)功能，其中包括：多行選擇(Multiline selection)、“跳轉(zhuǎn)到任何地方(Go to Anywhere)”、以及能夠提高開(kāi)發(fā)人員工作效率的Command Pallete。
- 兼容性：Windows、macOS和Linux。
- 特殊功能：運(yùn)行快速，且提供高級(jí)的代碼編輯功能。包括：“跳轉(zhuǎn)到任何地方”和多行選擇，以及subl CLI。
Sublime Text代碼編輯器可在macOS上運(yùn)行
7.Brackets
它是由Adobe Systems創(chuàng)建的免費(fèi)、輕量級(jí)的編輯器，可專(zhuān)門(mén)用于Web開(kāi)發(fā)。由于Brackets是用JavaScript、HTML和CSS編寫(xiě)的，因此它能夠“原生地”支持CSS預(yù)處理器。
通過(guò)所謂“內(nèi)聯(lián)編輯(Inline Editing)”的方式，Brackets向用戶引入了獨(dú)特的編輯體驗(yàn)。您可以同時(shí)按下Command(或Ctrl)+ E，以便讓Brackets在嵌入式窗口中顯示帶有某個(gè)ID的所有CSS選擇器。您可以直接在當(dāng)前的文件內(nèi)編輯CSS選擇器，而不必在多個(gè)文件之間反復(fù)跳轉(zhuǎn)。
- 兼容性：Windows、macOS和Linux。
- 顯著特點(diǎn)：內(nèi)聯(lián)編輯。
用Barcket代碼編輯器來(lái)編輯CSS
8.Espresso
Espresso是一款界面精美的macOS應(yīng)用程序，可被用于代碼編輯。由于它帶有一個(gè)不錯(cuò)的GUI工具，因此用戶可以輕松地編輯各種CSS樣式。在編輯樣式表時(shí)，Espresso將顯示在屏幕右側(cè)欄的下半部分，您可以用它來(lái)調(diào)整文本樣式、文本顏色、對(duì)齊方式、字體、大小、行高以及布局，其中包括：填充、邊距、顯示樣式、以及浮點(diǎn)等。
- 兼容性：macOS。
- 特殊功能：屬于編輯CSS的GUI工具，可原生支持SCSS和LESS，并帶有自動(dòng)完成等功能。
9.TextMate
作為一款適用于macOS的代碼編輯器，TextMate具有各種高級(jí)的編輯功能，以及針對(duì)包括CSS在內(nèi)的多種編程語(yǔ)言的原生支持。TextMate語(yǔ)法在開(kāi)發(fā)者圈內(nèi)小有名氣，其.tmLanguage也廣受歡迎。前面提到的Atom和Sublime Text等許多流行的代碼編輯器都采用了.tmLanguage，來(lái)創(chuàng)建自定義的語(yǔ)法突出顯示。
- 兼容性：macOS。
- 特殊功能：其原生宏(Native Macros)支持自動(dòng)化的重復(fù)性任務(wù)執(zhí)行，代碼片段(Snippets)，以及與Shell的集成。
10.bbEdit
bbEdit也被稱(chēng)為T(mén)extWrangler，它是為macOS構(gòu)建的輕量級(jí)、且高級(jí)的代碼編輯器。除了諸如：能為各種編程語(yǔ)言的語(yǔ)法著色，實(shí)現(xiàn)代碼折疊、以及代碼自動(dòng)完成等基本功能之外，bbEdit也具有內(nèi)置的SFTP/FTP支持。同時(shí)，它也能夠與諸如：AppleScript、Automator、以及Unix腳本等各種macOS功能函數(shù)無(wú)縫地集成。
- 兼容性：macOS。
- 特殊功能：能夠與macOS集成，以及帶有可用于編輯HTML的內(nèi)置GUI工具。
原文標(biāo)題：Top 10 CSS Editors，作者：Thoriq Firdaus
【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】
