一.插入代碼段和字體設置:
{
"editor.fontFamily": "宋體",
"editor.fontSize": 16,
"editor.snippetSuggestions": "top"
}
二、代碼提示快捷鍵設置:
[
{
"key": "ctrl+j",
"command": "-workbench.action.togglePanel"
},
{
"key": "ctrl+j",
"command": "editor.action.triggerSuggest",
"when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
}
]
三。綜合配置文件
"editor.fontFamily": "宋體",
"editor.fontSize": 16,
"editor.formatOnSave": true,
"files.autoSave": "off",
"prettier.printWidth": 120,
"workbench.iconTheme": "vscode-icons",
"git.enableSmartCommit": true,
"workbench.colorTheme": "Visual Studio Light",
"git.autofetch": true,
"window.zoomLevel": 0,
"todohighlight.isEnable": true
四。一些常用的前端插件
Auto Rename Tag
自動重命名配對的HTML / XML標簽
bachground
修改背景,設置編輯器界面的背景圖片。但是好像現在會出錯,具體設置內容在vsc找到插件看詳細信息。
Bootstrap 4 & Font awesome snippets
bootstrap4和font awesome 快速引用和代碼生成。
Color-Highlight
在編輯器中高亮顯示顏色。
Color Picker
代碼的顏色選擇器。
Css Peek
能在源代碼中的字符串中找到對應的css(類和ID)。顯示在那個css文件里,還有在第幾行。
Csscomb
css 、less、sass 的代碼格式化。
Debugger for Chrome
js調試的插件,前端項目在Chrome中運行起來之后,可以直接在VSCode中打斷點、查看輸出、查看控制台,詳細配置見插件說明。
Document This
為js文件生成文檔的代碼注釋。
ESLint
檢查Javascript編程時的語法錯誤。
Git Easy
增加了vscode中自帶的git操作,安裝后按F1調出控制台,輸入git easy [options]完成git操作,代替git bash。
Git History
查看git日志以及圖表和詳細信息。
查看文件的歷史記錄(Git日志)或文件中的行歷史(Git Blame)
Guides
代碼的標簽對齊線。
HTML CSS Class Completion
為基於工作空間上的CSS文件的HTML類屬性提供CSS類名稱提示。
HTML Boilerplate
提供生成標准HTML樣板代碼。
HTML CSS support
css 自動補齊
HTML Snippets
支持HTML5標簽提示
JavaScript (ES6) snippets
支持JavaScript ES6 語法
jQuery Code Snippets
jq代碼段提示。
JS-CSS-HTML Formatter
代碼格式化。
Lodash
lodash 函數提示。
Lorem ipsum
快速填充文本
Npm Intellisense
在import語句中自動完成npm模塊引入的代碼插件。
open in browser
在瀏覽器中打開,安裝后在左側目錄中右鍵點擊會出現 open in browser 選項。
Path Intellisense
文件路徑提示。
Settings Sync
編輯器設置同步,包括插件,配置等。
詳情點擊=》https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
VS Code CSS Comments
css代碼注釋。
vscode-browser-plugin
在編輯器內預覽HTML,
通過開啟端口(3000)監聽當前打開項目的根目錄,在編輯器內預覽網站,省去了頻繁切換瀏覽器、編輯器看頁面效果,修改代碼后自動刷新頁面。
vscode-icons
文件圖標。
Vue 2 Snippets
vue 代碼提示,高亮。
(ps:使用其他框架,直接搜就好,像是react,angular,就會出現相關的代碼提示和語法支持常用插件)