VScode 编辑器配置
设置配置
{
// 配置终端有在运行时关闭软件提醒
"terminal.integrated.confirmOnExit": true,
"editor.fontSize": 19, //字体
"editor.tabSize": 2, // 间隔
// 新建为html
"files.defaultLanguage": "html",
// 配置 vetur
"vetur.format.defaultFormatterOptions": {
//html标签禁止换行
"end_with_newline": true,
"prettier": {
"semi": false, //不加分号
"singleQuote": true //用单引号
}
},
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 保存自动ESLint格式化
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 右侧预览关闭
"editor.minimap.enabled": false,
// 图标美化
"workbench.iconTheme": "material-icon-theme",
"editor.quickSuggestions": {
"strings": true
},
// 选项卡颜色主题
"workbench.colorCustomizations": {
"tab.activeBorder": "#5996ff"
},
// 禁用html标签自动闭合
"html.autoClosingTags": false,
// 定义格式方式： 3种： Prettier插件、 vetur插件、 vscode默认
"[vue]": {
// 配置为vetur插件
"editor.defaultFormatter": "octref.vetur"
},
"[javascript]": {
// 配置为vscode默认
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
// 配置为Prettier插件
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
// 配置为vscode默认
"editor.defaultFormatter": "vscode.html-language-features"
},
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"git.ignoreMissingGitWarning": true,
"explorer.confirmDelete": false,
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
// 配置 @ 路径
"path-autocomplete.pathMappings": {
"@": "${folder}/src/",
"@views": "${folder}/src/views/",
}
}解决终端 无法加载文件.......，因为在此系统上禁止运行脚本
1. 以管理员身份运行vscode
2. 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
3. 执行：set-ExecutionPolicy RemoteSigned
4. 这时再执行get-ExecutionPolicy，就显示RemoteSigned
插件集合
Auto Rename Tag 修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改
Bootstrap 3 Snippets Bootstrap3 代码提示
Chinese (Simplified) Language Pack for Visual Studio Code 中文包
CSS Peek css预览
ESLint 格式代码规范，高亮提示
Image preview 图片预览
JavaScript (ES6) code snippets es6 代码提示
jQuery Code Snippets jq代码提示
Live Server 启动本地服务器
Material Icon Theme 文件图标主题
open in browser 支持快捷键与鼠标右键快速在浏览器中打开html文件
Path Autocomplete 路径补全
Prettier - Code formatter 代码格式
px2rem px转rem
Syncing 同步设置插件
vscode-pdf 查看pdf文件
Markdown Preview Enhanced .md 预览插件
Vetur vue必备插件，高亮，格式
vscode-element-helper ElementUi 代码提示
Vue 2 Snippets vue 代码补全
Vant Snippets 小程序 Vant UI 代码提示
minapp 微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
wechat-snippet 微信小程序代码辅助,代码片段自动完成
wxapp-helper 小程序代码提示
node-snippets node.js 代码提示
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": [
"",
"\n",
"",
"\t",
"\t",
"\t",
"\tDocument ",
"\t",
"\t",
"\t",
"\n",
"",
"\t$1\n",
"\t",
"\n",
""
],
"description": "快速创建在html5编写的vue模板",
}
}4.保存
5.在html输入 vue-html 就直接有代码块了