vscode编辑器配置

一、配置

1、打开默认配置文件

ctrl + shift + p 输入 open default settings

2、导出配置文件

ctrl + shift + p 输入 export

3、导入配置文件

ctrl + shift + p 输入 import

4、鼠标滚轮控制编辑区字体大小
设置中搜索mousewheel开启即可

5、菜单栏字体大小
设置中搜索Zoom Level进行倍数放大

6、快捷键搜索
image

二、插件

1、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

编辑器汉化插件

2、open in browser

在浏览器中打开html资源

3、Auto Rename Tag

自动重名米标签

4、Live Server

静态文件服务器

5、Path Intellisense

文件路径智能提示

6、Markdown Preview

实时预览

7、Prettier - Code formatter

代码格式化

8、code runner

使用node快速执行js代码

9、vetur

[vue2使用]

10、volar

[vue3使用]

11、VueHelper

vue语法提示

12、Turbo Console Log

对框选内容快速生成打印日志代码快
ctrl + alt + L

13、GitLens

git仓库文件状态追踪插件

14、Auto Import

自动优化导入

15、Todo Tree

todo列表追踪

16、Regex Previewer

正则结果可视化预览

17、px to rem

像素单位转换

18、SVG View

svg图片预览

19、Settings Sync

配置同步

20、IntelliJ IDEA Keybindings

vscode中启用idea intllij编辑器快捷键映射
用法

21、JavaScript (ES6) code snippets

es6语法检测+自动识别

三、插件批量迁移

进入C:\Users\用户名\.vscode将当前目录下的extensions文件夹复制到目标主机上的相同路径即可

四、配置node语法提示

npm install --save-dev @types/node

五、新建代码用户片段

vscode新建代码用户片段目的为了以后方便开发,快捷输出全局代码片段。
打开vscode 点击“文件”>“首选项”>“用户片段”,点击“新建全局代码片段文件”,按需求输入自己想输入的用户代码片段。

{
	// Place your vue-basic 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "vm",
		"body": [
			"var vm = new Vue({",
			"el: '#root',",
			"data: {",
			"",
			"},",
			"methods: {",
			"",
			"},",
			"computed: {",
			"",
			"}",
			"})"
		],
		"description": "Log output to console"
	}
}

“prefix”: “vm”, 为要输入的快捷代码,输入后按“tab”键,body里为你想要输出的内容。

六、参考

史上最全vscode配置使用教程

VSCode 基础必备插件 超实用

修改默认终端为cmd

VsCode各提示图标的含义

posted @ 2022-10-27 10:14  黄河大道东  阅读(120)  评论(0编辑  收藏  举报