鲁迅有云,工欲善其事必先利其器,VSCode自推出以来,不断受到推崇,到现在成为最受欢迎的代码编辑器(并非IDE集成环境)。

  • 体积小巧,打开一个项目速度较IDE快上好几倍。
  • 扩展丰富,可以下载或是自己开发插件,让你的编辑器变为IDE也是可以的。
  • 自带Git,很方便的使用Git进行项目管理,Git Bash。

这里推荐些非常好用的VSCode插件

美化

Bracket Pair Colorizer
彩色括号,遇到多重括号能更轻松分辨出来

彩色括号.png

Chinese (Simplified) Language Pack for Visual Studio Code
中文语言包,不多说了8

One Dark Pro
我最喜欢的主题,配色很舒服

one dark pro.jpg

vscode-icons
一套好看的文件图标

文件图标.jpg

FiraCode
我使用的字体,不算插件。特点是连体字符,看着很舒服,VSCode设置完字体后记得Font Ligatures(启用或禁用连体字)记得打开。

FiraCode.jpg

前端

html

Auto Close Tag
自动补全html标签

Auto Rename Tag
同时更改html标签首尾,有时会有小Bug

Beautify
一键格式化html文件,不只是html,css,js都可以,可以按自己想要的格式配置

Beautify.jpg

HTML Snippets
html的语法自动补全

HTMLHint
html的语法检测

css

CSS Peek
在html文件里也能追踪到css文件里的class

CSS Peek.jpg

HTML CSS Support
html文件里的css语法补全

js

jQuery Code Snippets
jQuery语法自动补全

npm
能检查package.json里声明的包是否下载,检查版本依赖冲突等,前端开发必备

npm.png

npm Intellisense
能识别已经安装的node_module,并在import或者require时能自动补全

npm Intellisense.jpg

minify
压缩文件中的空格,生成压缩后的.min文件,也可以用于html和css

后端

PHP

PHP Debug
PHP断点调试,不多说了8

PHP IntelliSense
PHP的代码自动补全

phpfmt - PHP formatter
PHP代码格式化,需要配置在setting.json中配置phpfmt.php_bin路径为你的php路径,设置有点小坑,除了json格式带的双引号,还得里面再套一层双引号。。。

phpfmt设置.png

MySQL

MySQL
让你的VSCode摇身一变,成为轻量级数据库管理系统。在写后端代码的时候可以少开一个数据库管理系统减少电脑内存消耗

mysql.jpg

如果你的MySQL版本大于8.0,那么用这个插件连接数据库可能会报出ER_NOT_SUPPORTED_AUTH_MODE的错误,这是验证方式不同造成的,命令行登录MySQL,执行以下命令更改验证方式即可。
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'

杂项

Settings Sync
备份vscode设置、插件设置、代码段到git,必备插件,不用多说了8。辛苦配置大半天,重装回到解放前。

DotENV
让你灰蒙蒙的.env文件语法高亮

env.jpg

GitLens — Git supercharged
让你的文件每一行都显示出当前行的Git信息,鼠标移动到信息上还会在悬浮窗中显示详细信息,非常好用

gitlens.jpg