VScode 不能自動補全結束標籤?

在vscod輸入&

結果是這個樣子的,並沒有結束標籤以及括弧

而用sublime的時候輸入同樣的內容,選擇標籤回車

結果是自動完成結束標籤

如何讓VScode和sublime一樣達成一個效果?


你需要的是下面這兩個插件,ctrl + shift + x 後輸入這兩個插件安裝

Auto Close Tag自動閉合HTML標籤

Auto Rename Tag 修改HTML標籤時,自動修改匹配的標籤

以下是常用的VScode 插件

插件列表

名稱 簡述
Auto Close Tag 自動閉合HTML標籤
Auto Import Typescript自動import提示
Auto Rename Tag 修改HTML標籤時,自動修改匹配的標籤
Beautify css/sass/scss/less css/sass/less格式化
Better Comments 編寫更加人性化的注釋
Bookmarks 添加行書籤
Can I Use HTML5、CSS3、SVG的瀏覽器兼容性檢查
Code Runner 運行選中代碼段(支持大量語言,包括Node)
Code Spellchecker 單詞拼寫檢查
CodeBing 在VSCode中彈出瀏覽器並搜索,可編輯搜索引擎
Color Highlight 顏色值在代碼中高亮顯示
Color Info 小窗口顯示顏色值,rgb,hsl,cmyk,hex等等
Color Picker 拾色器
Document This 注釋文檔生成
ESLint ESLint插件,高亮提示
EditorConfig for VS Code EditorConfig插件
Emoji 在代碼中輸入emoji
File Peek 根據路徑字元串,快速定位到文件
Font-awesome codes for html FontAwesome提示代碼段
Git Blame 在狀態欄顯示當前行的Git信息
Git History(git log) 查看git log
GitLens 顯示文件最近的commit和作者,顯示當前行commit信息
Guides 高亮縮進基準線
Gulp Snippets Gulp代碼段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示(支持vue)
HTMLHint HTML格式提示
Indenticator 縮進高亮
IntelliSense for css class names css class輸入提示
JavaScript (ES6) code snippets ES6語法代碼段
JavaScript Standard Style Standard風格
Less IntelliSense less變數與混合提示
Lodash Lodash代碼段
MochaSnippets Mocha代碼段
Node modules resolve 快速導航到Node模塊
Code Outline 展示代碼結構樹
Output Colorizer 彩色輸出信息
Partial Diff 對比兩段代碼或文件
Path Autocomplete 路徑完成提示
Path Intellisense 另一個路徑完成提示
PostCss Sorting css排序
Prettify JSON 格式化JSON
Project Manager 快速切換項目
Quokka.js 不需要手動運行,行內顯示變數結果
REST Client 發送REST風格的HTTP請求
React Native Storybooks storybook預覽插件,支持react
React Playground 為編輯器提供一個react組件運行環境,方便調試
React Standard Style code snippets react standar風格代碼塊
Sass sass插件
Settings Sync VSCode設置同步到Gist
Sort Typescript Imports typescript的import排序
Sort lines 排序選中行
String Manipulation 字元串轉換處理(駝峰、大寫開頭、下劃線等等)
Syncing vscode設置同步到gist
TODO Parser Todo管理
TS/JS postfix completion ts/js前綴提示
TSLint TypeScript語法檢查
Test Spec Generator 測試用例生成(支持chai、should、jasmine)
TypeScript Import TS自動import
TypeSearch TS聲明文件搜索
Types auto installer 自動安裝@types聲明依賴
VSCode Great Icons 文件圖標拓展
Version Lens package.json文件顯示模塊當前版本和最新版本
View Node Package 快速打開選中模塊的主頁和代碼倉庫
VueHelper Vue2代碼段(包括Vue2 api、vue-router2、vuex2)
filesize 狀態欄顯示當前文件大小
ftp-sync 同步文件到ftp
gitignore .gitignore文件語法
htmltagwrap 快捷包裹html標籤
language-stylus Stylus語法高亮和提示
markdownlint Markdown格式提示
npm Intellisense 導入模塊時,提示已安裝模塊名稱
npm 運行npm命令
stylelint css/sass/less代碼風格
vetur 目前比較好的Vue語法高亮
vscode-database 操作資料庫,支持mysql和postgres
vscode-icons 文件圖標,方便定位文件
vscode-random 隨機字元串生成器
vscode-styled-components styled-components高亮支持
vscode-styled-jsx styled-jsx高亮支持


無需插件,請嘗試(html文件編輯狀態):

input TAB

img TAB

div TAB

等等等等

當然,還有!TAB

還有ul&>li*5,然後TAB

vscode可是內置了emmet的啊,比第三方插件方便太多了。可自行搜索emmet語法。


這個是 Visual Studio Code 有意為之的。Sublime 這麼補全其實是不好的。

首先,input 不是閉合標籤,不需要加 &,除非你還在用 xhtml 。

另外,大部分人的習慣其實是寫完標籤直接寫屬性。要是補全了結束標籤,又要用方向鍵回退,大多數時候不大方便。

如果你非要改的話,可以去搜一搜 HTML 的補全插件。


你需要一個插件 HTML Snippets 你輸入input以後就可以實現& input 到底閉合不閉合貌似有歷史原因你可以百度一下,現在貌似都不寫閉合;

如果你想閉合標籤的話 裝一個Auto Close Tag 你輸入DIV 就會幫你閉合


推薦閱讀:

vcxsrv轉發vbox的vs code莫名卡頓,誰的鍋,怎麼解決?
什麼編輯器適合寫Vue?
visual studio code 可以配置c++ 一鍵編譯運行嗎?
為什麼visual studio code 沒有uwp版本?
Visual Studio Code會開源嗎?

TAG:文本編輯器 | VisualStudioCode |