前端vscode设置及插件汇总

231 阅读1分钟

PS设置:

1.编辑-首选项-单位与标尺-标尺单位改像素

2.视图-标尺 打勾

VScode设置:

1.设置auto save-afterdelay自动保存

2.word wrap-on自动换行

3.快捷生成代码:快捷键F1进入首选项:配置用户代码片段-新建全局代码片段

如:修改hh一键生成html结构,键入:

"Print to console": {
		"scope": "html",
		"prefix": "hh",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"\t<title>Document</title>",
			"</head>",
			"<body>",
			    "\t",
			"</body>",
			"</html>",
		],
		"description": "HTML5"
	}

VScode插件:

1.chinese汉化、beautify美化(自行设置快捷键)、openinbrowser浏览器打开、vscode-icons图标美化、polacode代码截图(暂不会使用)、path intellise(导师推荐,暂不会使用)

2.Sass/Less/Stylus/Pug代码压缩,拓展设置:

compile-hero:Generate-minified-CSS打勾(自动生成压缩版CSS)

compile-hero:SCSS-output-directory清空路径(让文件在同级生成)

compile-hero:Notification-toggle去勾(防止自动保存未输入完持续报错)

创建sass后缀文件输入内容后在右下角把Compile Hero:OFF改成ON(开启插件)