vscode大前端适用插件集合

vscode大前端适用插件集合

你好！ 这是极大提高开发效率的Visual Studio Code插件集合。

2020/04/26 新增
Alibaba Cloud Toolkit: Atom插件Docblockr移植版,非常好用的注释插件
Cloud Toolkit 是免费的本地 IDE 插件，帮助开发者更高效地开发、测试、诊断并部署应用。通过插件，可以将本地应用一键部署到任意服务器，甚至云端（ECS、EDAS、Kubernetes 和 小程序云 等）；并且还内置了 Arthas 诊断、Dubbo工具、Terminal 终端、文件上传、函数计算 和 MySQL 执行器等工具。

• 一键部署本地 IDE 内项目到任意远程服务器
• 远程服务器实时日志查看
• 内置 Terminal 终端
• 文件上传
• HTTP Proxy

1. VS DocBlockr: Atom插件Docblockr移植版,非常好用的注释插件
2. Visual Studio IntelliCode - Preview : 提供AI支持(强化你的代码智能提示),微软出品
3. Surround : 快速包裹代码并且添加对应的条件语句
4. koroFileHeader : 快速添加注解到文件头部(预定义模板),比如创建时间,谁创建的
5. tea-time : 番茄计时器!有助于改善你长期盯电脑的习惯
6. javascript console utils:快速生成console.log
7. clear-console : 快速清除当前文件内的console.log信息,很实用
8. Node JSON Autocomplete : 对于引入json文件提供智能提示，mock数据常用
9. Vue Peek:Vue组件快速跳转
10. Error Gutters : 会把错误显示为图标
11. carbon-now-sh : 快速生成代码图片
12. Bracket Pair Colorizer 2 : 第二版,括号高亮匹配更快速
13. file-tree-generator : tree命令的鼠标操作版,还会输出icon符号
14. TypeScript Import Sorter : 给引入语句进行排序,可以单文件或者整个目录深度遍历
15. JSON Tree View : 可视化跳转json,
16. Import Cost：该插件会在行尾显示导入的包的大小。为了计算包大小，该插件要使用 Webpack 和 babili-webpack-plugin。
17. Color Info：将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了
18. Auto Close Tag：自动添加HTML / XML关闭标签
19. Auto Rename Tag：自动重命名配对的HTML / XML标签
20. Code Runner：非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等安装完成后，右上角会出现：▶
21. Live Server:浏览器实时刷新
22. **Quokka.js: ** Quokka是一个调试工具插件，能够根据你正在编写的代码提供实时反馈
    使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了
23. change-case：虽然 VSCode 内置了开箱即用的文本转换选项，但其只能进行文本大小写的转换。而此插件则添加了用于修改文本的更多命名格式，包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等
24. Chinese (Simplified) Language Pack for Visual Studio Code：中文简体语言包
25. Trailing Spaces：高亮那些冗余的空格，可以快速删掉。
26. filesize:在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
27. Git History:以图表的形式查看 git 日志
28. Git Project Manager:Git Project Manager 可以然你直接一键搜索并打开某个的基于 Git 管理的项目。
29. [GitLens]显示文件最近的 commit 和作者，显示当前行 commit 信息(https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
30. Debugger for Chrome：用 Chrome 来 Debug 你的 JavaScript 代码，或则其它支持 Chrome Debugger 协议的平台。
31. Atom One Light Theme：亮色主题
32. Settings Sync：设置和插件同步开发团队使用，不同的人使用同一个配置

护眼色主题配置参考

欢迎进入个人公众号 ，一起学习啊！