VS Code界面配色及常用扩展

我比较喜欢简洁一些,所以没有安装太多的扩展,对VS Code的默认界面配色也做了少量的修改。

安装的扩展

Chinese (Simplified) (简体中文)

安装中文支持

Minify

代码压缩。

例如:写好CSS后,按F1,在命令窗口下拉列表中选择:Minify,即可将代码压缩并在当前目录下保存为.min.css,不影响源文件。

PHP Intelephense

安装这个插件后,才能自动格式化PHP代码。

WordPress Snippets

如果有做WordPress方面的开发,安装这个插件可以快速输入WordPress函数。

Python

如果做Python开发,可以安装该插件。

Bracket Pair Colorizer 2

括号使用不同的颜色配对,再也不用数结束括号的数量了。

VS Code内置更好用的括号对功能,不再需要插件了。

配置文件

在设置中搜索php,即可看到“在 settings.json中编辑”的链接,点击打开配置文件,粘贴如下代码:

{
	"php.validate.executablePath": "/opt/lampp/bin/php-7.4.22",
	"editor.minimap.enabled": false, //关闭右侧预览图
	"security.workspace.trust.banner": "never", //关闭鼠标悬停提示
	"search.useReplacePreview": false, //关闭搜索替换拆分窗口
	"editor.formatOnSave": true, //保存时格式化代码
	"editor.formatOnPaste": true, //粘贴时格式化代码
	"editor.formatOnType": true, //敲完一行代码自动格式化
	"files.autoSave": "onFocusChange", //窗口失去焦点自动保存
	"workbench.editor.wrapTabs": false, //编辑器标签页在空间不足时以多行显示
	"editor.insertSpaces": false, //按tab时插入空格
	"editor.detectIndentation": false, //打开文件时基于内容检测Tab Size
	"workbench.statusBar.visible": false, //状态栏是否可见
	"window.menuBarVisibility": "toggle", //关闭菜单栏
	"breadcrumbs.enabled": false, //关闭面包屑导航
	"editor.hover.delay": 1000, //悬停提示延迟时间
	"html.hover.references": false, //关闭HTML属性提示
	"html.hover.documentation": false, //关闭HTML MDN引用
	"css.hover.references": false, //关闭CSS属性提示
	"css.hover.documentation": false, //关闭CSS MDN引用
	"less.hover.references": false, //关LESSS属性提示
	"less.hover.documentation": false, //关闭LESS MDN引用
	"scss.hover.references": false, //关SCSS属性提示
	"scss.hover.documentation": false, //关闭SCSS MDN引用
	"editor.bracketPairColorization.enabled": true, //括号颜色
	"editor.guides.bracketPairs": "active", //括号对块标示
	"intelephense.diagnostics.undefinedClassConstants": false, //PHP未定义错误提示
	"intelephense.diagnostics.undefinedConstants": false, //PHP未定义错误提示
	"intelephense.diagnostics.undefinedFunctions": false, //PHP未定义错误提示
	"intelephense.diagnostics.undefinedMethods": false, //PHP未定义错误提示
	"intelephense.diagnostics.undefinedProperties": false, //PHP未定义错误提示
	"intelephense.diagnostics.undefinedVariables": false, //PHP未定义错误提示
	"intelephense.diagnostics.undefinedTypes": false, //PHP未定义错误提示
	"intelephense.diagnostics.undefinedSymbols": false, //PHP未定义错误提示
	"editor.overviewRulerBorder": false, //右侧滚动条边框
	"workbench.colorCustomizations": {
		"sideBar.background": "#222", //资源管理器区背景颜色
		"editor.background": "#222", //代码编辑区背景色
		"editorGutter.background": "#333", //行号区背景色
		"editor.lineHighlightBackground": "#333", //当前代码行背景色
		"tab.inactiveBackground": "#333", //选项卡默认背景色
		"tab.activeBackground": "#08c", //激活的选项卡背景
		"breadcrumb.background": "#282828", //面包屑导航背景色
		"scrollbarSlider.background": "#333", //右侧滚动条背景色
		"scrollbarSlider.hoverBackground": "#333", //右侧滚动条鼠标悬停背景色
		"scrollbarSlider.activeBackground": "#333", //右侧滚动条鼠标点击背景色
		"statusBar.background": "#08c", //状态栏背景
	},
	"emmet.variables": {
		"lang": "zh-CN"
	}
}
阿里云