vscode瀏覽器打開html,修改默認瀏覽器
1.vscode瀏覽器預覽open-in-browser
1.1點擊拓展
1.2.輸入open in browser，選擇第一個
1.3.點擊安裝(筆者已安裝，所以顯示的禁用)
1.4.vscode怎么修改默認瀏覽器
在安裝完open in browser插件后，在html代碼中鼠標右鍵可以看到多了兩個打開選擇，點擊選項即可打開瀏覽器進行預覽。
Open in Default Browsers：使用默認瀏覽器打開 快捷鍵：alt+b
Open in Other Browsers：使用其他瀏覽器打開 快捷鍵：alt+shift+b
那么怎么修改默認瀏覽器呢？
1.5.選擇文件---首選項---設置
輸入open-in-browser.default搜索
你會看到右側多了工作區設置，比如你想默認谷歌打開，那就設置默認瀏覽器為chrome，如果是火狐，就設置firefox。設置完畢ctrl+s進行保存，就可了。
無效的情況下可以修改系統的默認瀏覽器試一下
2、自定義快捷鍵
一、打開vscode,選擇文件–首選項–用戶代碼片段
二、在輸入框內輸入javascript類型，打開javascript.json文件
"Print to console": {
"prefix": "c", //自己定義的快捷鍵
"body": [
"console.log();",//快捷鍵要生成的代碼片段
]
}
3、Auto Rename Tag
自動完成另一側標簽的同步修改
4、Auto Close Tag
自動閉合HTML/XML標簽
5、Bracket Pair Colorizer
給括號加上不同的顏色，便於區分不同的區塊，使用者可以定義不同括號類型和不同顏色
6、Markdown Preview Enhanced
實時預覽markdown，markdown使用者必備
7、Material Icon Theme
個人認為最好的vscode圖標主題，支持更換不同色系的圖標，值得點出的是，該插件更新極其頻繁，基本和vscode更新頻率保持一致
8、Path Intellisense
可自動填充文件名。
9、HTMLHint
html代碼檢測
10、htmltagwrap
可以在選中HTML標簽中外面套一層標簽
使用方法：選中要包裹的代碼，快捷鍵Alt+w，默認外包裹標簽為p，可以在設置里搜索htmltagwrap將外包裹標簽改為div
11、Image Preview
鼠標懸浮在鏈接或者裝訂線(gutter)左邊可以預覽到圖片
12、代碼片段類插件
英文叫做 Snippets，就是把常見的代碼模式抽出來，通過 2~3 個鍵就能展開 N 行代碼。
當前最流行的，已有超過 120 萬的下載量。這個插件為 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的語法支持；
13、React-Redux ES6 Snippets
14、jQuery Code Snippets
15、CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 id 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。
安裝完成后打開HTML文件，按住CTRL鍵同時移到鼠標到要查看樣式的類上就可以看到該類的定義了。
跳轉到樣式的定義，按住CTRL鍵同時點擊樣式類的名稱或者在類的名稱上按F12鍵即可跳轉到樣式的定義。CSS Peek在開前端開發過程中節省了好多查找樣式的時間，真的方便極了。
16、Prettier - Code formatter
配置.prettierrc.js
module.exports = {
trailingComma: 'es5',
tabWidth: 4,
semi: true,
singleQuote: true,
}
ctrl + shift + F 格式化文件，如果沒有生效，重新加載下Prettier插件！
17、Window Colors
每個VSCode窗口都可以獨特地自動着色。
18、Code Spell Checker
代碼拼寫檢查器
一個與camelCase代碼配合良好的基本拼寫檢查程序。
此拼寫檢查程序的目標是幫助捕獲常見的拼寫錯誤，同時保持誤報數量較低。
19、Indent-Rainbow
用四種不同顏色交替着色文本前面的縮進
20、Import Cost
對引入的計算大小
21、GitLens
git日志查看插件
GitLens 增強了 Visual Studio Code 中內置的 Git 功能。例如 commits 搜索，歷史記錄和和查看代碼作者身份，還能通過強大的比較命令獲得有價值的見解等等
22、Regex Previewer
這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上，並高亮所有的匹配項。
在並排文檔中顯示當前正則表達式的匹配項
23、Reactjs code snippets
一個 React 自動補工具。
24、Vue VSCode Snippets
VUE代碼自動補全插件
25、quokka
一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易於配置，並能夠預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用
26、filesize
在底部狀態欄顯示當前文件大小，點擊后還可以看到詳細創建、修改時間
27、vscode-icon
可以使VScode左側的資源管理器根據文件類型顯示圖標
28、在node環境下運行js:
code runner
29、Debugger for Chrome
用Chrome來Debug你的JavaScript代碼，或則其它支持Chrome Debugger協議的平台。
30、智能CSS補全工具(IntelliSense for CSS class names in HTML)
基於你的項目以及通過link標簽引用的外部文件，該智能插件提供HTML中CSS class名字的補全。
31、PostCss sorting
css排序
32、現在看到的是界面配置模式，點擊右上角的大括號（如下圖），可以打開 settings.json 文件。
{
// vscode默認啟用了根據文件類型自動設置tabsize的選項
"editor.detectIndentation": false,
// 重新設定tabsize
"editor.tabSize": 4,
// #值設置為true時，每次保存的時候自動格式化；值設置為false時，代碼格式化請按shift+alt+F
"editor.formatOnSave": false,
// #每次保存的時候將代碼按eslint格式進行修復
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的代碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉代碼結尾的分號
"prettier.semi": false,
// #使用帶引號替代雙引號
"prettier.singleQuote": true,
"prettier.tabWidth": 4,
// #讓函數(名)和后面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個按用戶自身習慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按"prettier"格式進行格式化
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// #vue組件中html代碼格式化樣式
"wrap_attributes": "force-aligned", //也可以設置為“auto”，效果會不一樣
"wrap_line_length": 200,
"end_with_newline": false,
"semi": false,
"singleQuote": true
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化stylus, 需安裝Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分號
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false,
"prettier.useTabs": true,
"files.autoSave": "off",
"explorer.confirmDelete": false,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"diffEditor.ignoreTrimWhitespace": false // 兩個選擇器中是否換行
}