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
}