私藏多年的vscode插件分享,让你成为一个高效开发的程序员

vscode插件就像手机里的应用商店一样,可以让我们在高效代码开发、为了美观的代码格式,可以更好的高逼格分享代码等系列功能,本文特意整理了艾编程老师多年来使用vscode的经验,整理的插件集希望对您有帮助!

1、简体中文语言包

  • 插件名称:Chinese中文(简体)语言包

  • 作用:将VSCode操作界面转换为中文,对英语不好的朋友,非常友好

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第1张图片

  • 安装完成,重启VScode即可

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第2张图片

  • 查看中文操作界面

 

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第3张图片

2、编辑器主题选择、设置

  • 建议浅色系对眼睛友好

  • 管理 -> 颜色主题 -> 选择自己喜欢的主题即可

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第4张图片

  • 选择自己喜欢的主题

  • Quiet Light

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第5张图片

  • 代码效果

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第6张图片

  • 浅色 + (默认浅色)

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第7张图片

 

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第8张图片

3、vscode-icons 显示代码图标

  • 插件名称:Material Icon Theme

  • 作用:显示 Vscode 文件、文件夹的图标

  • 在VScode扩展插件中搜索 “Material Icon Theme” 即可安装

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第9张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第10张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第11张图片

4、open in brower 通过编辑器直接打开默认浏览器

  • 插件名称:open in brower

  • 作用:该插件可通过编辑器打开默认浏览器显示代码效果

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第12张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第13张图片

5、Live Server 开启本地服务器

  • 插件名称:Live Server

  • 作用:通过插件可以开启本地服务

  • 优点:一边编写代码一边保存,即实时刷新预览,大大提升开发测试效率

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第14张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第15张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第16张图片

6、Auto Rename Tag 自动修改标签对名称

  • 插件名称:Auto Rename Tag

  • 作用:修改标签,自动帮你完成头部和尾部闭合标签的同步修改

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第17张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第18张图片

7、carbon-now-sh  将代码生成一张图片

  • 插件名称:carbon-now-sh

  • 作用:可提升逼格的插件,在实际开发中遇到技术问题或者做部分代码片段分享,可以使用该插件将代码生成一张图片

  • 使用方法:

    • 在VSCode中,选中需要生成图片的代码

    • 打开命令托盘:Windows:Ctrl + Shift + P,Mac:Cmd + Shift + P

    • 输入Carbon,回车

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第19张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第20张图片

8、prettier 格式化代码

  • 插件名称:prettier

  • 作用:格式化美化代码

  • Ctrl + s 保存会自动格式化

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第21张图片

私藏多年的vscode插件分享,让你成为一个高效开发的程序员_第22张图片

温馨提示

本教程有配套的一个系列的操作视频,如果不会可以到主页找到我们,可以获取vscode的详细安装教程哦!

你可能感兴趣的:(WEB前端入门,html5,css,html,前端)