新手必需用!大道至簡的前端編輯器Sublime Text

来源:http://www.cnblogs.com/mySelfY/archive/2017/07/02/7106315.html
-Advertisement-
Play Games

很多人在進入學習前端的時候(包括我自己),除了選擇學習合適的技術,還需要一個得(自)心(己)應(喜)手(歡)的開發工具,一個得心應手的開發工具除了可以令你的效率大大提高,也可以令你在寫代碼的時候,心情舒暢 O(∩_∩)O。 我的第一個前端開發工具就是Sublime Text ,說一說我對它的理解吧。 ...


很多人在進入學習前端的時候(包括我自己),除了選擇學習合適的技術,還需要一個得(自)心(己)應(喜)手(歡)的開發工具,一個得心應手的開發工具除了可以令你的效率大大提高,也可以令你在寫代碼的時候,心情舒暢 O(∩_∩)O。

    我的第一個前端開發工具就是Sublime Text ,說一說我對它的理解吧。

   在學習前端的時候,我也像很多人那樣上網搜一搜前端開發應該選擇什麼樣的開發工具,一搜,結果幾乎大部分結果都是推薦 Sublime,於是乎下載了一個,結果下載完打開一看,黑乎乎的窗體,一點也不華麗啊(sublime 的中文譯名就是“華麗的”),後來自己琢磨和網上百度了一段時間,終於明白了為啥這麼多人說 sublime 好用,很重要的一個原因是它的“自定義性”,就是在 sublime裡面,你想要的一切,都可以自定義,自己選擇。自己去改變;和另一個特性:快捷鍵快速編寫或許有人會問,這不是瞎折騰嗎?什麼都需要自己去配自己去搗鼓。但是,到了後面自己寫代碼的時候,就會明白,這所有的“瞎折騰”都是有必要的。用 Sublime 寫一些簡單的 demo 的頁面那是非常快的,但是,Sublime 也有明顯的缺點,對項目的管理等不太方便,代碼提示不如其他 IDE強大

   

    1. 跨平臺的編輯器

    同時支持Windows、Linux、Mac OS X等操作系統,輕量級的編輯器,支持各種編程語言。

 

   2.sublime 的插件機制。

(怎樣安裝插件這裡就不多說了,網上有很多很好的文章)說真的,安裝的插件不需要太多,裝太多還不如用專業的IDE(集成開發環境),分享一下我自己用得得心應手的幾個插件吧;同一個sublime 的插件,手動下載後,放進無論是 windows系統,還是放進去 Mac 系統,都能安裝。

 Emmet

 

  Emmet   這個是必須的,html,css,js 的快速智能提示它都能提供,而且還提供各種快捷生成頁面html 頁面骨架的快捷鍵.

     

     

 Sublime Server

sublime 本身瀏覽頁面的方式,預設是用文件路徑的方式去訪問的,並不是以 http localhost:8080/的方式去訪問頁面,這很容易發生一些文件路徑的誤差。

 

當安裝了Sublime Server 插件之後,就可以使用 htttp 的方式去訪問頁面了。安裝完之後在“工具  -  sublime server-  star sublime server”打開,之後,在頁面點擊滑鼠右鍵“View in sublimer”之後,可以得到  

 

 Andy JS2

上面說的 Emmet 插件對 JavaScript 的代碼提示支持是有限的,因此,可以,安裝 AndyJS2這個插件彌補這個缺陷,由於在包管理工具上面已經不能搜索到這個插件,因此,可以手動把這個插件下載下來,下載地址:http://pan.baidu.com/s/1eSFzd2E   下載下來後,直接把文件夾裡面的文件拷貝到“首選項- Package”里面,此時就完成安裝了

這時候,再去寫 JS 代碼,就會發現,多了很多其他的智能提示。

也許會有人說,智能提示不強 要裝這麼多插件,用它 sublime幹嘛,還不如用 IDE,例如 Webstorm或者 visual studio ,但是,如果是新手學習,想更熟悉一些語法和代碼,那麼,請一試 sublime,這種“華麗的智能提示” O(∩_∩)O

 

ConverToUTF8

如果頁面出現亂碼了,可以安裝這個插件來解除亂碼,這個也是必備的插件。

AllAutoComplete 和 PackageResourceViwer 

對於文件夾內文件的智能提示,配合修改sublime預設的配置,可以設置 CSS 類名提示,在知乎上有大神的教程地址如下 

 https://zhuanlan.zhihu.com/p/21824377

還可以利用PackageResourceViwer 修改 sublime 側邊欄的樣式和字體大小等

這些是博主自己安裝的插件

 

  

3.sublime 自帶的快捷鍵快速編寫

   (1)上面說的,配合 Emmet 快速生成頁面骨架

     註意,要先點右下角  選擇“HTML”格式或者先“ctrl + s”保存頁面

     在空白頁面寫上  html:xt   //按著鍵盤的 tab 鍵 就可以生成 xhtml 的頁面骨架

 

在空白頁面寫上  html:5  //按著鍵盤的 tab 鍵 就可以生成 html5 的頁面骨架      

   (2)html,CSS,快捷語法

    

    類似的語法還有很多很多,這裡列舉了幾個常用的,其餘的可以網上搜一下就有,很多。

  (3)跨行齊編輯

    做法:在需要編輯的文本里,按住滑鼠滾輪鍵,註意,是按住滑鼠滾輪鍵,然後把滑鼠往下拉,拉到那些需要編輯的文本的行里,會出現一條豎線,這時候就可以開始編輯了,如圖

 

  對我自己而言,Sublime Text 確實是個不錯的代碼編輯器,以後會寫其他兩個我也很喜歡的編輯器 Visual Studio Code 和  IDE Webstorm。

   第一篇長的博文就先寫到這裡了,不得不說,寫博客確實是件挺累人的事情,差不多跟在學校寫報告差不多,但是,能溫故而知新,想起很多以前學到的和接觸到的東西,這是一件好事情O(∩_∩)O哈!

      

 

     

 

 

        

 

  

   

 

 

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Angular.js與Vue.js是非常有淵源的兩款前端框架,據Vue.js的官方網站描述,在其早期開發時,靈感來源就是Angular.js。而在很多方面,Vue.js也正像是中國的那句古話,“青出於藍而勝於藍”。今天,K就從下麵幾個方面來跟大家一起探討一下,Vue.js到底在哪些方面更“勝於藍”。 ...
  • 一、什麼是語義化標簽?1.那麼什麼叫做語義化呢?說的通俗點就是:就是給div起個外號,比如,網頁上的文章的標題就可以叫他標題,網頁上的各個文章,就可以叫他文章。 2.為啥使用語義化標簽?(1). 更容易被搜索引擎收錄。(2). 更容易讓屏幕閱讀器讀出網頁內容。(3). 能夠更好的體現頁面的主題。(4 ...
  • Vue.js 是一套構建用戶界面的漸進式框架。他自身不是一個全能框架——只聚焦於視圖層。因此它非常容易學習,非常容易與其它庫或已有項目整合。在與相關工具和支持庫一起使用時,Vue.js 也能完美地驅動複雜的單頁應用。他是基於AnjularJs 編寫的,所以和前者的語法特別相似,卻又使用簡潔了很多。 ...
  • 1 /*css 初始化 */ 2 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } 3 fieldset, img,i... ...
  • 1 js首先需要的函數 2 3 window.onload = function () { 4 function $(id){ 5 return document.getElementById(id); 6 } 7 function $arr(array){ ... ...
  • cursor 1.定義和用法 cursor 屬性規定要顯示的游標的類型(形狀)。 該屬性定義了滑鼠指針放在一個元素邊界範圍內時所用的游標形狀(不過 CSS2.1 沒有定義由哪個邊界確定這個範圍)。 2.屬性 需使用的自定義游標的 URL。 註釋:請在此列表的末端始終定義一種普通的游標,以防沒有由 U ...
  • [1]使用方法 [2]基本用法 [3]原理分析 [4]擴展用法 ...
  • 多態(Polymorphism)按字面的意思就是“多種狀態”,同樣的行為(方法)在不同對象上有不同的狀態。在OOP中很多地方都要用到多態的特性,比如同樣是點擊滑鼠右鍵,點擊快捷方式、點擊桌面空白處、點擊任務欄等彈出的菜單都是不同的。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...