一個前端程序猿的Sublime Text3的自我修養

時間  2019-11-13
標籤 一個 前端 程序 sublime text3 text 自我 修養 欄目 HTML 简体版
原文   原文鏈接

詳細設置 && 20+插件

本文章會在本人有插件或者設置更新時，進行不定時更新javascript

爲何要選擇Sublime Text3？

  • Sublime Text3 自動保存，打開圖片
  • 跨平臺啓動快，多行選擇。
  • 插件，簡直選不過來。
  • 代碼片斷
  • VIM兼容模式

如何exclude node_modules文件夾

 

看這裏php

在css

這裏設置，相關的項。html

菜單欄基礎功能介紹

  1. File ：文檔相關，新建文件,打開文件或文件夾等。
  2. Edit ：文件編輯相關，複製，剪切等（CVS大法好）。除此以外還有一些強大的功能。
  3. Selection ：選擇相關，幫助選擇代碼。
  4. Find ：查找替換相關。這個和其它編輯器區別好像不大。
    • Ctrl+F 查找、 Ctrl+H 替換等。
  5. View ：對Sublime_Text編輯器自己的一些配置。
    • SideBar :開啓側邊欄 Ctrl+k,b
    • Show console ：打開控制檯窗口，安裝package control須要使用.
  6. Goto ：快捷導航：下面介紹。Goto Anything
  7. tools :工具，一些命令。
    • new Snippet ：自定義代碼片斷，保存到user下
  8. Project : 項目相關，用的少。
  9. Preferences ：對於sublime_text進行一些個性化定值。
  10. Help ：如同名字。註冊在這裏

快捷鍵

  • line 相關：
    • Ctrl+Shift+D ：複製當前行
    • Ctrl+Shift+K ：刪除當前行
    • Ctrl+j 合併一行
    • Ctrl+Enter ：在當前行下添加新行。After
    • Ctrl+Shift+Enter ：在當前行上添加新行。Before
  • Comment 註釋：
    • Ctrl+/ ：行註釋。
    • Ctrl+Shift+/ ：塊註釋
  • Ctrl+Shift+P ：調用命令面板，快速查找，例如：改變語法模式等。
    • 模糊匹配，能夠減小對快捷鍵的記憶。
  • Shift+Alt+1，2，3，4，5 ：開啓對應數字的多欄編輯

Ctrl+P ：Goto Anything前端

  • Ctrl+P : 查找項目中的文件：
    • 直接輸入名稱：在不一樣文件中切換， 支持級聯的目錄模式
    • : ：+ 行號： Ctrl+G 定位到具體的行。
    • @ ：+ 符號： Ctrl+R 定位到具體的符號，例如：JS函數名，CSS選擇器名。
    • # ：+ 關鍵字： Ctrl+; 匹配到具體的匹配的關鍵字。主要是模糊匹配。

多行遊標

  • Ctrl+D ：選中當前光標所在位置的 單詞 。連續使用時，進行多光標選擇，選中下一個同名單詞。
  • Ctrl+K ：配合 Ctrl+D 能夠 跳過 下一個同名單詞。
  • Ctrl+L ：選擇當前光標所在位置的 行 。連續使用時，繼續選中下一行。
  • Ctrl+Shift+L ：在多行選中後，在全部選中的行後產生遊標。
  • Alt+F3 ：選中文檔中全部的同名單詞。
  • Shift+鼠標右鍵 ：向下拖動，產生多個光標。

設置

使用 Ctrl+`調出console面板輸入 sublime.log_commands(True) ，能夠獲得當前使用的命令面板進行設置的值。方便進行快捷鍵的綁定。java

下面這些均可以經過命令面板快捷查找node

  • Settings-User ：我的對於sublime_text的定製。使用JSON格式，會直接覆蓋掉Settings-Default 默認設置中的內容。
// User/Preferences.sublime-settings
//我以爲自帶字體挺好的。
{
    "color_scheme": "Packages/User/SublimeLinter/Dawn (SL).tmTheme", //主題
    "draw_minimap_border": true, // 右側縮略圖邊框
    "font_size": 10, // 字體大小
    "highlight_line": true, // 當前行標亮
    "save_on_focus_lost": true, // 當前行標亮
    "theme": "Spacegray Eighties.sublime-theme", //主題相關
    "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", // 雙擊選中中劃線
    "word_wrap": true, //自動換行
    "trim_trailing_white_space_on_save": true, //自動移除行尾多餘空格
    "ensure_newline_at_eof_on_save": true, //文件末尾自動保留一個空行
    "disable_tab_abbreviations": true, //禁用 Emmet 的 tab 鍵功能（請使用 ctrl+e）
    "translate_tabs_to_spaces": true, //把代碼 tab 對齊轉換爲空格對齊
    "tab_size": 4, //空格數
    "fade_fold_buttons": false, //顯示代碼塊的倒三角
    "bold_folder_labels": true, //側邊欄文件夾加粗
    "auto_find_in_selection": true //開啓選中範圍內搜索
}
  • key - Bindings-User ：我的對於快捷鍵的設置。一樣會覆蓋默認的設置。例如：
//自動改變縮進格式
    { "keys": ["shift+tab"], "command": "reindent","args":{"single_line":false} }

sublime text 3中文文件名亂碼

百度知道react

在sublime text 3中，Preference, Settings-User，最後加上一行
"dpi_scale": 1.0
覆蓋操做系統設置的DPI。

這是個人Settings-User
{
"font_face": "Consolas",
"font_size": 15,
"ignored_packages":
[
"Vintage"
],
"line_padding_bottom": 1,
"line_padding_top": 1,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"word_wrap": "true",
"dpi_scale": 1.0 #主要是這行生效！
}git

實現保存自動刷新

tools :工具下的 Build System 選擇新建一個選項後，進行以下設置（注意後綴），保存到user目錄下：es6

//這樣設置。。地址是你的瀏覽器位置
{
  "cmd" :["C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","$file"],
  "selector":["text.html"]
}

並且選擇第一個 auto ， 修改內容後按 Ctrl+B ，能夠看到自動打開了chrome而且是修改後的內容。

插件的安裝與使用

安裝 package control 。

這裏我使用的是sublime_text3， 2的話上官網查詢代碼。

首先打開package control的 官方網站 。

複製下面這一段代碼:

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

在上面說的 View –> Show console 打開控制檯窗口，粘貼上面的代碼，回車，而後就是等待安裝了，須要必定的時間。安裝完成後重啓

使用 Ctrl+Shift+P ,打開控制面板，輸入PC，效果以下，說明安裝成功了。

安裝主題

  • 按照上面的步驟，打開圖片中的安裝插件就好了，其實默認配色真的挺好看的
  • 推薦在安裝前，先去 官方網站查看樣式 。的樣式，以及設置方法,說明文檔。通常安裝成功後，會自動彈出。
  • 以 Theme - Spacegray 爲例：

先使用 Ctrl+Shift+P 輸入PCI，回車選擇 Install Package 。須要等待一會加載時間，輸入 Theme-Spacegray 。其實不輸入完也會模糊匹配出來的。

  • 回車等待安裝就好，成功後會彈出一個使用設置的頁面，把其中的以下代碼拷貝到Settings-User ，保存，你會發現，默認的主題已經變成了剛剛咱們查看過的主題了。
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",  
"theme": "Spacegray Eighties.sublime-theme"

固然，你也能夠經過菜單欄，進行主題的選擇。會有相同的效果。它會自動在 Settings-User 進行設置。

我的經常使用插件及使用方法：

NO.1 AdvancedNewFile ：快速新建文件。

  • 假設有文件夾 file 。咱們正在輸入代碼，又想在新的子目錄下新建html文件的話用傳統方式得不少步，新建目錄，新建文件，保存等等等。
  • 可是有了該插件以後，事情就變得簡單了許多，只須要按下 Ctrl+Shift+N ，輸入文件夾以及文件名，你就會看到以下效果:（回車，你會發現已經子目錄下的文件已經新建完成了！）

NO.2 Nettuts+ Fetch ：管理類庫。

安裝成功後輸入 Ctrl+Shift+P 打開命令面板，輸入 Fetch ，能夠看到如下：

選擇 file 能夠看到設置的文件。選擇下載

配合剛剛上面的插件使用，簡直完美..

NO.3 Sidebar Enhancements ：加強側邊欄。

必裝插件，無比強大，就不過多介紹了。能夠在瀏覽器中打開，還能夠配置不一樣文件的打開方式。

單單下面這一個功能就必須安裝了！快捷在不一樣瀏覽器打開：參考： SideBarEnhancements快捷鍵設置

  • 可選 SyncedSideBar ：每次打開文件，側邊欄都會同步顯示該文件所在目錄樹中的位置

NO.4 Doc Blockr ：代碼塊註釋。

能夠快速的對函數進行註釋。保存代碼規範

支持多種語言。（我的以爲brackets的這個插件比Sublime Text作得好多了。）

/* :回車建立一個代碼塊註釋

/** :回車在自動查找函數中的形參等等。

它會生成 JSDoc 格式的註釋。若是你從沒有使用過相似的工具，DocBlockr 會讓你以爲之前沒有它是如何寫代碼的。幫助你創造你的代碼註釋，經過解析功能，參數，變量，而且自動添加基本項目。

NO.5 SublimeLinter-jshint :語法校驗

  • 需先安裝 SublimeLinter 。
  • 需先安裝 Node.JS 及 npm 。
  • 在cmd輸入 npm install -g jshint ，等待安裝成功就行了。

安裝成功後，重啓就能夠測試代碼的風格了。

固然還能夠自定義校驗規則，在該目錄下使用 Ctrl+Shift+N 建立文件 .jshintrc ，在其中使用JSON格式配置校驗風格。

例如：

//建議使用===，不使用時會有提示。
{
  "eqeqeq":true
}

而且在左下角會有錯誤提示。須要注意的是內容有更改時，纔會當即生效。

詳細自定義規則： 自定義Hint校驗

NO.6 Git :版本控制

可視化的操做：幫助你與你的Git repo協議進行交互。它支持不少命令像init, push, pull, branch, stash,等等。瞭解更多關於你在Sublime Text裏面究竟能使用哪些Git功能，以提升您的工做流程。

使用參考

  • GitGutter :

    Sublime Text 有了 Git 插件以後，GitGutter 更好的幫助開發者查看文件以前的改動和差別，提高開發效率。

NO.7 Emmet ：不解釋。

中文文檔：地址

前端開發必備！Emmet使用手冊

NO.8 JsFormat ：代碼格式化

  • JsFormat 基於 JS Beautifier，能夠幫助你自動格式化 JavaScript 和 JSON。這對於閱讀代碼是很是有用的。
  • 快捷鍵： Ctrl + Alt + f 或者，你也可使用菜單欄。
  • 可定製喜歡的格式：在 SublimeText 3 中 Preferences -> Package Settings -> JsFormat -> Settings - Default 能夠調整這些配置。

NO.10 jQuery ：JQuery的API代碼片斷

我知道目前在不少地方 jQuery 看似已經落伍了，可是若是你不是創建一個交互性很強的網站或者你只是想在已有應用上添加功能，它仍然是很是有用的。

好比，輸入 $.a 就可讓我選擇 $.ajax() ，而後自動擴展成如下代碼：

$.ajax({
  url: '/path/to/file',
  type: 'default GET (Other values: POST)',
  dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
  data: {param1: 'value1'},
})
.done(function() {
  console.log("success");
})
.fail(function() {
  console.log("error");
})
.always(function() {
  console.log("complete");
});

NO.11 BracketHighlighter :符號高亮

該插件提供行數列高亮的各類配對的語法符號，顯示在行號上。效果以下：

配置方法參考 sublime text3下BracketHighlighter的配置方法

NO.12 JavaScript Next ：完美支持ECMAScript 6

  • JavaScript Next 提供了比默認JavaScript Package更好的語法高亮，並且他完美支持ECMAScript 6。
  • 建議徹底使用 JavaScript Next代替JavaScript Package。

NO.13 CSS3 :CSS3語法高亮

  • 默認安裝的Sublime Text對CSS3的支持讓人抓狂，幀動畫？別開玩笑了你只會看到一片白色的純文本同樣的代碼。
  • 事實上不光CSS3，我建議用CSS3 Package徹底替代原來的CSS Package來完成語法高亮。把原來的禁用了吧

NO.14 Color Highlighter ：CSS顏色高亮

  • 這個插件我等了好久了（在使用breakets的時候發現 的，好用到爆），我最先用Sublime Text寫CSS時候就在想「這堆顏色碼誰知道是什麼顏色」。。
  • 仍是brackets的牛逼
  • Color Highlighter這個插件會檢測CSS文件中的顏色碼，不管是Hex碼或者RGB碼都能很好的顯示。
  • Color Highlighter可以設置成用背景色或者邊框提示顏色，我通常在Settings裏作這樣的設置：
{
  "ha_style": "filled",
  "icons": false
}

效果以下：

NO.15 Colorpicker ：使用一個取色器改變顏色

使用方法: ctrl + shift + c ，快捷鍵有衝突，需修改。能夠經過 ctrl+shift+p ：來搜索調用

NO.16 Markdown Editing 和 Markdown Preview ，實現預覽MD

  • 當在 Sublime Text 中編寫 markdown 文件時，在瀏覽器中打開全是亂碼，由於尚未將 markdown 文件解析成相應的 HTML.
  • 這兩個插件的功能就是能夠用瀏覽器瀏覽 Sublime Text 中編寫的 markdown文件。
  • 配置：

打開 Preferences->Package Settings->Markdown Preview->Setting User 將下面這句話粘貼進去。

{
    // "瀏覽markdown的瀏覽器的路徑"
    "browser" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
}
//打開Preferences->Key Binding User，添加下面一句話。
{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
//keys的值是以上面瀏覽器預覽markdown文件。

直接按F6就能夠打開了

不進行這些配置的話，由於咱們在前面 實現保存自動刷新 使用了一些操做，按 ctrl+b ,就會在該目錄下，建立一個同名的html文件。

選中該htnl文件，再次按 ctrl+b 能夠達到一樣的預覽效果，不過仍是F6簡單不是嗎？

NO.17 AutoFileName ：文件路徑自動提示

這個直接安裝就能夠用了，挺方便的。

NO.18 Terminal ：在Sublime Text直接打開命令行

NO.19 CSScomb : CSS屬性排序

NO.20 JavaScript Completions 和 Java Script & Node JS Snippets 。輸入提示，代碼補全

其餘：

  • LiveStyle : 實時刷新雙向修改 
    win下沒有配置成功
  • IMESupport ，輸入法不跟隨時安裝
  • FileHeader ，自動更新保存時間，文件模板
  • Quote HTML ，把HTML拼接成js插入字符串
  • CSS Format ，CSS格式化
  • AutoPrefixer ，瀏覽器私有屬性前綴補全 (Node.js依賴)
  • ConvertToUTF8 ，GBK編碼兼容

參考以下：

本身補充的插件(可能重複) 

Emmet(zencode)

AutoFileName

自動補全文件路徑

GotoLastEdit

相似eclipse的最後一次編輯的控件。快捷鍵也是ctrl+q

連接地址

Terminal

打開命令行的快捷方式，快捷鍵爲ctrl+shift+t

連接地址

react 顯示顏色提示

連接地址

react es6 代碼提示

連接地址

advance new file

新文件加強工具

連接地址

Side​Bar​Enhancements

側邊欄加強工具

連接地址

git

可視化的操做：幫助你與你的Git repo協議進行交互。它支持不少命令像init, push, pull, branch, stash,等等。瞭解更多關於你在Sublime Text裏面究竟能使用哪些Git功能，以提升您的工做流程。

使用參考

GitGutter :Sublime Text 有了 Git 插件以後，GitGutter 更好的幫助開發者查看文件以前的改動和差別，提高開發效率。

Tag插件

這是HTML/XML標籤縮進、補全、排版和校驗工具

Tag插件使用方式

安裝該插件後，能夠如上圖方式使用Tag插件對HTML/XML進行自動排版等操做

GBK Encoding Support

對應gb2312來講，Sublime Text 2 本生不支持的，咱們能夠經過Ctrl+Shift+P調出命令面板或Perferences->Package Contro,輸入install 調出 Install Package 選項並回車，在輸入「GBK Encoding Support」選擇開始安裝，左下角狀態欄有提示安裝成功。這時打開gbk編碼的文件就不會出現亂碼了，若是有須要轉成utf-8的能夠在File-GBK to UTF8-選擇Save with UTF8就偶看了。

BracketHighlighter

Seti_UI

配置在安裝好以後，會有提示

editorconfig

幫助規範es6代碼書寫風格。配合eslint使用。

 Sublime中增長格式化代碼的快捷鍵

其實sublime自身就有格式化命令，就再也不安裝插件，位置在[Edit]->[Line]->[Reindent]

但這個默認的命令沒有快捷鍵，就從新定義了一下，想用習慣了的eclipse快捷鍵：Ctrl+Shift+F可是和「在文件中查找」衝突了。改用Alt+Shift+F吧，和netbeans保持一致。

[Preferences]->[Key Bindings]->[User]中，添加以下：

 { "keys": ["alt+shift+f"], "command": "reindent" }

 

Sublime Text 3 搭建 React.js 開發環境

Sublime有很強的自定義功能，插件庫很龐大，針對新語言插件更新很快，配合使用能夠快速搭建適配語言的開發環境。

1. babel-sublime

支持ES6， React.js, jsx代碼高亮，對 JavaScript, jQuery 也有很好的擴展。關於 babel 的更多介紹能夠看這裏：爲何說Babel將推進JavaScript的發展

安裝

  • PC：Ctrl+shift+p

  • Mac：Cmd+shift+p

打開面板輸入babel安裝

配置

  1. 打開.js, .jsx 後綴的文件;

  2. 打開菜單view， Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)，選擇babel爲默認 javascript 打開syntax

2. sublimeLinter-jsxhint

JSX 代碼審查，實時提示語法錯誤, 幫助快速定位錯誤點.

 

安裝

  1. PC上ctrl+shift+p（MacCmd+shift+p）打開面板輸入sublimeLinter-jsx安裝(依賴於 sublimeLinter)

  2. 安裝 node.js

  3. 安裝 jsxhint

npm install -g jsxhint

3. 修改 Emmet 兼容jsx 文件

emmet 做爲前端開發必備插件之一很是方便快捷，經過修改默認的 sublime就能夠在 jsx 文件中快速經過 emmet 編寫自定義組件。

 

安裝

PC上ctrl+shift+p（MacCmd+shift+p）打開面板輸入emmet安裝

使用方法

打開 preferences -> Key bindings - Users，把下面代碼複製到[]內部。

{
      "keys": [
        "super+e"
      ],
      "args": {
        "action": "expand_abbreviation"
      },
      "command": "run_emmet_action",
      "context": [{
        "key": "emmet_action_enabled.expand_abbreviation"
      }]
    },
    {
      "keys": ["tab"],
      "command": "expand_abbreviation_by_tab",
      "context": [{
        "operand": "source.js",
        "operator": "equal",
        "match_all": true,
        "key": "selector"
      }, {
        "key": "preceding_text",
        "operator": "regex_contains",
        "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?([^}]*?}$)?)",
        "match_all": true
      }, {
        "key": "selection_empty",
        "operator": "equal",
        "operand": true,
        "match_all": true
      }]
    }

使用super+e觸發 emmet；正則判斷用 a，div，span，p，button標籤默認tab 觸發；默認 class 修改成 className。

注：

  1. supre+e 在 PC 上指的是win+e（pc 建議修改成emmet 默認按鍵 ctrl+e）,在 mac 上指的是cmd+e

  2. 以上規則來源於StackOverflow，正則小有修改

4. JsFormat 格式化 js 代碼

jsformat 是 sublime 上 js 格式化比較好用的插件之一，經過修改它的e4x 屬性可使它支持 jsx。

安裝

PC上ctrl+shift+p（MacCmd+shift+p）打開面板輸入JsFormat安裝.

使用

打開preferences -> Package Settings -> JsFormat -> Setting - Users,輸入如下代碼：

{
  "e4x": true,
  // jsformat options
  "format_on_save": true,
}

便可保存時自動格式化，並支持 jsx 類型文件.

5. 編譯 jsx

  • 使用babel-sublime
    帶有編譯 jsx 的命令 babel build。使用 babel 編譯 jsx 也由 React 項目官方引用。該命令依賴於 node 包 babel。babel 同時也支持 ES6的新語法通過編譯在瀏覽器中運用。

    npm install -g babel

    在 sublime 中使用ctrl+shift+p打開面板輸入babel transform自動編譯成 react.js 文件

  • 使用自動化構建工具（gulp|grunt 等）
    以 gulp 爲例(依賴 gulp,需提早安裝)：

    npm install gulp-babel
    /**
 * babel
 */
var gulp = require('gulp'),
  babel = require('gulp-babel');
gulp.task('babel', function() {
  return gulp.src('./src/**/*.jsx')
    .pipe(babel())
    .pipe(gulp.dest('./dist'));
});

    在命令行中輸入 gulp babel 運行

    配合 BrowserSync 使用能夠實時監測改動並同步刷新多平臺上得瀏覽器。

    npm install gulp-babel gulp-plumber gulp-notify gulp-cached browser-sync run-sequence
/**
 *  babel
 */
var gulp = require('gulp'),
  babel = require('gulp-babel'),
  bs = require('browser-sync').create(),
  reload = bs.reload,
  runSequence = require('run-sequence').use(gulp),
  src = 'src', //源目錄路徑
  dist = 'dist'; //輸出路徑
gulp.task('babel', function() {
  var onError = function(err) {
    notify.onError({
      title: "Gulp",
      subtitle: "Failure!",
      message: "Error: <%= error.message %>",
      sound: "Beep"
    })(err);
  };

  return gulp.src(src + '/**/*.jsx')
    .pipe(cached('react')) //把全部東西放入緩存中，每次只編譯修改過的文件
    .pipe(plumber({ //發生錯誤時不會中斷 gulp 的流程，同時觸發 notify 消息提示
      errorHandler: onError
    }))
    .pipe(babel())
    .pipe(gulp.dest(dist));
});

// Start the server
gulp.task('bs', function() {
  var files;

  files = [
    src + '/**/*.+(html|php|js|css|png|jpg|svg|gif)'
  ];

  bs.init(files, {
   server: {
     baseDir: src,
   }
  });
});

gulp.task('server', ['babel','bs'], function() {
  gulp.watch(src + '/**/*.jsx', function() {
    runSequence('babel', reload);
    });
  })

在命令行中輸入 gulp server 運行。

或者使用 sublime 自帶的 build 工具，選擇Tools -> Build System -> New Build System
輸入:

{
    "shell_cmd": "gulp server --cwd $file_path"
}

並保存爲 gulpBabel.sublime-build(名稱隨意，保持.sublime-build後綴名)，存放到Packages - Users文件夾裏面，在 sublime 中使用ctrl+shift+b（或Tools -> Build With ..）打開 build 面板，選擇剛剛輸入的名稱，在這裏是gulpBabel運行。

html pretty

操做說明

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程