高效前端開發 - Visual Studio Code

時間 2019-11-08

標籤高效前端開發 visual studio code 欄目 Visual Studio 简体版

原文原文鏈接

本文是根據我在公司演講（2019年8月）的高效開發主題PPT從新總結髮布的一篇文章。有興趣瞭解PPT的能夠前往百度網盤下載：高效開發 - VSCode.pptx，提取碼: yfkb。

Visual Studio Code（後面簡稱VSCode）已經出來有幾年了，爲何還要寫這篇？緣由是，我以爲這個編輯器強大到你不及時去了解嘗試新的插件，你將沒有辦法時刻保持最高效的開發狀態。也許本篇不少內容你已熟悉，可是我相信你依舊能從本文中受益。javascript

VSCode簡介

適合本身的編輯器能改變你的工做方式和效率，若是你也在用VSCode不妨思考一下。

Q1：一個編輯器真的值得花時間來介紹嗎、還能提升效率？
Q2：你的VSCode內置終端是CMD？Powershell仍是？
Q3：你瞭解你裝的每一個插件的用途嗎？
Q4：建立一個臨時測試用的腳本，你會怎麼操做最快速？

先看一張近幾年的幾款常見的IDE發展趨勢css

顯然VSCode日新月異，確實他在衆多前端開發IDE中一直在更強大。來自官方的Slogan：「Visual Studio Code 從新定義了代碼編輯」。html

我簡單總結了如下幾點：前端

免費、開源、多平臺
智能提示，代碼片斷，快速補全
方便的調試能力
內置Git
豐富的插件

經常使用插件推薦

快樂程序員必備插件

做爲一名快樂的前端開發工程師，必不可少的插件以下：vue

當你發現開發的樂趣大大的，效率天然提升了。咳咳咳！好了不開玩笑了。上面幾款插件確實對一部分有用，但重磅推薦的是下面這些。java

實用開發插件推薦

🎉🎉🎉強烈推薦的幾款插件：node

Settings Sync：用於編輯器插件、設置相關等同步到GitHub Gist的插件，當多個開發設備開發環境統一很是有用。（興趣閱讀：Visual Studio Code 設置同步到github的插件介紹及使用方法(Settings Sync)）
ESLint：用於檢測JS代碼規範的插件。
GitLens：查看git記錄、對比git分支等強大的Git管理工具。
Vetur：Vue開發者必備。
Bracket Pair Colorizer：針對JS代碼中的括號進行彩色配對。

🎉🎉比較推薦的幾款插件：webpack

Better Comments：很是醒目的註釋，讓代碼更容易閱讀。
Bookmarks：打記號標籤，經過快捷鍵快速在很長的代碼中切換多個位置。
Live Server：快速啓動一個本地服務器，對於編譯好的靜態項目能夠快速訪問。
Path Autocomplete：文件路徑補全，超級好用。
Prettier：代碼格式化工具，也還行，上手快速，配置簡單。
Version Lens：針對package.json的npm包依賴進行版本檢測。

其餘可選插件（就不作過多的介紹了）：git

Material Theme：我的喜愛主題。
Material Icon Theme：我的喜愛ICON。
Debugger for Chrome：還能夠不過大部分狀況下我disabled。
Document This
Live Share：多人協做。
Visual Studio IntelliCode：微軟官方的智能提示插件，可是我我的感受有時候有點智障，通常我給disable了。
Import Cost：導入npm包的體積查看。
Winter is Coming Theme：看起來還行的主題，不過我沒裝XD。

還有些我以爲也還不錯，可是基本上是disabled狀態的插件，也不過多介紹了。有興趣能夠搜索一下：程序員

Quokka、carbon-now-sh或Polacode、Color Highlight、Markdown All in One、Code Runner、LeetCode、JavaScript (ES6) code snippets、Python、PlantUML等。

關於插件的補充說明

爲何我強烈推薦的插件就幾個，爲何不少不錯的插件我安裝了卻要disable。由於插件確實會佔用編輯器的性能，裝的太多極可能形成編輯器使用異常，甚至同類插件存在衝突都有可能。我在演講PPT以前，找了公司許多前端了解了他們開發的習慣，不少開發者安裝插件並不知道具體用途或者安裝了用了幾回就不用了。那麼我給的插件安裝建議以下：

明確你所用的插件用途
針對不經常使用的插件進行關閉
針對某些項目才使用的插件請在workspace啓用
不要同時啓用多個相似功能的插件，好比格式化代碼插件

這樣儘可能能保持開發環境穩定。這就是Q3的解答了，還滿意嗎？

編輯器設置

經常使用的快捷鍵，真的須要用心去學習，儘量多記一些，這不只是VSCode提高效率開發的方法，任何工具都是須要的。（如下內容Windows將command換成Ctrl便可）

command + k, command + s：經過這個組合鍵，多看看快捷鍵
command + b：側欄展開收縮
command + j：面板（問題、輸出、調試、終端面板）展開收縮
command + ,：修改設置
command + shift + p：顯示全部指令，等待輸入執行
command + shift + e：顯示文件側欄
command + shift + f：顯示搜索側欄
command + shift + s：顯示調試側欄
Option + command + s：所有保存
...

還有不少代碼上的快捷鍵，包括收縮、註釋、多選（多行、內容）等等，網上介紹太多了，你們有興趣能夠進一步瞭解。

補充說明

若是你發現某些快捷鍵不能用了。那必定是有其餘軟件佔用了全局快捷鍵，只能慢慢排查了，我知道的Windows下有款軟件能夠查看系統快捷鍵使用狀況，叫作Windows Hotkey Explorer，你們自行下載一下。（興趣閱讀：關於sublime text 3(3103)版本Ctrl+Alt+P沒法正常使用解決辦法）

VSCode高級設置

經過command + ,，咱們來修改編輯器的默認設置，這裏我不太喜歡他的可視化設置界面，我將他切換到代碼模式，手動添加以下代碼：

{
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "files.associations": {
    "*.tag": "html",
    "*.css": "css",
    "*.jsp": "html",
    "*.ejs": "html",
    "*.wxml": "html",
    "*.wxss": "css"
  }
}

上面三個設置說明

分隔符去掉了–，由於Html代碼中的Css類名經常使用到，若是雙擊不能選中完整類名，好痛苦。
命令行修改緣由？若是在Windows下開發，我沒法忍受Windows的命令行或者PS須要按Ctrl + C後還要Y一下。因此換成了Git Bash，請注意你的Git安裝路徑進行調整。這就是Q2的解釋！
其餘語言的頁面，須要使用HTML語法高亮配對的話，該設置能夠針對不一樣文件後綴的文件作相同的語言模式開發。

上面是一些簡單的配置，沒有配置經驗的能夠先試試效果。接下來會有些複雜的設置。

結合插件的配置：

不少插件都有豐富的配置項來提升成產效率，下面舉幾個例子。

Prettier

編碼風格須要全局配置的話，你就能夠嘗試以下配置：

{
  "prettier.printWidth": 160,
  "prettier.singleQuote": true,
  "prettier.semi": false,
}

Path Autocomplete

項目中若是有內置文件夾映射到@，好比Nuxt、或者手動配置webpack的目錄alias，那麼下面這段配置很好用了：

{
  "path-autocomplete.pathMappings": {
    "@": "${folder}/client",
  }
}

那麼你在Nuxt項目中輸入@，就能自動映射到項目目錄的client，並提示client內的文件夾了。

Vetur

若是須要配合eslint，並保存自動格式化代碼能夠嘗試下面設置：

{
  "eslint.enable": true,
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    }
  ],
  "html.format.enable": false,
  "javascript.format.enable": false,
  "vetur.format.defaultFormatter.css": "prettier"
}

以上配置結合我的習慣進行調整便可。

其餘技巧

該部分主要是PPT演示實操，故文章簡單介紹一下。

針對開頭的幾個問題

JavaScript調試

自定義Launch.json
Code Runner插件解決
Debugger for Chrome插件解決

前者建議建立一個專用的測試目錄做爲項目目錄，配置好Launch.json，例如我這裏配置以下：

{
  "version": "1.0.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch file",
      "program": "${file}"
    }
  ]
}

這段配置寫好後，你就能夠對單個JS文件進行代碼調試了。若是常常測試代碼片斷，那就啓用Code Runner插件吧。

若是須要瀏覽器中的頁面調試，Debugger for Chrome或者Live Server啓動一個頁面來調試也很方便了。