工欲善其事,必先利其器
程式設計師離不開的是IDE,本人最常用的是Visual Studio Code
換了電腦後,對新IDE進行重新配置以及安裝外掛是非常繁瑣的,教你移植VSCode配置的方法
- 這裡使用的是VSCode的同步外掛 "Settings Sync"
- 首先VSCode都要安裝外掛 Settings Sync
- 使用github配合,把配置上傳上去,再下載到新的VSCode中同步
- 具體操作可參考官方教程,
- 也可參照大神的bolg 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的檔案圖示