2020必备VS Code 插件(内附 gif 图)
source link: https://juejin.im/post/5e440fd4e51d4527271e8b79
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2020必备VS Code 插件(内附 gif 图)
推荐几个非常实用的 VS Code 插件. 附 gif 图.
提升开发效率的插件
1. Better Comments
Better Comments 你可以使用不同的前缀来让注释显示为不同的颜色。 非常适合快速扫描并发现重要的代码片段。 若使用的话, 建议团队统一规范.
感谢评论区推荐: Todo Tree,虽然只能标记TODO和 FIXME,但是可以标注在html注释当中,并且在边上导航条有个小图标,点进去可以查看哪些文件哪一行被标记过. 大家可以试一下.
2. Bracket Pair Colorizer
你是否经常在项目中出现查找是否缺失括号. 这是一件非常浪费时间的事情. 使用上面这款插件, 它可以帮你用不同的颜色标识括号, 是不是很棒.
3. change-case
change-case 提供了一种简单的方法来将单词或变量名更改为各种情况,包括 camelCase、snake_case、TitleCase…… 这种再多人合作, 遇到不一致的代码时, 可以极大地提高效率.
4. ES7 React/Redux/GraphQL/React-Native snippets
如果每创建一个组件都要重复地写样板代码, 那真的是非常浪费时间. 这个插件有很多有用的 snippets 片段, 你可以快速初始化一个样板代码, 节省大量时间.
5. ESLint
这一个插件应该都有安装, 好处不多讲了. 直接看上图吧~
6. GitLens
GitLens 是一个非常非常好用的插件,可以让您了解 git 的提交历史。精确到行. 甩锅怎么甩得快, 就靠它了.
7. Import Cost
Import Cost 有助于你认识到你引入的文件大小。 它以内联方式显示每个导入的大小,如果导入大于正常大小,则显示红色和黄色警告颜色。
8. indent-rainbow
通过颜色区分, 让你一眼就看出缩进.
9. javascript console utils
力荐啊. 只需要找到你想 console.log 的变量, 按住快捷键, 即可出现一个带变量名的 console
10. Prettier
这个是非常重要的。 用 alt + shift + F 自动格式化你的代码,或者你可以让它在每次保存时自动格式化。节省了你很多缩进, 前后空格等代码风格上的时间. 保持一样的 prettier 配置, 在团队合作中也是非常重要的.
11. Version Lens
跟踪 npm 包 的所有最新版本可能很麻烦。 版本镜头显示你如何内联你安装的版本包。将 json 与当前版本进行比较。
提升美观的插件
file-icons
让不同文件有不同的图标Fira Code
将 === 变成 三等号, 这个看个人喜好.
不再使用的插件
当太多插件被添加到 VScode 中, 电脑小风扇就会呼呼呼地响. 因此我会卸载一些没必要的插件.
Auto-close tag & Auto Rename Tag
现在,这些功能大部分都包含在 VS 代码中. 可以移除这个插件了
Color Highlight
突出显示任何 CSS 颜色值及其所代表的颜色。 同样的, VS 中现在在值旁边显示了一个彩色的框,已经足够了.
如果你内存够. 尽管安装.
希望本篇文章对你有帮助~
- 欢迎关注「前端加加」, 定期分享优质文章
- 回复加群,邀你进技术群,长期技术交流学习
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK