设置配置
{
"sync.gist": "489f6dbcb60d713fdf2b67087aa71bcf",
"editor.fontSize": 19, //字体
"editor.tabSize": 2, // 间隔
// 新建为html
"files.defaultLanguage": "html",
// 保存自动ESLint格式化
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"vetur.format.defaultFormatterOptions": {
"prettier": {
// 格式化不加分号
"semi": false,
// 格式化为单引号
"singleQuote": true
}
},
// 格式化函数后面空格
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 右侧预览关闭
"editor.minimap.enabled": false,
// 图标
"workbench.iconTheme": "material-icon-theme",
"editor.quickSuggestions": {
"strings": true
},
// 选项卡颜色主题
"workbench.colorCustomizations": {
"tab.activeBorder": "#5996ff"
},
// 禁用html标签自动闭合
"html.autoClosingTags": false,
// 定义格式方式 2种（beautify插件）（vscode默认）
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
// 配置终端有在运行时关闭软件提醒
"terminal.integrated.confirmOnExit": true,
}
解决终端 无法加载文件.......，因为在此系统上禁止运行脚本
1. 以管理员身份运行vscode
2. 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
3. 执行：set-ExecutionPolicy RemoteSigned
4. 这时再执行get-ExecutionPolicy，就显示RemoteSigned
插件集合
Auto Rename Tag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改
CSS Peek css预览
ESLint 格式代码规范，高亮提示
Image preview 图片预览
JavaScript (ES6) code snippets es6 代码提示
Live Server 启动本地服务器
Markdown Preview Enhanced .md 预览插件
Material Icon Theme 文件图标主题
open in browser 支持快捷键与鼠标右键快速在浏览器中打开html文件
Path Intellisense 路径补全
Settings Sync 设置同步
Vetur vue必备插件，高亮，格式
vscode-element-helper element-ui 提示
vscode-pdf 查看pdf文件
jQuery Code Snippets jq代码提示
Beautify 代码格式
VScode 查看 .md 文件
一、原生快捷键
shift + ctrl + v二、使用插件 Markdown Preview Enhanced
1.VSCode 安装 插件 官网链接
2. 在 .md 的文件中右键 选择它 就打开拉
三、安装客户端 官方下载
Vscode中快速创建自定义代码模板
1.在Vscode中找到设置 -> 用户代码片段，新建全局
2.输入名字
3.接下里就是编写我们的模板了，我们的模板需要的大致有以下几项：
基本的HTML架构，引入Vue包的script路径。，一些基本的Vue代码结构。
模板我已经备好了，模板如下：
{
"html5-Vue": {
/*
请将vue html的代码片段放在此处。每个代码段都在代码段名称下定义，并具有前缀、正文和
"名字"：{}
prefix 定义输入的内容，在html中输入这个值获取到这个代码块
body 代码块主体
每一行模板代码都要用双引号""来包括。
如果双引号包括的代码中间也出现了双引号，那么需要用转义字符\转义。
\n意味着换行，\t是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。
模板中出现的$1代表着光标，它的位置即光标的默认位置，可以有多个光标：$2,$3,$4等。
description 提示
*/
"prefix": "vue-html",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">\n",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
"\t<script src=\"https://unpkg.com/vue-router/dist/vue-router.js\"></script>",
"\t<script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>",
"</head>\n",
"<body>",
"\t<div id=\"app\">$1</div>\n",
"\t<script>",
"\t\tlet vm = new Vue({",
"\t\t\tel: '#app',",
"\t\t\tdata: {},",
"\t\t\tmethods: {}",
"\t\t});",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "快速创建在html5编写的vue模板",
}
}4.保存
5.在html输入 vue-html 就直接有代码块了
