插件
前端與Vue 相關(guān)：
Vetur: 格式化Vue文件
Vue 2 Snippets: 代碼快速生成
Auto Rename Tag: HTML/XML 修改
ESLint
Bracket Pair Colorizer: 給花括號(hào)添加顏色
Open HTML in Default Brower: 右鍵使用游覽器打開HTML
Prettier: 格式化 CSS, js, md
Import Cost: 顯示 import 導(dǎo)入的包的大小
Path Intellisense: 文件路徑提示
其他：
sftp: ftp 上傳工具
Todo Tree: 查看 TODO
filesize: 顯示文件大小
file-icons-mac: 文件圖標(biāo)
File Utils: 快速操作文件(創(chuàng)建文件/刪除文件)
Debugger for Chrome
GitLens: git功能擴(kuò)展
默認(rèn)：尾部加分號(hào)，單眼號(hào)
配置設(shè)置
{
"terminal.integrated.fontFamily": "Meslo LG M DZ for Powerline",
"editor.tabSize": 2,
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.iconTheme": "file-icons-mac",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// force-aligned | force-expand-multiline
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
},
"prettier": {
"semi": true,
"singleQuote": true
}
},
"prettier.tabWidth": 2,
"prettier.singleQuote": true,
"prettier.trailingComma": "es5",
"prettier.eslintIntegration": true,
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
}
到此配置結(jié)束了，下面是其他內(nèi)容
其他
一下內(nèi)容都針對(duì) macos 下的 VSCode, Windows 會(huì)有少許差異(比如文件路徑不一樣)
- VSCode 插件安裝位置
~/.vscode/extensions - VSCode 個(gè)人設(shè)置打開方式
Code -> Preferences -> Settings -> settings.json
VSCode 配置打開方式
