vs code 简易使用教程（前端）

一、常用设置：

1、设置tab为2空格

用户首选项 =》 设置 => 直接搜索editor.tabSize 设置为2

2、设置换行采用\n形式

用户首选项 =》 设置=> 直接搜索files:eol进行设置为\n。

如果文件已经是\r\n了，可以通过下图的方式进行转换

二、vs code 常用插件

安装方法：点击vscode左侧扩展，搜索插件，点击安装

• Path Intellisense 可以查找文件路径
• Auto Rename Tag 改变开始标签自动修改结尾标签
• Document This js 的注释模板( 按两次 Ctrl+Alt+D ，只在js文件中有效)
• beautify 格式化代码的工具（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）
• AutoFileName  文件路径自动补全插件
• eslint 添加对 eslint 的支持；stylelint 添加对stylelint的支持；配置保存时自动修复: vscode 配置保存时运行eslint、stlyelint并自动fix_supming1的专栏-CSDN博客
• vscode-stylelint 添加对stylelint支持
• Project Manager 项目管理器插件，可以在你的编辑器中快速切换项目

        按F1，输入pm会出来相关的命令

        打开文件件，选择响应的save命令进行保存，后续才能打开

•   如果项目管理中用到git，可以安装git相关插件，这里有一篇文章介绍的比较详细：VSCode Git 相关的工具和插件 - 6小贱 - 博客园
• Settings Sync 设置同步插件( 方法参考：Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)_廿四桥明月夜的博客-CSDN博客 )
• Align  使代码根据 =，: 等对齐（如果使用了ESLint ，格式话出来的可能不符合ESLint 规则，建议不安装）
• npm Intellisense  在 import 导入语句中自动完成npm 模块。npm Intellisense
• Material Icon 文件夹图标插件, 用于比较显眼地区分各种文件、文件夹
• Vetur vue开发者才需安装，包含语法高亮、代码片段、Emmet、代码格式化、错误检测功能

• project-tree 自动生成项目目录文件结构 VScode自动生成项目目录文件结构

• CSS Peek ctrl + 单击class或id可跳转到样式定义的地方。

vue 3 推荐插件 Volar 参考 Volar - vue终极开发神器！ - 知乎

vscode 小程序开发环境参考：

开发微信小程序环境配置(vscode) - _fn - 博客园

vscode 开发小程序wxss和js可以采用stylelint和eslint进行格式校验和格式化，wxml没有看到整合相关lint的资料，不过找到了wxml-vscode 插件（注意作者已经不维护了,另外text组件没内容每次格式化都会多出一个换行）可以进行格式化 https://github.com/cnyballk/wxml-vscode

补充其他好用插件

codeSnap-plus  代码转化成图片，按ctrl + shift + p ,选中codeSnap-plus,选中代码，点击中间的圆圈按钮即可生成截图

三、vs code 常用快捷

• 命令面板：F1（命令面板可以执行相应插件）
• 重命名：F2
• 跳转定义（切出新编辑器）： Ctrl + Alt + click
• 跳转定义（切出新tab）：F12 或 Ctrl + 左键点击文件
• 快速定位文件 ctrl + p
• 分割编辑窗口 ctrl+ \
• 快速调出终端 Ctrl+`
• ctrl + d 选择同样元素
• shift + tab 移动代码

四、Emmet

输入 div 回车

<div></div>

<!-- div.className -->

<div class="className"></div>

输入 div#IDname 回车

<div id="IDname"></div>

输入ul>li*2 回车

<ul>

     <li></li>

     <li></li>

</ul>

更多阅读：前端开发必备！Emmet使用手册_Emmet, 会员专栏 教程_W3cplus

五、snippets 定义代码片段，便于快速复用

依次点击：左下角设置图标=》用户代码片段=》在顶部弹出框中选择新建代码片段，起个名字保存后，生成的文件注释中有下面一段，把注释去掉，修改对应的内容即可，各项内容含义看下面注释。

     "Print to console": { //是智能提示显示的

     "scope": "javascript,typescript",

      "prefix": "log", //用户输入此处字符进行提示

      "body": [//代码片段写在此处

          "console.log('$1');",  // $1代表光标位置

          "$2"

     ],

      "description": "描述"

    }

这样定义后，下次输入log，就会显示提示，在提示中选择我们定义的那项，就会将代码片段插入，光标自定义到相应的$1处

以下是vue 模板和dialog模板的示例

{
	// 可用变量 $1，$2，光标位置，$0用于最后的光标位置，${1:label}，label默认值，也叫占位符。
	"dialog": {
		"scope": "vue", // 适用语言，空的话适用所有语言
		"prefix": "dg", // 用于触发提示
		"body": [ // 自动填充代码写在这
			"<template>",
			"<el-dialog v-model='visible' title='${1:需修改}' :close-on-click-modal='false' :before-close='close'>", 
			"<section></section>",

			"<template #footer>",
			"<el-button @click='close'>取消</el-button>",
			"<el-button type='primary' @click='submit'>确定</el-button>",
			"</template>",
			"</el-dialog>",
			"</template>",

			"<script lang='ts' setup name='${2:需修改}'>",
			"defineExpose({",
				"show,",
				"close,",
			"})",
			"const emit = defineEmits(['refresh'])",

			"const visible = ref()",
			"function show() {",
				"visible.value = true",
			"}",

			"function close() {",
				"visible.value = false",
			"}",

			"function submit() {",
				"emit('refresh')",
				"close()",
			"}",
			"</script>",

			"<style scoped lang='scss'></style>",
		],
		"description": "弹窗模板"
	},
	"Vue SFC": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <section>",
			"  </section>",
			"</template>",
			"",
			"<script lang='ts' setup name='$1'>",
			"</script>",
			"<style lang='scss' scoped>",
			"</style>"
		],
		"description": "Vue 单文件组件模板"
	}
}