资源略长,适合收藏。图片较多。
社区的繁荣发展,插件社区也是热闹非凡,插件多了选择就多了,这里推荐一下我常用的提高工作效率的插件。我用
VSCode
开发,所以一些插件和
Vue
相关。
Vue
VSCode
美化相关
VSCode
- one dark pro主题
https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
one dark pro - GlassIt-VSC(毛玻璃透明效果)
https://marketplace.visualstudio.com/items?itemName=s-nlf-fh.glassit
- vscode-icons
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
- local history ( vscode拥有本地恢复的某一时刻能力)
https://marketplace.visualstudio.com/items?itemName=xyz.local-history
code相关
- codeif(变量起名)
https://marketplace.visualstudio.com/items?itemName=unbug.codelf
search node_moduleshttps://marketplace.visualstudio.com/items?itemName=jasonnutter.search-node-modules
- path-intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
path-intellisense - vscode-element-helper
https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper
- ant-design-vue-helper
https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper
- font awesome icons
https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
- auto-close-tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
close tag - auto-rename-tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
- 自动导入(import) (TypeScript & TSX)
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
- 成对的括号自动添加颜色(bracket-pair-colorizer)
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
- 颜色高亮显示
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
npm-intellisensehttps://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
debugger 系列
- debugger for chrome
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
- debugger for edge(Edge HTML & edge Chromium)
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge
- debugger for firefox
https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug
配置文件系列
-
配置文件.env
编辑以.env结尾的文件.
https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
-
配置文件插件.editorconfig
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
代码格式化
- eslint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- htmlHint
https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint
- prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- Beautify(prettier 选择其一)
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
git相关
- Git History
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
gitlenshttps://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Vue
相关
Vue
- vue-peek
https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
- vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
辅助工具
- setting sync (墙裂推荐)
如果你有多台电脑,想在不同电脑之间同步
VSCode
配置,就用它吧。
注意: 使用gist 时记得使用private,防止私有token泄露。
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
- todo tree
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
live serverhttps://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- jira plugin
https://marketplace.visualstudio.com/items?itemName=gioboa.jira-plugin
setup set-working-project issue-commands - powershell
https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell
如果你也有要分享的插件,欢迎进群或留言。
如果入群失败,添加个人微信,拉你入群,验证消息:前端交流
关注微信公众号,发现更多精彩内容
好文章,我在看❤️
推荐阅读
前端小纠结--VS Code调试配置分享
看过去前端技术流行趋势,布局未来前端技术
前端小纠结-重新认识Cookie的限制
前端小纠结--vue-devtools在IE11中的使用