我的VSCode

得德發表於2019-01-08

工欲善其事,必先利其器

程式設計師離不開的是IDE,本人最常用的是Visual Studio Code

換了電腦後,對新IDE進行重新配置以及安裝外掛是非常繁瑣的,教你移植VSCode配置的方法

如果覺得麻煩,那就對照之前的配置重新來過吧

記錄下我的VSCode的外掛,僅供參考

  • Auto Close Tag

自動新增HTML / XML關閉標籤

  • Auto Import

自動import提示

  • Auto Rename Tag

自動重新命名配對的HTML / XML標籤

  • Babel ES6/ES7

這個是ES6,ES7語法加亮檢查外掛

  • Beautify

格式化javascript,JSON,CSS,Sass,和HTML

  • Better Comments

編寫更加人性化的註釋

  • Bracket Pair Colorizer

每一對括號用不同顏色區別

  • Chinese (Simplified) Language Pack for Visual Studio Code

適用於 VS Code 的中文(簡體)語言包

  • Code Runner

快速的選中程式碼塊然後執行

  • Color Highlight

顏色程式碼高亮

  • Document This

新增註釋塊

  • ESLint

是用來統一JavaScript程式碼風格的工具

  • filesize

在底部狀態列顯示當前檔案大小,點選後還可以看到詳細建立、修改時間

  • Folder Indexing

提高檔案的索引速度[常駐於記憶體中],這對於專案比較大的小夥伴必須安裝啊

  • Git History

顯示git log和line history

  • gitk

查閱git提交歷史,版本實時比對

  • GitLens — Git supercharged

顯示檔案最近的 commit 和作者,顯示當前行 commit 資訊

  • HTML Boilerplate

通過使用 HTML 模版外掛,你就擺脫了為 HTML 新檔案重新編寫頭部和正文標籤的苦惱

  • HTML CSS Support

在編寫樣式表的時候,自動補全功能大大縮減了編寫時間

  • HTML Snippets

超級實用且初級的 H5程式碼片段以及提示

  • vscode IntelliSense for CSS class names in HTML

在工作區自動掃描css檔案類名,自動提示class類名

  • jsx

react的jsx語法支援

  • Markdown Preview Enhanced

markdown檔案預覽外掛

  • markdownlint

靜態分析軟體提示錯誤,warning。或者編寫的風格問題

  • npm Intellisense

自動引入node_modules中的JS

  • Partial Diff

對比兩段程式碼或檔案

  • Path Intellisense

自動路勁補全

  • AProject Manager

在多個專案之前快速切換的工具

  • Reactjs code snippets

_ Reactjs code snippets語法支援,快捷命令_

  • stylus

stylus語法提示

  • Turbo Console Log

自動新增console.log, 快捷鍵 ctrl + alt + l, 註釋 alt + shift + c

  • Velocity

vm模版的支援

  • View In Browser

在瀏覽器中開啟html

  • vscode-icons

vscode的檔案圖示

相關文章