前端小糾結--提升開發效率VSCode插件推薦

資源略長，適合收藏。

VSCode社區的繁榮發展，插件社區也是熱鬧非凡，插件多了選擇就多了，這裏推薦一下我經常使用的提升工做效率的插件。我用Vue開發，因此一些插件和Vue相關。

VSCode美化相關

• one dark pro主題

  marketplace.visualstudio.com/items?itemN…

• GlassIt-VSC（毛玻璃透明效果）

  marketplace.visualstudio.com/items?itemN…

• vscode-icons

  marketplace.visualstudio.com/items?itemN…

• local history ( vscode擁有本地恢復的某一時刻能力)

  marketplace.visualstudio.com/items?itemN…

code相關

• codeif(變量起名)

  marketplace.visualstudio.com/items?itemN…

• search node_modules

  marketplace.visualstudio.com/items?itemN…

• path-intellisense

  marketplace.visualstudio.com/items?itemN…

• vscode-element-helper

  marketplace.visualstudio.com/items?itemN…

• ant-design-vue-helper

  marketplace.visualstudio.com/items?itemN…

• font awesome icons

  marketplace.visualstudio.com/items?itemN…

• auto-close-tag

  marketplace.visualstudio.com/items?itemN…

• auto-rename-tag

  marketplace.visualstudio.com/items?itemN…

• 自動導入(import) (TypeScript & TSX)

  marketplace.visualstudio.com/items?itemN…

• 成對的括號自動添加顏色（bracket-pair-colorizer）

  marketplace.visualstudio.com/items?itemN…

• 顏色高亮顯示

  marketplace.visualstudio.com/items?itemN…

• npm-intellisense

  marketplace.visualstudio.com/items?itemN…

debugger 系列

• debugger for chrome

  marketplace.visualstudio.com/items?itemN…

• debugger for edge(Edge HTML & edge Chromium)

  marketplace.visualstudio.com/items?itemN…

• debugger for firefox

  marketplace.visualstudio.com/items?itemN…

配置文件系列

• .env配置文件

  編輯以.env結尾的文件.

  marketplace.visualstudio.com/items?itemN…

  // setting.json添加這麼一句，全部以.env開頭的全都匹配
  // vue下的環境配置文件命名推薦：
  // .env.production .env.development 
  // .env.alpha .env.beta .env.rc
  {
    "files.associations": {
  		".env*": "dotenv"
    }
  }
  複製代碼

• .editorconfig配置文件插件

  marketplace.visualstudio.com/items?itemN…

代碼格式化

• eslint

  marketplace.visualstudio.com/items?itemN…

• htmlHint

  marketplace.visualstudio.com/items?itemN…

  // setting.json
  {
    "files.associations": {
      "*.vue": "html", // 我沒試過，由於有vetur
    }
  }
  複製代碼

• prettier

  marketplace.visualstudio.com/items?itemN…

• Beautify(prettier 選擇其一)

  marketplace.visualstudio.com/items?itemN…

git相關

• Git History

  marketplace.visualstudio.com/items?itemN…

• gitlens

  marketplace.visualstudio.com/items?itemN…

Vue相關

• vue-peek

  marketplace.visualstudio.com/items?itemN…

• vetur

  marketplace.visualstudio.com/items?itemN…

輔助工具

• setting sync (牆裂推薦)

  若是你有多臺電腦，想在不一樣電腦之間同步VSCode配置，就用它吧。

  注意： 使用gist 時記得使用private，防止私有token泄露。

  marketplace.visualstudio.com/items?itemN…

• todo tree

  marketplace.visualstudio.com/items?itemN…

• live server

  marketplace.visualstudio.com/items?itemN…

• jira plugin

  marketplace.visualstudio.com/items?itemN…

• powershell

  marketplace.visualstudio.com/items?itemN…

若是你也有要分享的插件，歡迎進羣或留言。

若是入羣失敗，添加我的微信，拉你入羣，驗證消息：前端交流

關注微信公衆號，發現更多精彩內容