VSCODE的插件系列
使用vscode进行开发怎么能少的了插件呢
[图片上传失败...(image-5f56fc-1541994810555)]
丰富的插件让vscode更加好用 顺便推荐图床（图床地址）
美化插件
-
background 给编辑器窗口加个背景！唯一的缺点是vscode会显示已损坏，当然啦，并不影响使用
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)]
开发辅助
Debugger
- Debugger for Chrome 看名字就知道了
- open in browser 懒得开浏览器用的
-
Quokka.js 实时计算，查看结果
image
路径补全以及包大小
- File Peek
- Import Cost 计算引入需要占用多大的地方
- Path Intellisense
npm
- npm
- NPM-Scripts 方便运行脚本
格式化
- ESLint
- Prettier 格式化
- Vetur vue格式化以及相关配置
- Vue 2 Snippets
eslint 和 prettier配合使用，vue自动保存格式化的配置
"vetur.format.defaultFormatter.html": "none", // 默认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行是谁什么时候提交的
- Settings Sync 同步设置到git上
强烈推荐 具体安装步骤可以参考其他人的博客
这里就写一下mac下的快捷键
downloadSettings ⇧⌥D
extension.updateSettings ⇧⌥U
最后送上我当前配置的gist，有需要的可以安装上setting sync后将创建的gist改成这个来自动获取插件哦
gist 地址
