前端小纠结--提高开发效率VSCode插件推荐

资源略长，适合收藏。

VSCode社区的繁荣发展，插件社区也是热闹非凡，插件多了选择就多了，这里推荐一下我常用的提高工作效率的插件。我用Vue开发，所以一些插件和Vue相关。

VSCode美化相关

• one dark pro主题

  marketplace.visualstudio.com/items?itemN…

  

• GlassIt-VSC（毛玻璃透明效果）

  marketplace.visualstudio.com/items?itemN…

  

• vscode-icons

  marketplace.visualstudio.com/items?itemN…

  

• local history ( vscode拥有本地恢复的某一时刻能力)

  marketplace.visualstudio.com/items?itemN…

  

code相关

• codeif(变量起名)

  marketplace.visualstudio.com/items?itemN…

• search node_modules

  marketplace.visualstudio.com/items?itemN…

  

• path-intellisense

  marketplace.visualstudio.com/items?itemN…

  

• vscode-element-helper

  marketplace.visualstudio.com/items?itemN…

  

• ant-design-vue-helper

  marketplace.visualstudio.com/items?itemN…

  

• font awesome icons

  marketplace.visualstudio.com/items?itemN…

  

• auto-close-tag

  marketplace.visualstudio.com/items?itemN…

  

• auto-rename-tag

  marketplace.visualstudio.com/items?itemN…

  

• 自动导入(import) (TypeScript & TSX)

  marketplace.visualstudio.com/items?itemN…

• 成对的括号自动添加颜色（bracket-pair-colorizer）

  marketplace.visualstudio.com/items?itemN…

  

• 颜色高亮显示

  marketplace.visualstudio.com/items?itemN…

  

• npm-intellisense

  marketplace.visualstudio.com/items?itemN…

  

  

debugger 系列

• debugger for chrome

  marketplace.visualstudio.com/items?itemN…

• debugger for edge(Edge HTML & edge Chromium)

  marketplace.visualstudio.com/items?itemN…

• debugger for firefox

  marketplace.visualstudio.com/items?itemN…

配置文件系列

• .env配置文件

  编辑以.env结尾的文件.

  marketplace.visualstudio.com/items?itemN…

  // setting.json添加这么一句，所有以.env开头的全都匹配
  // vue下的环境配置文件命名推荐：
  // .env.production .env.development 
  // .env.alpha .env.beta .env.rc
  {
    "files.associations": {
  		".env*": "dotenv"
    }
  }
  

  

• .editorconfig配置文件插件

  marketplace.visualstudio.com/items?itemN…

代码格式化

• eslint

  marketplace.visualstudio.com/items?itemN…

• htmlHint

  marketplace.visualstudio.com/items?itemN…

  // setting.json
  {
    "files.associations": {
      "*.vue": "html", // 我没试过，因为有vetur
    }
  }
  

  

• prettier

  marketplace.visualstudio.com/items?itemN…

• Beautify(prettier 选择其一)

  marketplace.visualstudio.com/items?itemN…

git相关

• Git History

  marketplace.visualstudio.com/items?itemN…

  

• gitlens

  marketplace.visualstudio.com/items?itemN…

  

Vue相关

• vue-peek

  marketplace.visualstudio.com/items?itemN…

  

• vetur

  marketplace.visualstudio.com/items?itemN…

辅助工具

• setting sync (墙裂推荐)

  如果你有多台电脑，想在不同电脑之间同步VSCode配置，就用它吧。

  注意： 使用gist 时记得使用private，防止私有token泄露。

  marketplace.visualstudio.com/items?itemN…

  

• todo tree

  marketplace.visualstudio.com/items?itemN…

  

• live server

  marketplace.visualstudio.com/items?itemN…

  

• jira plugin

  marketplace.visualstudio.com/items?itemN…

  

  

  

• powershell

  marketplace.visualstudio.com/items?itemN…

如果你也有要分享的插件，欢迎进群或留言。

如果入群失败，添加个人微信，拉你入群，验证消息：前端交流

关注微信公众号，发现更多精彩内容