一个vue前端的VSCODE插件分享（2018）

VSCODE的插件系列

使用vscode进行开发怎么能少的了插件呢

丰富的插件让vscode更加好用 顺便推荐图床（图床地址）

美化插件

• background 给编辑器窗口加个背景！唯一的缺点是vscode会显示已损坏，当然啦，并不影响使用
  可以参考以下配置

  "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 一个非常好看的代码截图工具 整合之后 选中然后快捷键就能截图啦

开发辅助

Debugger

• Debugger for Chrome 看名字就知道了
• open in browser 懒得开浏览器用的
• Quokka.js 实时计算，查看结果

路径补全以及包大小

• 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 地址