一、VScode 介绍、下载、安装。

一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。
免费，可以直接去微软官网去下载。https://code.visualstudio.com/
下载之后直接安装，无任何阻碍。

二、VScode配置

如果要写HTML代码，快速构建出HTML的架构的方法
1. 新建HTML文件
2. 右下角的纯文本改为HTML
3. 输入英文的 ! 叹号，看到补全的 ! ,直接回车自动生成。

编写完HTML代码，要在浏览器中打开

最左侧的五个图标为一列。点击第五个扩展商店
输入 open in browser
直接下载
下载完之后，有两个快捷键

key	command
Alt + B	open in default browser
Shift + Alt + B	open in specified browser

但是使用时还是有错误。需要配置本地的浏览器到VScode
打开：文件》首选项》设置
在右侧的工作区设置中刚添加以下数据

{"open-in-browser.default": "Chrome",
}

然后在要执行的文件，右键，点击最下面的英文。
第一个是默认的浏览器
第二个是其他的浏览器。

三、用户自定义代码片段（快捷键）

第一步：文件==>首选项==>用户代码片段

第二步：选择代码片段文件 html.json

第三步：输入要自定义的快捷键和模板代码段

{// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // description. 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": {//    "prefix": "log",//  "body": [//       "console.log('$1');",//         "$2"//    ],//    "description": "Log output to console"// }"vh": {"prefix": "vh", // 触发的关键字 输入vh按下tab键"body": ["<!DOCTYPE html>","<html lang=\"en\">","<head>","    <meta charset=\"UTF-8\">","    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">","    <title>Document</title>","    <script src=\"../vue/vue.js\"></script>","</head>","","<body>","    <div id=\"app\"></div>","    <script>","        var vm=new Vue({","           el:'#app',","           data:{","","          },","           methods:{","","           },","     });","    </script>","</body>","","</html>",],"description": "vh components"}}

第四步：进入 .html 后缀的文件中按快捷键 vh 后按 tab 键即可实现快速输入代码段

四、自动格式化代码快捷键

win：实现vs code中代码格式化快捷键：【Shift】+【Alt】+F
Mac：shift+option+F

五、保存格式化代码快捷键

实现保存时自动代码格式化：
保存快捷键：【Ctrl】+【S】

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

“editor.formatOnType”: true,
“editor.formatOnSave”: true
4) 随便写点 js代码测试。

初用VScode并配置，自定义代码片段（快捷键），自动格式化代码快捷键，保存格式化代码快捷键相关推荐

在使用 VScode 进行代码格式化后，保存发现代码又变乱了，怎么办？
出现的问题: 在用 VScode 时,代码使用格式化文档时,可以完美的进行格式化,但保存后,代码变乱或遇到如下问题: 保存代码的时候,代码被自动格式化,然后格式就变乱了(只要保存,格式就被打乱) ...
在使用 VScode 进行代码格式化后，保存发现代码又变乱了，怎么办？vs去掉格式化
第一,去掉系统格式化去掉勾第二:查找项目里是否有 JS-CSS-HTML Formatter 的插件,有的话建议直接卸载第三,检查是否有这些插件 ESLint.Prettier - Cod ...
Java开发工具IntelliJ IDEA入门教程：代码片段和代码折叠
本文将介绍在IntelliJ IDEA 使用过程中的代码片段和代码折叠相关内容. IntelliJ IDEA官方正版下载代码片段与全局操作系统快捷方式冲突预定义的键盘映射并不涵盖所有可能的平台 ...
vscode自定义代码片段（新手交流）
一.为什么要用js代码片段运用js代码片段,能有效地帮助我们提高代码效率,减少繁琐代码的记忆过程.也是搜集过很多代码片段设置的文章,但步骤不太明确,经实际操作后整理了以下步骤,供大家学习参考,如有不 ...
vscode 设置用户代码片段（怎么用命令式快速生成一段代码）
1 依次点击设置-用户代码片段如图 2 点击新建全局代码片段文件如图 3 输入文件名称(自己命名) 回车进入该文件如图 4 输入一下代码[cv即可]后保存即可其中配置项 "prefi ...
【vscode代码片段增加和删除】
目录一.概述二.详解三.实例一.概述项目开发中,存在很多重复代码,可将其抽取出来定义成自己的代码片段,提高编码效率,实现快捷开发. 二.详解详解1:选择并打开代码片段文件详解2:删除代码 ...
VScode设置代码片段
REACT为例 ①:找到VSCode里的左上角的文件,然后点击,找到列表里的首选项,在首选项里会看到用户代码片段 ②:然后进行设置,自己的代码片段. 下面我以react为例进行解释.(直接从上面第②步 ...
自定义Xcode代码片段
在实际开发中,有一些代码会经常重复使用(可能在同一个工程中,也可能不在同一个工程中).这里为了提高开发速度,可以使用自定义XCode代码片段(xcode自动提示).xcode的代码片段(自动提示)都定 ...
VS Code自定义HTML代码片段
经常用到,比如每次用新电脑的时候,必须重新搭建开发环境,这个基本是必备的,所以总结出来! 1.打开"设置",点击"用户代码片段",如下图: 2.搜索" ...

初用VScode并配置，自定义代码片段（快捷键），自动格式化代码快捷键，保存格式化代码快捷键