收集了一些VScode插件,方便開發和提高效率
Git
- Git Blame:在狀態欄顯示當前行的Git信息
- Git History(git log):查看git log(推薦)
- GitLens:顯示文件最近的commit和作者,顯示當前行commit信息(推薦)
- gitignore:.gitignore文件語法
格式化
- Beautify css/sass/scss/less css/sass/less 格式化
- Better Align:對齊賦值符號和註釋
- Better Comments: 編寫更人性化的註釋
- Bracket Pair Colorizer: 讓括號擁有獨立的顏色,易於區分。可以配合任意主題使用。
- Code Spellchecker: 單詞拼寫檢查
- CodeBing:在VSCode中彈出瀏覽器並搜索,可編輯搜索引擎
- Color Highlight:顏色值在代碼中高亮顯示
- Document This:註釋文檔生成
- Beautify:格式化代碼的工具
- change-case:快速更改當前選擇或當前單詞的情況(camelCase、CONSTANT_CASE、snake_case等)。
- Document This: js 的註釋模板 (注意:新版的vscode已經原生支持,在function上輸入/** tab)
- Prettier - Code formatter: 格式代碼
- Sort lines: 排序
- TODO Highlight: TODO高亮顯示
- vscode-fileheader: 頂部註釋模板,可定義作者、時間等信息,並會自動更新最後修改時間
HTML
- Auto Close Tag: 自動閉合html標籤
- Auto Rename Tag: 修改html標籤時,自動修改匹配的標籤
- htmltagwrap:包裹HTML
- HTML Boilerplate:支持h5的語法
- Icon Fonts:用於流行的圖標字體的小片,如字體,Awesome, ionicon,圖標,Octicons,材料設計圖標,還有更多!
- open-in-browser: 瀏覽器預覽
CSS
- HTML CSS Support:讓 html 標籤上寫class 智能提示當前項目所支持的樣式
新版已經支持scss文件檢索 - Color Info: 提供關於css顏色的快速信息。
- CSS Modules:用於CSS模塊的isual Studio代碼擴展
- CSS Peek: 快速定義到css變量
- cssrem:一個CSS值轉REM的VSCode插件
- px2rem: px轉換成rem
JS相關
- Auto Close Tag: Typescript自動import提示
- ESLint:ESLint插件,高亮提示
- JavaScript (ES6) code snippets: ES6語法代碼段
- Auto Import - ES6, TS, JSX, TSX: 自動導入- ES6, TS, JSX, TSX (VSCode擴展)
- AutoFileName: 自動補全文件名稱
- Flow Language Support: flow 語法檢測
- jQuery Code Snippets: jq語法支持提示
- Path Intellisense: 自動路勁補全,默認不帶這個功能的,趕緊裝