跳至主要內容

vscode

chanchaw大约 3 分钟tools

分词符号

在系统设置中搜索 wordSeparators 删除其中的减号和下划线,之后双击单词时会将这两个符号链接的多个单词认为是一个变量被选中

放大缩小

ctrl+shift+= 放大,缩小:ctrl+shift+-

错误与异常

跳转到下一个错误,Go to Next Problem(Error,Warning,Info),系统默认快捷键 Alt + F8

自动修复

editor.action.quickFix 和 problems.action.showQuickFixes

格式化代码

shift + alt + f 在文档中通过右键菜单设置默认格式化工具

vscode格式化代码
vscode格式化代码

按照上面步骤设置 prettier 作为默认的格式化工具

折叠代码

在 Keyboard Shortcuts 中搜索:fold 是折叠 unfold 是展开。 折叠当前页面全部方法:ctrl+k、ctrl+0,展开是:ctrl+k、ctrl+j 折叠当前方法:ctrlshift[ ,展开是:ctrlshift]

也可以自定义折叠,使用 //#region 表示开始,//#endregion 表示结束

代码补全

以 html 为后缀的文件中输入感叹号,然后出现下拉提示后回车即可自动补全 html 的头代码

取消预览始终打开新标签页

vscode打开标签页取消预览
vscode打开标签页取消预览

显示隐藏终端

vscode显示隐藏终端
vscode显示隐藏终端

自定义代码片段

进入站点 https://snippet-generator.app/open in new window
将需要的原始代码复制到左边的多行文本框中,看下图
vscode自定义代码片段 然后将右边的文本框中的内容拷贝到 vs code 指定的位置,看下面的图片。
vscode自定义代码片段01vscode自定义代码片段02 代码要在指定后缀的文件中使用,本次案例的代码是 html 的代码,所以上面弹出的搜索框中输入 html ,进入 html.json 中,将格式化后的代码黏贴到大括号中。看下图
vscode自定义代码片段03

之后就可以在 html 文件中通过输入 vueapp 一次写入一个代码片段。vueapp 代码片段如下: 在 vue.json 最外层花括号内填写下面代码

	"create vue app": {
		"prefix": "vueapp",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script lang=\"ts\">",
			"import { defineComponent } from 'vue'",
			"",
			"export default defineComponent({",
			"  setup() {",
			"    return {}",
			"  }",
			"})",
			"</script>",
			"<style scoped></style>"
		],
		"description": "create vue app"
	},

括号相关

vscode括号相关
vscode括号相关

保存时候格式化代码

如果项目中使用了 eslint + prettier 通过下面的设置可以在 ctrl + s 保存时格式化代码

vscode保存时格式化代码
vscode保存时格式化代码

调整注释、选中、高亮的文字颜色

vscode修改文字颜色
vscode修改文字颜色

快速定位文件

默认组合键 ctrl+p 弹出类似 IDEA 中查找文件的搜索框,在其中黏贴文件路径和文件名即可

所有当前页面属性和方法

ctrl+shift+o 会罗列出当前页面的所有属性和方法

双击选中带有下划线的word

vscode双击选中带有下划线的整个单词
vscode双击选中带有下划线的整个单词

光标相关

光标移动到 bottom

ctrl+end

光标移动到 top

ctrl+home