前端開發編輯器的選擇

  在我接觸到Vue環境開發以前，我一直使用的是Submile Text3編輯器。javascript

  Sublime Text：一款具備代碼高亮、語法提示、自動完成且反應快速的編輯器軟件，不只具備華麗的界面，還支持插件擴展機制，用她來寫代碼，絕對是一種享受。相比於難於上手的Vim，浮腫沉重的Eclipse，即使體積輕巧迅速啓動的Editplus、Notepad++，在SublimeText面前大略顯失色，無疑這款性感無比的編輯器是前端開發最愛的選擇。前端

  可是爲何放棄Submile Text3轉而使用VS code編輯器了呢？多是我下載的Submile Text3編輯器的版本不對，也嘗試太重新下載，可是網站的訪問被牆，嘗試了好久仍是沒法解決，不可以隨心所欲的使用 package control安裝我須要的插件。致使個人Vue代碼沒法高亮、語法提示。vue

   1、安裝好VS code以後的第一件事，我就是將編輯器下載一箇中文插件：java

1）打開vscode工具；json

2）使用快捷鍵組合【Ctrl+Shift+p】，在搜索框中輸入「configure display language」，點擊肯定後；weex

3）修改locale.json文件下的屬性「locale」爲「zh-cn」;編輯器

4）重啓vscode工具；函數

若是重啓後vscode菜單等仍然是英文顯示，在商店查看已安裝的插件，把中文插件從新安裝一遍（以下圖），而後在重啓工具。工具

 2、VS code編輯器經常使用的快捷鍵：網站

主命令框

F1 或 Ctrl+Shift+P: 打開命令面板。在打開的輸入框內，能夠輸入任何命令，例如：

• 按一下 Backspace 會進入到 Ctrl+P 模式
• 在 Ctrl+P 下輸入 > 能夠進入 Ctrl+Shift+P 模式

在 Ctrl+P 窗口下還能夠:

• 直接輸入文件名，跳轉到文件
• ? 列出當前可執行的動做
• ! 顯示 Errors或 Warnings，也能夠 Ctrl+Shift+M
• : 跳轉到行數，也能夠 Ctrl+G 直接進入
• @ 跳轉到 symbol（搜索變量或者函數），也能夠 Ctrl+Shift+O 直接進入
• @ 根據分類跳轉 symbol，查找屬性或函數，也能夠 Ctrl+Shift+O 後輸入:進入
• # 根據名字查找 symbol，也能夠 Ctrl+T

經常使用快捷鍵

編輯器與窗口管理

1. 打開一個新窗口： Ctrl+Shift+N
2. 關閉窗口： Ctrl+Shift+W
3. 同時打開多個編輯器（查看多個文件）
4. 新建文件 Ctrl+N
5. 文件之間切換 Ctrl+Tab
6. 切出一個新的編輯器（最多 3 個） Ctrl+\，也能夠按住 Ctrl 鼠標點擊 Explorer 裏的文件名
7. 左中右 3 個編輯器的快捷鍵 Ctrl+1 Ctrl+2 Ctrl+3
8. 3 個編輯器之間循環切換 Ctrl+
9. 編輯器換位置， Ctrl+k而後按 Left或 Right

代碼編輯

格式調整

1. 代碼行縮進 Ctrl+[ 、 Ctrl+]
2. Ctrl+C 、 Ctrl+V 複製或剪切當前行/當前選中內容
3. 代碼格式化： Shift+Alt+F，或 Ctrl+Shift+P 後輸入 format code
4. 上下移動一行： Alt+Up 或 Alt+Down
5. 向上向下複製一行： Shift+Alt+Up 或 Shift+Alt+Down
6. 在當前行下邊插入一行 Ctrl+Enter
7. 在當前行上方插入一行 Ctrl+Shift+Enter

光標相關

1. 移動到行首： Home
2. 移動到行尾： End
3. 移動到文件結尾： Ctrl+End
4. 移動到文件開頭： Ctrl+Home
5. 移動到定義處： F12
6. 定義處縮略圖：只看一眼而不跳轉過去 Alt+F12
7. 移動到後半個括號： Ctrl+Shift+]
8. 選擇從光標到行尾： Shift+End
9. 選擇從行首到光標處： Shift+Home
10. 刪除光標右側的全部字： Ctrl+Delete
11. 擴展/縮小選取範圍： Shift+Alt+Left 和 Shift+Alt+Right
12. 多行編輯(列編輯)：Alt+Shift+鼠標左鍵，Ctrl+Alt+Down/Up
13. 同時選中全部匹配： Ctrl+Shift+L
14. Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行，後面自定義快鍵鍵中，設置與 Ctrl+Shift+K 互換了)
15. 回退上一個光標操做： Ctrl+U

重構代碼

1. 找到全部的引用： Shift+F12
2. 同時修改本文件中全部匹配的： Ctrl+F12
3. 重命名：好比要修改一個方法名，能夠選中後按 F2，輸入新的名字，回車，會發現全部的文件都修改了
4. 跳轉到下一個 Error 或 Warning：當有多個錯誤時能夠按 F8 逐個跳轉
5. 查看 diff： 在 explorer 裏選擇文件右鍵 Set file to compare，而後須要對比的文件上右鍵選擇 Compare with file_name_you_chose

查找替換

1. 查找 Ctrl+F
2. 查找替換 Ctrl+H
3. 整個文件夾中查找 Ctrl+Shift+F

顯示相關

1. 全屏：F11
2. zoomIn/zoomOut：Ctrl +/-
3. 側邊欄顯/隱：Ctrl+B
4. 顯示資源管理器 Ctrl+Shift+E
5. 顯示搜索 Ctrl+Shift+F
6. 顯示 Git Ctrl+Shift+G
7. 顯示 Debug Ctrl+Shift+D
8. 顯示 Output Ctrl+Shift+U

 3、前端開發必備插件

• PostCSS Sorting
• stylelint
• stylefmt
• ESLint
• javascript standard format
• beautify
• Babel ES6/ES7
• Debugger for Chrome
• Add jsdoc comments
• javascript(ES6) code snippets
• vue
• weex
• Reactjs code snippets
• React Native Tools
• Npm Intellisense
• Instant Markdown
• Markdown Shortcuts
• TextTransform