sublime text3 和 vsCode

1.sublime text3

(1)用Package Control安裝插件的方法

按下Ctrl+Shift+P調出命令面板 

輸入install 調出 Install Package 選項並回車，而後在列表中選中要安裝的插件

 

(2)經常使用插件

  1. Emmet（原名 Zen Coding）

      一種快速編寫html/css的方法

     注意：安裝Emmet的同時，也會自動安裝其依賴PyV8 binary庫，安裝PyV8庫會用較長時間，能夠在Sublime左下角看到安裝進程狀態

  2. html5

    支持hmtl5規範的插件包

    注意：與Emmet插件配合使用，效果更好

    使用方法：新建html文檔>輸入html5>敲擊Tab鍵>自動補全html5規範文檔

  3. jQuery

    支持JQuery規範的插件包

 4. javascript-API-Completions

    支持Javascript、JQuery、Twitter Bootstrap框架、HTML5標籤屬性提示的插件，是少數支持sublime text 3的後綴提示的插件，HTML5標籤提示sublime text 3自帶，不過JQuery提示仍是頗有用處的，也可設置要提示的語言。

    安裝方法（請閱讀連接詳情）：http://www.ithao123.cn/content-10545789.html

 5. JSFormat

    JS代碼格式化插件。

    使用方法：使用快捷鍵ctrl+alt+f

 6. SublimeLinter

     一個支持lint語法的插件，能夠高亮linter認爲有錯誤的代碼行，也支持高亮一些特別的註釋，好比「TODO」，這樣就能夠被快速定位。（IntelliJ IDEA的TODO功能很贊，這個插件雖然比不上，可是也夠用了吧）

 7. BracketHighlighter

     相似於代碼匹配，能夠匹配括號，引號等符號內的範圍。

     使用方法：系統默認爲白色高亮，可使用連接所述方法進行自定義配置

     http://www.360doc.com/content/14/1111/15/15077656_424301780.shtml

 8. Alignment

     代碼對齊，如寫幾個變量，選中這幾行，Ctrl+Alt+A，哇，齊了。

 9. Ctags

     函數跳轉，個人電腦上是Alt+點擊 函數名稱，會跳轉到相應的函數

10. Doc​Blockr

     註釋插件，生成幽美的註釋。標準的註釋，包括函數名、參數、返回值等，並以多行顯示，省去手動編寫。

     使用方法見：http://www.cnblogs.com/huangtailang/p/4499988.html

11. SideBarEnhancements

      側欄右鍵功能加強，很是實用

12. AutoFileName

      快速幫助你在文件中寫路徑總體來講還不錯

13.Keymaps

     快速查找全部插件的快捷鍵

(2)快捷鍵

    1.複製行或選中項: ctrl+shift+d

    2.單行剪輯或選中項: ctrl+x

    3.粘貼並複製格式: ctrl+shift+v

    4.用標籤包裹行或選中項: alt+shift+w

    5.移除未閉合的容器元素: ctrl+shift+;

    6.大寫和小寫: 大寫ctrl+k+u、小寫ctrl+k+l

    7.刪除一行: ctrl+shift+k

    8.整行的上下移動: ctrl+shift+↑或 ctrl+shift+↓

    9.選擇括號內的內容: ctrl+shift+m

   10.向上擴展一層: ctrl+shift+a

   11.選擇文本的包裹標籤: ctrl+shift+` （ESC鍵下面的那個）

   12.選擇當前文件全部匹配項: alt+f3

   13.就近選擇相同項:ctrl+d

   14.摺疊代碼：Ctrl+Shift+[

   15.展開代碼：Ctrl+Shift+]

   16.摺疊屬性：Ctrl+KT

   17.展開全部：Ctrl+K0 

 

 

2.Visual Studio Code

（1）插件

前端經常使用：

       1.HTML Snippets： 超級實用且初級的 H5代碼片斷以及提示

       2.HTMLHint： html代碼檢測

       3.HTML CSS Support : 讓 html 標籤上寫class 智能提示當前項目所支持的樣式。新版已經支持scss文件檢索，這個也是必備插件之一

       4.Auto Close Tag : 匹配標籤，關閉對應的標籤。很實用【HTML/XML】

       5.Auto Rename Tag : 修改 html 標籤，自動幫你完成尾部閉合標籤的同步修改

       6.Path Autocomplete : 路徑智能補全

       7.Path Intellisense ： 路徑智能提示

       8.JavaScript Snippet Pack： 針對js的插件，包含了js的經常使用語法關鍵字，很實用；

       9.View InBrowser： 從瀏覽器中查看html文件，使用系統的當前默認瀏覽器

      10.Class autocomplete for HTML： 編寫html代碼的朋友們對html代碼的一大致現就是重複，若是純用手敲不只累還會影響項目進度，這款自動補全插件真的很棒；

      11.beautify : 格式化代碼的工具，能夠格式化JSON|JS|HTML|CSS|SCSS,比內置格式化好用

      12.Debugger for Chrome： 讓 vscode 映射 chrome 的 debug功能，靜態頁面均可以用 vscode 來打斷點調試，真666~

      13.jQuery Code Snippets： jquery 重度患者必須品

      14.vscode-icon： 讓 vscode 資源樹目錄加上圖標，必備良品！

      15. VSCode Great Icons： 另外一款資源樹目錄圖標 

      16. colorize : 會給顏色代碼增長一個當前匹配代碼顏色的背景，很是好

      17. Color Info： 提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就能夠預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。

      18. Bracket Pair Colorizer： 讓括號擁有獨立的顏色，易於區分。能夠配合任意主題使用。

      19. vscode-fileheader： 頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間

      20. Document This : js 的註釋模板 （注意：新版的vscode已經原生支持,在function上輸入/** tab）

      21. filesize： 在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

      22. Code Runner : 代碼編譯運行看結果，支持衆多語言

      23. GitLens： 豐富的git日誌插件

      24. vetur： vue語法高亮、智能感知、Emmet等

      25. VueHelper： vue代碼提示

      26. Quokka:  是一個調試工具插件，可以根據你正在編寫的代碼提供實時反饋。它易於配置，並可以預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它可以開箱即用。

      27. Faker:  使用流行的 JavaScript 庫 – Faker，可以幫你快速的插入用例數據。Faker 能夠隨機生成姓名、地址、圖像、電話號碼，或者經典的亂數假文段落，而且每一個類別還包含了各類子類別，你能夠根據自身的需求來使用這些數據。

      28. CSS Peek:  使用此插件，你能夠追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你發送樣式設置的 CSS 代碼。

      29. HTML Boilerplate:  經過使用 HTML 模版插件，你就擺脫了爲 HTML 新文件從新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，便可生成乾淨的文檔結構。

      30.  Prettier:  Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就可以自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化爲統一的代碼樣式。若是你還想使用 ESLint，那麼還有個 Prettier – Eslint 插件，你可不要錯過咯！

      31. Color Info:  這個便捷的插件，將爲你提供你在 CSS 中使用顏色的相關信息。你只需在顏色上懸停光標，就能夠預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。

      32. SVG Viewer:  此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，即可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換爲 PNG 格式和生成數據 URI 模式的選項

      33. TODO Highlight:  這個插件可以在你的代碼中標記出全部的 TODO 註釋，以便更容易追蹤任何未完成的業務。在默認的狀況下，它會查找 TODO 和 FIXME 關鍵字。固然，你也能夠添加自定義表達式。

      34. Icon Fonts:  這是一個可以在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

      35. Change Case:  雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峯命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等。

      36. Regex Previewer:  這是一個用於實時測試正則表達式的實用工具。它能夠將正則表達式模式應用在任何打開的文件上，並高亮全部的匹配項。

      37.Easy LESS:  less文檔提供提示，錯誤警告，以及把less文檔編譯爲css文件

      38. Document This:  自動生成 JSDoc 註釋，快捷鍵ctrl+alt+d ctrl+alt+d。 或者在function上輸入/**而後tab鍵也能夠生成註釋。

      39. NPM Instellisense:  NPM 依賴補全，在你引入任何 node_modules 裏面的依賴包時提供智能提示和自動完成，會提示已安裝的模塊名

(3)經常使用快捷鍵

   編輯器與窗口管理

1. 打開一個新窗口： Ctrl+Shift+N

1. 關閉窗口： Ctrl+Shift+W

1. 同時打開多個編輯器（查看多個文件）

1. 新建文件 Ctrl+N

1. 文件之間切換 Ctrl+Tab

1. 切出一個新的編輯器（最多 3 個） Ctrl+\，也能夠按住 Ctrl 鼠標點擊 Explorer 裏的文件名

1. 左中右 3 個編輯器的快捷鍵 Ctrl+1 Ctrl+2 Ctrl+3

1. 3 個編輯器之間循環切換 Ctrl+

1. 編輯器換位置， Ctrl+k而後按 Left或 Right

  代碼編輯

  格式調整

1. 代碼行縮進 Ctrl+[ 、 Ctrl+]

1. Ctrl+C 、 Ctrl+V 複製或剪切當前行/當前選中內容

1. 代碼格式化： Shift+Alt+F，或 Ctrl+Shift+P 後輸入 format code

1. 上下移動一行： Alt+Up 或 Alt+Down

1. 向上向下複製一行： Shift+Alt+Up 或 Shift+Alt+Down

1. 在當前行下邊插入一行 Ctrl+Enter

1. 在當前行上方插入一行 Ctrl+Shift+Enter

  光標相關

1. 移動到行首： Home

1. 移動到行尾： End

1. 移動到文件結尾： Ctrl+End

1. 移動到文件開頭： Ctrl+Home

1. 移動到定義處： F12

1. 定義處縮略圖：只看一眼而不跳轉過去 Alt+F12

1. 移動到後半個括號： Ctrl+Shift+]

1. 選擇從光標到行尾： Shift+End

1. 選擇從行首到光標處： Shift+Home

1. 刪除光標右側的全部字： Ctrl+Delete

1. 擴展/縮小選取範圍： Shift+Alt+Left 和 Shift+Alt+Right

1. 多行編輯(列編輯)：Alt+Shift+鼠標左鍵，Ctrl+Alt+Down/Up

1. 同時選中全部匹配： Ctrl+Shift+L

1. Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行，後面自定義快鍵鍵中，設置與 Ctrl+Shift+K 互換了)

1. 回退上一個光標操做： Ctrl+U

   重構代碼

1. 找到全部的引用： Shift+F12

1. 同時修改本文件中全部匹配的： Ctrl+F12

1. 重命名：好比要修改一個方法名，能夠選中後按 F2，輸入新的名字，回車，會發現全部的文件都修改了

1. 跳轉到下一個 Error 或 Warning：當有多個錯誤時能夠按 F8 逐個跳轉

1. 查看 diff： 在 explorer 裏選擇文件右鍵 Set file to compare，而後須要對比的文件上右鍵選擇 Compare with file_name_you_chose

   查找替換

1. 查找 Ctrl+F

1. 查找替換 Ctrl+H

1. 整個文件夾中查找 Ctrl+Shift+F

   顯示相關

1. 全屏：F11

1. zoomIn/zoomOut：Ctrl +/-

1. 側邊欄顯/隱：Ctrl+B

1. 顯示資源管理器 Ctrl+Shift+E

1. 顯示搜索 Ctrl+Shift+F

1. 顯示 Git Ctrl+Shift+G

1. 顯示 Debug Ctrl+Shift+D

1. 顯示 Output Ctrl+Shift+U

 

(4)用戶設置（保存格式化）

{
    "files.associations": {
        "*.wxml": "xml",
        "*.wxss": "css"
    },
    "editor.fontSize":18,
    "editor.formatOnType": false,
    "editor.formatOnSave": false,
    "git.path": "E:/wprogram/Git/cmd/git.exe",
    "terminal.integrated.rendererType": "dom",
    "emmet.includeLanguages": {"vue": "html"},
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
    ],
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    "javascript.format.enable": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.validation.template": false
}