Brackets--我的初戀編輯器

来源:http://www.cnblogs.com/Elecrabbit/archive/2017/02/25/6442513.html
-Advertisement-
Play Games

大學畢業以後,因為一些個人瑣事沒有找到自己專業的對口工作,整天混混沌沌得過著也沒有打破現狀的決心和機會。但是每當獨自思考的時候總是一陣陣的害怕,怕自己從此一事無成一無所有。於是在某個心潮澎湃的瞬間開始在網上看一些學習資源,開始自學一些web方面的知識。 經過小段時間的學習,發現自己之前真的是孤陋寡聞 ...


大學畢業以後,因為一些個人瑣事沒有找到自己專業的對口工作,整天混混沌沌得過著也沒有打破現狀的決心和機會。但是每當獨自思考的時候總是一陣陣的害怕,怕自己從此一事無成一無所有。於是在某個心潮澎湃的瞬間開始在網上看一些學習資源,開始自學一些web方面的知識。

經過小段時間的學習,發現自己之前真的是孤陋寡聞,如今的網路學習資源真的挺多的,比如最先接觸的網易雲課堂http://study.163.com/,而後遇到的慕課網http://www.imooc.com/,再之後碰見的實驗樓https://www.shiyanlou.com/等等。雲課堂的界面設計的很不錯,課程也很多;慕課網自不必說,程式員的修煉之地,在裡面學習了一些基礎知識,講的內容很不錯;實驗樓是之後無意間發現的,他的特點是會給一個虛擬的Linux環境,讓你在Linux下學習,真的就感覺像在學校做實驗,不過不知道是不是我的電腦的問題,有時候會莫名的卡頓。

而今天要說的主角Brackets也正是在實驗樓的環境里認識的,當時感覺這個編輯器的界面就是簡潔,方便;後來在自己的電腦上搜這個編輯器,沒想到在win系統下也有,而且網上的評價也都不錯,大有火紅一片的趨勢。所以現在簡單的來介紹一下。

 

Brackets是一個開源的基於HTML/CSS/JavaScript開發的集成開發環境。項目由Adobe創建和維護。支持Windows和Linux平臺。Brackets的特點是簡約、快捷,它的核心目標是減少在開發過程中那些效率低下的重覆性工作,例如瀏覽器刷新,修改元素的樣式,搜索功能等等。

前往Brackets download頁面下載所需版本。

一、Brackets的界面

  打開Brackets,整個界面很簡。左側為項目組織結構的文件樹,使用Ctrl/Cmd+Shift+H可以呼出與關閉文件樹。右側為編輯區,上部為菜單欄,中部為文檔區域,下部為提示區域。

  

  而且最新版本的Brackets還可以選擇皮膚和字體:

  

這是自帶的dark皮膚,個人感覺超級不錯的。

二、文本編輯

  Brackets會自動檢測你的代碼是否符合規範,併在下方進行提示;

  把游標放在class和id標簽上,按下Ctrl/Cmd + E(“編輯”)或退出編輯。Brackets將搜索項目下所有CSS文件,然後打開一個內嵌的編輯器嵌入在HTML文件中,可以讓你迅速修改CSS代碼。

  

  Brackets同樣支持對JS對象定義的快速預覽/編輯,把游標放在一個js函數名稱上,按下Ctrl/Cmd + E(“編輯”)或退出編輯。

  Brackets內建取色器,提供RGBa、HEX、HSLa的顏色編碼形式。把游標放在一個顏色編碼上,按下Ctrl/Cmd + E(“編輯”),退出取色器視窗需要使用Esc鍵。

  

 

三、即時預覽

最值得一說的當然是Brackets的即時預覽功能了。

Brackets使用時預覽功能時,Brackets調用Chrome瀏覽器打開當前頁面,此後修改html、css、javascript並保存後,所修改的內容會即時響應到瀏覽器中的頁面,無須手動刷新頁面。這是Brackets最大的一個亮點,有兩個顯示器的coder有福了,可以分屏顯示Brackets和chrome,即時修改即時預覽,無需切換編輯器/瀏覽器和刷新頁面。

不過目前即時預覽功能的還有一些限制:
它僅適用於Chrome瀏覽器為目標瀏覽器,你必須安裝Chrome。
它依賴於在Chrome瀏覽器中的遠程調試功能,這是一個命令行標誌啟用。在Mac上,如果你已經在使用Chrome瀏覽器,這時啟動“即時預覽”,Brackets將詢問你是否要重新啟動Chrome瀏覽器啟用遠程調試功能。
只能同時對一個HTML文件進行預覽 - 如果切換另一個HTML文件,Brackets將關閉原來的預覽。

四、必備插件

為了提高效率,怎麼能少的了萬能的插件呢,下麵就推薦幾個Brackets的插件,讓你的的擼代碼速度起飛。

1、Can I us

不用離開 Brackets 就可以查看當前瀏覽器是否支持某個特定的 WEB 技術。

  

2、HTML Skeleton

HTML Skeleton 可以快速的為你的 HTML 文件插入基本的標簽,如doctype聲明、<html>、<head>、<body>等等。

  

3、Brackets Icons

這是一個非常簡單的插件,它為你的 Brackets 邊欄添加文件圖標。該圖標視覺體驗非常好,可以快速幫你識別出你要編輯的文件的類型。

  

4、JS CSS Minifier

這個插件為你的 JavaScript 和 CSS 文件移除不必要的字元。這個過程成為壓縮,它可以提升網頁的載入速度。

5、Emmet

如果你從事Web前端開發的話,該插件一定是必不可少的。它可以加快你的 HTML 和 CSS 編寫速度。

6、Beautify

這個插件可以讓你的 HTML、CSS、JavaScript 等代碼格式化一致,從而提升可讀性。

  當然還有很多有用有意思的插件,這裡就不一一介紹了,感覺不錯的朋友自己去體驗一下吧。

 

我是黃金小蘿蔔頭,一個IT屆的小菜鳥,歡迎大家一起分享自己的心得體會。

  文章如需轉載請註明轉載自:http://www.cnblogs.com/Elecrabbit/articles/6442481.html
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 概述 typeof操作符返回一個字元串,指示未經計算的操作數的類型。 語法 常規用法 null 問題 // 在 JavaScript 最初的實現中,JavaScript 中的值是由一個表示類型的標簽和實際數據值表示的。對象的類型標簽是0。由於 null 代表的是空指針(大多數平臺下值為0x00),因 ...
  • 前言: 今天寫一篇jQuery,發現內容太多了,那就分成兩篇寫吧……寫完jQuery基礎知識後會再寫一些jQuery實例~~ jQuery下載。jQuery是一個相容多瀏覽器的javascript庫,核心理念是write less,do more(寫得更少,做得更多),對javascript進行了封 ...
  • JavaScript-警告(alert 消息對話框) 註意: 1. 在點擊對話框"確定"按鈕前,不能進行任何其它操作。 2. 消息對話框通常可以用於調試程式。 3. alert輸出內容,可以是字元串或變數,與document.write 相似。 // JavaScript-確認(confirm 消息 ...
  • 在 "單線程JavaScript" 這篇文章中,在介紹JavaScript單線程的同時,也介紹了setTimeout是如何工作的。但是對於定時器的一些內容,並沒有做深入的討論。這篇文章,會詳細說說JS的兩種定時器,setTimeout和setInterval,以及它們的工作方式。同時,會談談有關se ...
  • jQuery的開發速度很快,幾乎每半年一個大版本,每兩個月一個小版本。 每個版本都會引入一些新功能。今天我想介紹的,就是從jQuery 1.5.0版本開始引入的一個新功能 deferred對象。 這個功能很重要,未來將成為jQuery的核心方法,它徹底改變瞭如何在jQuery中使用ajax。為了實現 ...
  • 關於響應式佈局現才接觸到,雖然代碼很簡單,但是對基礎要求還是有一些。 1.left設置position:absolute和width:70px;那麼右邊用margin-left:70px;因為是響應式的我用jquery設置了一下高度(不用jquery,直接設置高度為100%好像不行,不知道為什麼有知 ...
  • DragEvent是一個表示drag和drop交互的DOM event介面。用戶通過將指針設備(如:滑鼠)放在目標的錶面開始拖動,然後拖動指針到一個新的位置(如其他DOM元素)。應用程式自動的解析拖放交互。DragEvent介面從mouseEvent和Event那兒繼承屬性。 Event types ...
  • display:none和visible:hidden都能把網頁上某個元素隱藏起來,但兩者有區別: display:none 不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失。 visible:hidden 使對象在網頁上不可見,但該對象在網頁上扔占據著空間。 例子: <html><head ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...