vscode插件大全_vscode必装插件

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

常用插件整理

Beautify                            # 格式化html js css代码

vscode-icons                        # 文件图标

Partial Diff                        # 对比两段代码或文件

Bracket Pair Colorrizer             # 用来区分括号

Code Spell Checker                  # 用于检测代码语法

Code Runner                         # 用于运行代码

koroFileHeader                      # 用于头部文件注释

PHP IntelliSense                    # PHP自动补全工具

PHP Intellisense -Crane             # PHP自动补全工具

PHP Intelephense                    # PHP智能感知

PHP DocBlocker                      # PHP方法注释

PHP Extension  Pack                 # PHP扩展包

PHP  Debug                          # PHP调试工具,需要配置

Path IntelliSense                   # 路径管理工具

Vetur                               # vue.js代码提示，语法高亮

ESLint                              # 代码检查工具

HTML CSS Support                    # CSS支持工具

HTML Snippets                       # HTML小片段工具

IntelliSense for CSS class names    # CSS类名工具

Draw.io                             # 流程图制作 (新建 .drawio 后缀文件使用，更改 .drawio.png 保存图片文件)

settings.json 文件中相关的配置

{
	// 文件自动保存
	"files.autoSave": "afterDelay",
	// 如果启用，会在打开文件时尝试猜测字符集编码。也可以根据语言配置此设置。
	"files.autoGuessEncoding": false,
	// 支持tpl、dwt 文件高亮渲染方法
	"files.associations": {
		"*.dwt": "html",
		"*.lbi": "html",
		"*.tpl": "html",
		"*.vue": "html"
	},
	"window.zoomLevel": 0,
	// beautify 插件配置
	"beautify.config": {
		"brace_style": "collapse,preserve-inline",
		"indent_size": 4,
		"indent_with_tabs": true, // tab 缩进
		"jslint_happy": true,
		"end_with_newline": true,
		"keep_array_indentation": true,
		"keep_function_indentation": true,
		"space_after_anon_function": true,
		"space_in_paren": true,
		"unformatted": [
			""
		],
		"css": {
			"indent_size": 4
		}
	},
	"workbench.iconTheme": "vscode-icons",
	"[php]": {
		
	},
	// php debug 插件配置
	"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
	"breadcrumbs.enabled": true,
	// php DocBlocker 插件配置
	"php-docblocker.gap": false,
	"php-docblocker.returnGap": false,
	"php-docblocker.useShortNames": true,
	// 为类添加注释时添加命名空间
	"php-docblocker.qualifyClassNames": true,
	"php-docblocker.returnVoid": false,
	"php-docblocker.extra": [
		// "@Description",
		// "@example",
		"@return [type]",
		"@author [Devin] [$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE]",
		// "@since"
	],
	//配置eslint
	"eslint.autoFixOnSave": true,
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		"html",
		{ "language": "vue", "autoFix": true }
	],
	"eslint.options": {
		"plugins": ["html"]
	},
	//为了符合eslint的两个空格间隔原则
	"editor.tabSize": 4,
	"php.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
	"[javascript]": {
		"editor.defaultFormatter": "vscode.typescript-language-features"
	},
	//配置新建文件注释和方法注释
	"fileheader.configObj": {
		"createFileTime": true,//设置为true则为文件新建时候作为date，否则注释生成时间为date
		"autoAdd": true,//自动生成注释，老是忘记的同学可以设置
		"annotationStr": {
			"head": "/*",
			"middle": " * @",
			"end": " */",
			"use": true//设置自定义注释可用
		},
		"headInsertLine": {
			"php": 2
		}
	},
	"fileheader.cursorMode": {
		"description":"",
		"param ":"",
		"return":""
	},
	"fileheader.customMade": {
		"Description":"" ,//文件内容描述
		"Author":"Devin",//编辑人
		"Date": "Do not edit",//时间
		// "LastEditTime": "Do not edit",
		// "LastEditors": "",
	}
}

快捷键配置keybindings.json

// 将键绑定放在此文件中以覆盖默认值
[
	//ctrl+space被切换输入法快捷键占用
	{
		"key":"ctrl+alt+space",
		"command":"editor.action.triggerSuggest",
		"when":"editorTextFocus"
	},
	// ctrl+d删除一行
	{
		"key":"ctrl+d",
		"command":"editor.action.deleteLines",
		"when":"editorTextFocus"
	},
	{
		"key":"ctrl+shift+k",//与删除一行的快捷键互换了：）
		"command":"editor.action.addSelectionToNextFindMatch",
		"when":"editorFocus"
	},
	//ctrl+shift+/多行注释
	{
		"key":"ctrl+shift+/",
		"command":"editor.action.blockComment",
		"when":"editorTextFocus"
	}
]

用户片段输入php快捷信息

"PHP":{
	"prefix": "php",
	"body": [
		"<?php\n$0",
	],
	"description": "php"
}

console.log 快捷配置

"Print to console": {
	"prefix": "log",
	"body": [
		"console.log('$1');",
		"$2"
	],
	"description": "Log output to console"
}