VSCODE的插件系列
使用vscode進(jìn)行開發(fā)怎么能少的了插件呢
[圖片上傳失敗...(image-5f56fc-1541994810555)]
豐富的插件讓vscode更加好用 順便推薦圖床（圖床地址）
美化插件
-
background 給編輯器窗口加個背景氮凝！唯一的缺點(diǎn)是vscode會顯示已損壞炭分，當(dāng)然啦诉瓦，并不影響使用
image
可以參考以下配置
"background.useDefault": false,
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "100%",
"height": "100%",
"background-position": "100% 90%",
"background-size": "auto 60%",
"background-repeat": "no-repeat",
"opacity": 0.1
},
"background.customImages": [
"背景圖片地址1",
"背景圖片地址2",
"背景圖片地址3"
],
- carbon-now-sh 一個非常好看的代碼截圖工具 整合之后 選中然后快捷鍵就能截圖啦 [圖片上傳失敗...(image-9bcfc1-1541994810555)]
開發(fā)輔助
Debugger
- Debugger for Chrome 看名字就知道了
- open in browser 懶得開瀏覽器用的
-
Quokka.js 實(shí)時(shí)計(jì)算，查看結(jié)果
image
路徑補(bǔ)全以及包大小
- File Peek
- Import Cost 計(jì)算引入需要占用多大的地方
- Path Intellisense
npm
- npm
- NPM-Scripts 方便運(yùn)行腳本
格式化
- ESLint
- Prettier 格式化
- Vetur vue格式化以及相關(guān)配置
- Vue 2 Snippets
eslint 和 prettier配合使用闸拿，vue自動保存格式化的配置
"vetur.format.defaultFormatter.html": "none", // 默認(rèn)html的方法
"eslint.autoFixOnSave": true, // 自動保存
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
"prettier.singleQuote": true, // ' or ""
"prettier.semi": false, // 分號
"prettier.eslintIntegration": true, // 走eslint
其他
- GitLens 比自帶的git好用多了的git 還能顯示xx行是誰什么時(shí)候提交的
- Settings Sync 同步設(shè)置到git上
強(qiáng)烈推薦 具體安裝步驟可以參考其他人的博客
這里就寫一下mac下的快捷鍵
downloadSettings ??D
extension.updateSettings ??U
最后送上我當(dāng)前配置的gist，有需要的可以安裝上setting sync后將創(chuàng)建的gist改成這個來自動獲取插件哦
gist 地址
