插件介紹

HTML Snippets
> 初級H5代碼片段及提示

HTML CSS Support
> 初級H5代碼片段及提示

Debugger for Chrome
> 讓 vscode 映射 chrome 的 debug功能，靜態頁面都可以用 vscode 來打斷點調試

jQuery Code Snippets
> jquery 重度患者必須品，廢話不多說

vscode-icon
> 讓 vscode 資源樹目錄加上圖標，必備良品！

Path Intellisense
> 自動路勁補全，默認不帶這個功能的，趕緊裝

beautify
> 格式化代碼的工具

Prettier
> 格式化代碼的工具,一鍵美化你的JavaScript/TypeScript/CSS代碼。

Color Highlight
> 直觀展示你定義的顏色。

Atuo Rename Tag
> 修改 html 標簽，自動幫你完成尾部閉合標簽的同步修改

GitLens
> 豐富的git日志插件

fileheader
> 頂部注釋模板，可定義作者、時間等信息，并會自動更新最后修改時間

Bracket Pair Colorizer
> 讓括號擁有獨立的顏色，易于區分?？梢耘浜先我庵黝}使用。代碼塊高亮.

Open-In-Browser
> 此插件在快捷菜單中添加了在默認瀏覽器查看文件選項，以及在客戶端（Firefox，Chrome，IE）中打開命令面板選項

Quokka
> Quokka 是一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易于配置，并能夠預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用。
``` // ctrl + shift + p 搜索 quokka 命令 執行
// 要打開新的quokka文件（Cmd/Ctrl + K, J對于JavaScript或Cmd/Ctrl + K, TTypeScript），請在現有文件（Cmd/Ctrl + K, Q）上（重新）啟動它。 ```
使用：先shift+cmd+p （ctrl+shift+p）輸入 quokka 選擇 new javascript 就行了

CSS Peek
> 你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。

SVG Viewer
> 此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件并查看它們。同時，它還包含了用于轉換為 PNG 格式和生成數據 URI 模式的選項。

TODO Highlight
> 這個插件能夠在你的代碼中標記出所有的 TODO 注釋，以便更容易追蹤任何未完成的業務。在默認的情況下，它會查找 TODO 和 FIXME 關鍵字。當然，你也可以添加自定義表達式。// 在命令窗 搜索todo使用命令 1. background
背景圖片可自定義//"background.enabled": false,//卸載插件開啟 "background.useDefault": false, "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index": "99999", "width": "100%", "height": "100%", "background-position": "0% 0%", "background-size": "cover", "background-repeat": "no-repeat", "opacity": 0.1 }, "background.customImages": [ "file:///F:/BaiduNetdiskDownload/s.jpg", "https://s.cn.bing.net/th?id=OSA.uMbS0SjznPW79w&w=230&h=160&c=8&rs=1&pid=SatAns" ], 1. Indenticator
高亮縮進線

Auto Close Tag
> 自動添加HTML / XML關閉標簽（必備）

Git History
> 以圖表的形式查看git日志

htmltagwrap
> 可以在選中HTML標簽中外面套一層標簽
使用：選擇一大段代碼，然后按“Alt + W”

Image Preview
> 鼠標移到路徑里顯示圖像預覽

Output Colorizer
> 輸出提示的文字顏色有一些變化，方便獲取關鍵信息

Sass
> sass必備

Image Preview
> 鼠標移到路徑里顯示圖像預覽

Image Preview
> 鼠標移到路徑里顯示圖像預覽

Live Sass Compiler
> 實時編譯 sass ,不過需要配置，附上我的配置 "liveSassCompile.settings.formats":[ // You can add more { "format": "compressed",//壓縮 "extensionName": ".min.css",//編譯后綴名 "savePath": "./css"//編譯保存的路徑 } ],

indent-rainbow
> 簡單的插件可以使得對齊更加具有可讀性。色彩填充斷行,實用.

Better Comments
> 更加人性化的注釋

Highlight Matching Tag
> 自動匹配標簽結束地方

vscode-spotify
> 音樂插件

VueHelper
> snippet代碼片段

Vue插件及react

vetur
> 語法高亮、智能感知、Emmet等

VueHelper
> snippet代碼片段

Import Cost > 引入包大小計算,對于項目打包后體積掌握很有幫助

Vue 2 Snippets
> Vue2 片段補全工具

npm Intellisense > 可以在導入語句自動補全npm模塊名稱。

react-beautify > 格式化 javascript, JSX, typescript, TSX 文件

React-Native/React/Redux snippets for es6/es7 > react代碼片段，下載人數超多

主題及個性化

Dracula Official > 目前我覺得是vscode上最漂亮的主題,

One Dark Pro
> 最常用主題

Eva Theme
> 里面包含黑色和白色主題，這個白色主題感覺挺好看的

Boxy Theme Kit
> 最常用主題

One Monokai Theme

Material Theme
> Visual Studio Code最悠久的主題！

基本配置

vacode配置及插件推薦

{"editor.tabSize": 2,"files.associations": {"*.vue": "vue"},"eslint.autoFixOnSave": true,"eslint.options": {"extensions": [".js",".vue"]},"eslint.validate": ["javascript","javascriptreact","vue","vue-html"],"search.exclude": {"**/node_modules": true,"**/bower_components": true,"**/dist": true},"emmet.syntaxProfiles": {"javascript": "jsx","vue": "html","vue-html": "html"},"extensions.autoUpdate": true,"editor.renderWhitespace": "boundary","editor.cursorBlinking": "smooth","workbench.welcome.enabled": true }

總結

以上是生活随笔為你收集整理的typescript语法高亮插件_vscode常用插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。