vscode常用参数设置

保存后根据eslint自动格式化参数设置

editor.tabSize:2;
//缩进2个空格
"files.associations": {
    "*.vue": "vue"
},
//后缀为vue文件编辑的时候标签自动补全
"eslint.autoFixOnSave": true,
//eslint开启自动保存校验修复，默认只支持js
"eslint.options": {
    "extensions": [
        ".js",
        ".vue"
    ]
},
// eslint配置文件
"eslint.validate": [
//eslint能够识别的文件类型
    "javascript",
    {
        "language": "vue",
        "autoFix": true  //开启自动修复
    },
    "html",
    "vue"
],
"search.exclude": {
   "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
},
//全局搜索时是否显示的文件
"emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
},
//vscode内置了emmet插件,配置需要用到自动补全的文件，tab键也能补全哦
"git.confirmSync": false,
// 同步git前请确认
"window.zoomLevel": 0,
// vscode窗口的大小，数值越大，窗口和字体都将变大
"editor.renderWhitespace": "boundary",
// 如何渲染空白，boundary:渲染代码缩进的空白
"editor.cursorBlinking": "smooth",
//使编辑器光标的闪烁平滑,有呼吸感
"editor.minimap.enabled": true,
// 关闭vscode右上角出现的代码预览功能
"editor.minimap.renderCharacters": false,
//设置边界的字体
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
// 设置vscode窗口中间title显示 文件路径-当前项目
"editor.codeLens": true,
//开启codeLens
"editor.snippetSuggestions": "top",
//代码提示功能优先显示上方,none不显示
"editor.codeActionsOnSave": {
   "source.fixAll.eslint": true
},
//保存后自动按eslint配置格式化

以下是Emmet常用简写规则

项目	Value
E	E代表html标签，即直接写标签名+Tab键就快速创建标签
E#id	快速创建带id属性的标签
E.class	快速创建带class属性的标签
E[attr=foo]	快速创建某个特定属性的标签
E{FOO}	快速创建包含内容foo的标签
E>N	快速创建父子结构，N是E的子元素
E+N	快速创建兄弟结构，N是E的同级元素
E^N	N是E的上级元素，通常搭配E>N来使用
E*N	快速创建N个的E标签，N代表数字
E$*N	快速创建N个带自动编号的的E元素
E>lorem	在E元素中随机添加文本
E*N>M	等用于（E>M）*N，快速创建N个父子结构

//列如：div#item$.class$$*3
<div id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>

//输出表格：table>thead>tr>td5^^tbody>tr>td5
<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

//输出同级：div>p>span^ul>li
<div>
    <p><span></span></p>
    <ul>
        <li></li>
    </ul>
</div>

//输出span带style、class、id：span[style=color:red].Sp#sp
<span style="color:red" class="Sp" id="sp"></span>