-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathvscode-前端插件推荐.html
1 lines (1 loc) · 49.9 KB
/
vscode-前端插件推荐.html
1
<!doctype html><html class="theme-next mist"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="google-site-verification" content="PBwskePkFkRAnqisXEBN7FyYihV0DkOHyvEC2eDt6Gg"><meta name="referrer" content="never"><script src="/lib/pace/pace.min.js?v=1.0.2"></script><link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="baidu-site-verification" content="haLEFmuOYV"><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"0f81ff2f"}),daovoice("update")</script><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css"><meta name="keywords" content="编辑器"><link rel="alternate" href="/atom.xml" title="Moorez" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.0.2"><meta name="keywords" content="编辑器"><meta property="og:type" content="article"><meta property="og:title" content="vscode 前端插件推荐"><meta property="og:url" content="http://www.shenzekun.cn/vscode-前端插件推荐.html"><meta property="og:site_name" content="Moorez"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092830970499.gif"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092838452118.gif"><meta property="og:image" content="https://ws1.sinaimg.cn/large/006tNc79ly1fkzg3v9bfnj30rk02ymx1.jpg"><meta property="og:image" content="https://ws4.sinaimg.cn/large/006tNc79ly1fkzg8ththdj30k40500ss.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092851845587.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092856731870.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/navicat-id-increase.gif"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093400730364.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093414045557.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093254060028.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093256313651.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093260108371.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-htmltagwrap.gif"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/Indenticator.gif"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093708776977.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093281194279.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-node.gif"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093384952721.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-faker.gif"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-quokka.gif"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093406954760.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-ts.gif"><meta property="og:image" content="https://ws4.sinaimg.cn/large/006tNc79ly1fkzxpf6tevj30l206s74d.jpg"><meta property="og:image" content="https://ws3.sinaimg.cn/large/006tNc79ly1fkzy0i7rutj30py06yglq.jpg"><meta property="og:image" content="https://ws3.sinaimg.cn/large/006tNc79ly1fkzxzhoqkrj30l6062jrl.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093223049049.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093223899355.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093223624542.jpg"><meta property="og:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093265368328.jpg"><meta property="og:updated_time" content="2018-10-22T02:45:11.041Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="vscode 前端插件推荐"><meta name="twitter:image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092830970499.gif"><script type="text/javascript" id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Mist",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!1,duoshuo:{userId:"0",author:"Author"}}</script><link rel="canonical" href="http://www.shenzekun.cn/vscode-前端插件推荐.html"><title>vscode 前端插件推荐 | Moorez</title></head><body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans"><div class="container one-collumn sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/shenzekun" class="github-corner" aria-label="View source on Github"><svg width="92" height="92" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="//schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Moorez</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup"><span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input"><div id="local-search-result"></div><span class="popup-btn-close">close</span></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://www.shenzekun.cn/vscode-前端插件推荐.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="shenzekun"><meta itemprop="description" content=""><meta itemprop="image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Moorez"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">vscode 前端插件推荐</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2017-10-30T16:38:04+08:00" content="2017-10-30">2017-10-30</time></span> <span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span></span> <span id="/vscode-前端插件推荐.html" class="leancloud_visitors" data-flag-title="vscode 前端插件推荐"> | <span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">热度</span><span class="leancloud-visitors-count"></span> <span>℃</span></span><div class="post-wordcount"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span> <span class="post-meta-item-text">字数统计</span> <span title="字数统计">1,153 字</span> <span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i></span> <span class="post-meta-item-text">阅读时长</span> <span title="阅读时长">5 分钟</span></div></div></header><div class="post-body" itemprop="articleBody"><hr><a id="more"></a><h2 id="常用插件"><a href="#常用插件" class="headerlink" title="常用插件"></a>常用插件</h2><h3 id="Auto-Close-Tag"><a href="#Auto-Close-Tag" class="headerlink" title="Auto Close Tag"></a>Auto Close Tag</h3><blockquote><p>自动添加HTML / XML关闭标签（必备）</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092830970499.gif" alt=""></p><h3 id="Auto-Rename-Tag"><a href="#Auto-Rename-Tag" class="headerlink" title="Auto Rename Tag"></a>Auto Rename Tag</h3><blockquote><p>自动重命名配对的HTML / XML标签(必备)</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092838452118.gif" alt=""></p><h3 id="Beautify"><a href="#Beautify" class="headerlink" title="Beautify"></a>Beautify</h3><blockquote><p>格式化javascript，JSON，CSS，Sass，和HTML</p></blockquote><h3 id="Bootstrap-4-amp-Font-awesome-snippets"><a href="#Bootstrap-4-amp-Font-awesome-snippets" class="headerlink" title="Bootstrap 4 & Font awesome snippets"></a>Bootstrap 4 & Font awesome snippets</h3><blockquote><p>包含Bootstrap 4＆Font awesome 的代码片段</p></blockquote><p><img src="https://ws1.sinaimg.cn/large/006tNc79ly1fkzg3v9bfnj30rk02ymx1.jpg" alt=""></p><h3 id="Bracket-Pair-Colorizer"><a href="#Bracket-Pair-Colorizer" class="headerlink" title="Bracket Pair Colorizer"></a>Bracket Pair Colorizer</h3><blockquote><p>颜色识别匹配括号</p></blockquote><p><img src="https://ws4.sinaimg.cn/large/006tNc79ly1fkzg8ththdj30k40500ss.jpg" alt=""></p><h3 id="Class-autocomplete-for-HTML"><a href="#Class-autocomplete-for-HTML" class="headerlink" title="Class autocomplete for HTML"></a>Class autocomplete for HTML</h3><blockquote><p>智能提示HTML class =“”属性（必备）</p></blockquote><h3 id="Code-Runner"><a href="#Code-Runner" class="headerlink" title="Code Runner"></a>Code Runner</h3><blockquote><p>非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092851845587.jpg" alt=""><br>点击这个按钮就可以运行你的文件了（必备）</p></blockquote><h3 id="css-peek"><a href="#css-peek" class="headerlink" title="css peek"></a>css peek</h3><blockquote><p>能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义（必备）</p></blockquote><p><strong>使用方法</strong>：将光标放在class里面的属性，右击<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15092856731870.jpg" alt=""></p><h3 id="Dash"><a href="#Dash" class="headerlink" title="Dash"></a>Dash</h3><blockquote><p>查文档必备，搭配 dash（不过似乎只有 mac 版）😁</p><p><strong>快捷键 <code>ctrl + h</code></strong> 它根据你当前选中的语言查找 dash 里面的文档</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/navicat-id-increase.gif" alt=""></p><h3 id="Debugger-for-Chrome"><a href="#Debugger-for-Chrome" class="headerlink" title="Debugger for Chrome"></a>Debugger for Chrome</h3><blockquote><p>让 vscode 映射 chrome 的 debug功能，使静态页面都可以用 vscode 来打断点调试</p></blockquote><p><strong>简单使用</strong>：<a href="https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001470969077294a6455fc9cd1f48b69f82cd05e7fa9b40000" target="_blank" rel="external">戳我</a></p><h3 id="Document-This"><a href="#Document-This" class="headerlink" title="Document This"></a>Document This</h3><blockquote><p>添加注释块</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093400730364.jpg" alt=""></p><p><strong>设置：</strong></p><figure class="highlight elixir"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="string">"docthis.includeAuthorTag"</span>: <span class="keyword">true</span>,<span class="regexp">//</span>出现<span class="variable">@Author</span></div><div class="line"><span class="string">"docthis.includeDescriptionTag"</span>: <span class="keyword">true</span>,<span class="regexp">//</span>出现<span class="variable">@Description</span></div><div class="line"><span class="string">"docthis.authorName"</span>: <span class="string">"shenzekun"</span>,<span class="regexp">//</span>作者名字</div></pre></td></tr></table></figure><p><strong>快捷键</strong>： 按两次Ctrl+alt+d</p><h3 id="ESLint"><a href="#ESLint" class="headerlink" title="ESLint"></a>ESLint</h3><blockquote><p>EsLint可以帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。</p></blockquote><p><strong>配置</strong>：<a href="https://segmentfault.com/a/1190000010462601" target="_blank" rel="external">戳我</a></p><h3 id="Font-awesome-codes-for-html"><a href="#Font-awesome-codes-for-html" class="headerlink" title="Font-awesome codes for html"></a>Font-awesome codes for html</h3><blockquote><p>用于 html 的Font-awesome代码片段</p></blockquote><h3 id="filesize"><a href="#filesize" class="headerlink" title="filesize"></a>filesize</h3><blockquote><p>在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093414045557.jpg" alt=""></p><h3 id="Git-History"><a href="#Git-History" class="headerlink" title="Git History"></a>Git History</h3><blockquote><p>以图表的形式查看git日志<br><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093254060028.jpg" alt=""></p></blockquote><p>使用 command+shift+p（Ctrl+shift+p） 输入git log就可以看到了</p><h3 id="Git-Lens"><a href="#Git-Lens" class="headerlink" title="Git Lens"></a>Git Lens</h3><blockquote><p>git 日志插件</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093256313651.jpg" alt=""></p><h3 id="HTML-CSS-Support"><a href="#HTML-CSS-Support" class="headerlink" title="HTML CSS Support"></a>HTML CSS Support</h3><blockquote><p>在 html 标签上写class 智能提示当前项目所支持的样式（必备）</p></blockquote><h3 id="HTML-Snippets"><a href="#HTML-Snippets" class="headerlink" title="HTML Snippets"></a>HTML Snippets</h3><blockquote><p>html 代码片段（必备）</p></blockquote><h3 id="htmlhint"><a href="#htmlhint" class="headerlink" title="htmlhint"></a>htmlhint</h3><blockquote><p>html代码检测</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093260108371.jpg" alt=""></p><h3 id="htmltagwrap"><a href="#htmltagwrap" class="headerlink" title="htmltagwrap"></a>htmltagwrap</h3><blockquote><p>可以在选中HTML标签中外面套一层标签</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-htmltagwrap.gif" alt=""></p><p><strong>使用</strong>：选择一大段代码，然后按“Alt + W”</p><h3 id="Indenticator"><a href="#Indenticator" class="headerlink" title="Indenticator"></a>Indenticator</h3><blockquote><p>突出目前的缩进深度</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/Indenticator.gif" alt=""></p><h3 id="IntelliSense-for-CSS-class-names"><a href="#IntelliSense-for-CSS-class-names" class="headerlink" title="IntelliSense for CSS class names"></a>IntelliSense for CSS class names</h3><p>智能提示 css 的 class 名</p><h3 id="Image-Preview"><a href="#Image-Preview" class="headerlink" title="Image Preview"></a>Image Preview</h3><blockquote><p>鼠标移到路径里显示图像预览</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093708776977.jpg" alt=""></p><h3 id="JavaScript-ES6-code-snippets"><a href="#JavaScript-ES6-code-snippets" class="headerlink" title="JavaScript (ES6) code snippets"></a>JavaScript (ES6) code snippets</h3><blockquote><p>es6代码片段（必备）</p></blockquote><h3 id="JavaScript-Snippet-Pack"><a href="#JavaScript-Snippet-Pack" class="headerlink" title="JavaScript Snippet Pack"></a>JavaScript Snippet Pack</h3><blockquote><p>js代码片段（必备）</p></blockquote><h3 id="jQuery-Code-Snippets"><a href="#jQuery-Code-Snippets" class="headerlink" title="jQuery Code Snippets"></a>jQuery Code Snippets</h3><blockquote><p>jQuery 代码片段</p></blockquote><h3 id="Live-Sass-Compiler"><a href="#Live-Sass-Compiler" class="headerlink" title="Live Sass Compiler"></a>Live Sass Compiler</h3><blockquote><p>实时编译 sass ,不过需要配置，附上我的配置</p></blockquote><figure class="highlight 1c"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="string">"liveSassCompile.settings.formats"</span>:[</div><div class="line"> <span class="comment">// You can add more</span></div><div class="line"> {</div><div class="line"> <span class="string">"format"</span>: <span class="string">"compressed"</span>,<span class="comment">//压缩</span></div><div class="line"> <span class="string">"extensionName"</span>: <span class="string">".min.css"</span>,<span class="comment">//编译后缀名</span></div><div class="line"> <span class="string">"savePath"</span>: <span class="string">"./css"</span><span class="comment">//编译保存的路径</span></div><div class="line"> }</div><div class="line"> ],</div></pre></td></tr></table></figure><p><strong>使用</strong></p><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093281194279.jpg" alt=""></p><h3 id="markdownlint"><a href="#markdownlint" class="headerlink" title="markdownlint"></a>markdownlint</h3><blockquote><p>markdown 语法检查</p></blockquote><h3 id="Node-js-Modules-Intellisense"><a href="#Node-js-Modules-Intellisense" class="headerlink" title="Node.js Modules Intellisense"></a>Node.js Modules Intellisense</h3><blockquote><p>可以在导入语句中自动完成JavaScript / TypeScript模块。</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-node.gif" alt=""></p><h3 id="npm-Intellisense"><a href="#npm-Intellisense" class="headerlink" title="npm Intellisense"></a>npm Intellisense</h3><blockquote><p>在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多</p></blockquote><h3 id="open-in-browser"><a href="#open-in-browser" class="headerlink" title="open in browser"></a>open in browser</h3><blockquote><p>当前的 html 文件用浏览器打开，类似 webstorm 的那四个小浏览器图标功能，前提条件html 文件必须保存</p></blockquote><p><strong>快捷键alt+b</strong></p><h3 id="Output-Colorizer"><a href="#Output-Colorizer" class="headerlink" title="Output Colorizer"></a>Output Colorizer</h3><blockquote><p>输出提示的文字颜色有一些变化，方便获取关键信息</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093384952721.jpg" alt=""></p><h3 id="Path-Intellisense"><a href="#Path-Intellisense" class="headerlink" title="Path Intellisense"></a>Path Intellisense</h3><blockquote><p>路径自动补全（必备）</p></blockquote><h3 id="Prettier"><a href="#Prettier" class="headerlink" title="Prettier"></a>Prettier</h3><blockquote><p>格式化JavaScript / TypeScript / CSS 。</p></blockquote><h3 id="Project-Manager"><a href="#Project-Manager" class="headerlink" title="Project Manager"></a>Project Manager</h3><blockquote><p>工程项目过多时，shift+cmd+p(shift+ctrl+p) 然后输入project，第一次选择edit Project编辑自己的工程项目，之后就可以直接选择open打开你的项目</p></blockquote><h3 id="Sass"><a href="#Sass" class="headerlink" title="Sass"></a>Sass</h3><blockquote><p>写 sass 必备</p></blockquote><h3 id="vscode-faker"><a href="#vscode-faker" class="headerlink" title="vscode-faker"></a>vscode-faker</h3><blockquote><p>生成假数据，地址，电话，图片等等</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-faker.gif" alt=""></p><p>打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了</p><h3 id="Quokka-js"><a href="#Quokka-js" class="headerlink" title="Quokka.js"></a>Quokka.js</h3><blockquote><p>实时观看 javascript 的变量的变化</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-quokka.gif" alt=""></p><p><strong>使用</strong>：先shift+cmd+p （ctrl+shift+p）输入 quokka 选择 new javascript 就行了😀</p><h3 id="Regex-Previewer"><a href="#Regex-Previewer" class="headerlink" title="Regex Previewer"></a>Regex Previewer</h3><blockquote><p>测试正则的插件</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093406954760.jpg" alt=""></p><h3 id="TSLint"><a href="#TSLint" class="headerlink" title="TSLint"></a>TSLint</h3><blockquote><p>检查typescript编程时的语法错误语法</p></blockquote><h3 id="TypeScript-Importer"><a href="#TypeScript-Importer" class="headerlink" title="TypeScript Importer"></a>TypeScript Importer</h3><blockquote><p>自动搜索工作区文件中的TypeScript定义，并将所有已知符号作为完成项，以允许代码完成。</p></blockquote><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/vscode-ts.gif" alt=""></p><h3 id="vscode-icons"><a href="#vscode-icons" class="headerlink" title="vscode-icons"></a>vscode-icons</h3><blockquote><p>目录树图标</p></blockquote><h2 id="react"><a href="#react" class="headerlink" title="react"></a>react</h2><h3 id="React-Native-React-Redux-snippets-for-es6-es7"><a href="#React-Native-React-Redux-snippets-for-es6-es7" class="headerlink" title="React-Native/React/Redux snippets for es6/es7"></a>React-Native/React/Redux snippets for es6/es7</h3><blockquote><p>react代码片段，下载人数超多😉</p></blockquote><h3 id="react-beautify"><a href="#react-beautify" class="headerlink" title="react-beautify"></a>react-beautify</h3><blockquote><p>格式化 javascript, JSX, typescript, TSX 文件</p></blockquote><h2 id="vue"><a href="#vue" class="headerlink" title="vue"></a>vue</h2><h3 id="vetur"><a href="#vetur" class="headerlink" title="vetur"></a>vetur</h3><blockquote><p>语法高亮、智能感知</p></blockquote><h3 id="VueHelper"><a href="#VueHelper" class="headerlink" title="VueHelper"></a>VueHelper</h3><blockquote><p>vue代码片段</p></blockquote><h3 id="Vue-TypeScript-Snippets"><a href="#Vue-TypeScript-Snippets" class="headerlink" title="Vue TypeScript Snippets"></a>Vue TypeScript Snippets</h3><blockquote><p>vue的 typescript 代码片段</p></blockquote><h3 id="Vue-2-Snippets"><a href="#Vue-2-Snippets" class="headerlink" title="Vue 2 Snippets"></a>Vue 2 Snippets</h3><blockquote><p>vue 2代码片段</p></blockquote><h2 id="主题"><a href="#主题" class="headerlink" title="主题"></a>主题</h2><h3 id="Dracula-Official"><a href="#Dracula-Official" class="headerlink" title="Dracula Official"></a>Dracula Official</h3><p>个人最喜欢的主题，应该是最好看的主题之一😀</p><p><img src="https://ws4.sinaimg.cn/large/006tNc79ly1fkzxpf6tevj30l206s74d.jpg" alt=""></p><h3 id="One-Dark-Pro"><a href="#One-Dark-Pro" class="headerlink" title="One Dark Pro"></a>One Dark Pro</h3><p>这个也好看😄</p><p><img src="https://ws3.sinaimg.cn/large/006tNc79ly1fkzy0i7rutj30py06yglq.jpg" alt=""></p><h3 id="Atom-One-Dark-Theme-老版本"><a href="#Atom-One-Dark-Theme-老版本" class="headerlink" title="Atom One Dark Theme(老版本)"></a>Atom One Dark Theme(老版本)</h3><p>这个和 One Dark Pro差不多，One Dark Pro颜色主题多一些</p><p><img src="https://ws3.sinaimg.cn/large/006tNc79ly1fkzxzhoqkrj30l6062jrl.jpg" alt=""></p><h3 id="One-Monokai-Theme"><a href="#One-Monokai-Theme" class="headerlink" title="One Monokai Theme"></a>One Monokai Theme</h3><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093223049049.jpg" alt=""></p><h3 id="Eva-Theme"><a href="#Eva-Theme" class="headerlink" title="Eva Theme"></a>Eva Theme</h3><p>里面包含黑色和白色主题，这个白色主题感觉挺好看的</p><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093223899355.jpg" alt=""></p><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093223624542.jpg" alt=""></p><h3 id="Boxy-Theme-Kit"><a href="#Boxy-Theme-Kit" class="headerlink" title="Boxy Theme Kit"></a>Boxy Theme Kit</h3><p><img src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/15093265368328.jpg" alt=""></p><hr><p>大家还有什么好的插件推荐吗🤓</p></div><div><div><div style="text-align:center;color:#ccc;font-size:14px">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div></div></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/vscode-前端插件推荐.html">vscode 前端插件推荐</a></p><p><span>文章作者:</span><a href="/" title="访问 shenzekun 的个人博客">shenzekun</a></p><p><span>发布时间:</span>2017年10月30日 - 16:38</p><p><span>最后更新:</span>2018年10月22日 - 10:45</p><p><span>原始链接:</span><a href="/vscode-前端插件推荐.html" title="vscode 前端插件推荐">http://www.shenzekun.cn/vscode-前端插件推荐.html</a><span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://www.shenzekun.cn/vscode-前端插件推荐.html" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center"><div>您的支持将鼓励我继续创作！</div><button id="rewardButton" disable="enable" onclick='var qr=document.getElementById("QR");"none"===qr.style.display?qr.style.display="block":qr.style.display="none"'><span>赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/image/wechat-reward-image.png" alt="shenzekun WeChat Pay"><p>微信打赏</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/插件/" rel="tag"><i class="fa fa-tag"></i>插件</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/js-的-call-与-apply-速度对比.html" rel="next" title="js 的 call 与 apply 速度对比"><i class="fa fa-chevron-left"></i> js 的 call 与 apply 速度对比</a></div><div class="post-nav-prev post-nav-item"><a href="/解决安装electron卡在node-install-js-不动问题.html" rel="prev" title="解决安装electron卡在node install.js 不动问题">解决安装electron卡在node install.js 不动问题<i class="fa fa-chevron-right"></i></a></div></div></footer></article><div class="post-spread"></div></div></div><div class="comments" id="comments"><div id="lv-container" data-id="city" data-uid="MTAyMC8yODgyMi81Mzky"></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview">站点概览</li></ul><section class="site-overview sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person"><img class="site-author-image" itemprop="image" src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg" alt="shenzekun"><p class="site-author-name" itemprop="name">shenzekun</p><p class="site-description motion-element" itemprop="description">Road endless its long and far, I will seek up and down！</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">39</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories"><span class="site-state-item-count">6</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags"><span class="site-state-item-count">19</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/shenzekun" target="_blank" rel="external nofollow" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="http://www.jianshu.com/u/b473784d730c" target="_blank" rel="external nofollow" title="简书"><i class="fa fa-fw fa-heartbeat"></i> 简书</a></span><span class="links-of-author-item"><a href="https://twitter.com/shenzekun" target="_blank" rel="external nofollow" title="Twitter"><i class="fa fa-fw fa-twitter"></i> Twitter</a></span><span class="links-of-author-item"><a href="https://segmentfault.com/u/juli_590dd17068b9e" target="_blank" rel="external nofollow" title="SegmentFault"><i class="fa fa-fw fa-meh-o"></i> SegmentFault</a></span><span class="links-of-author-item"><a href="http://blog.csdn.net/qq_33699981?viewmode=list" target="_blank" rel="external nofollow" title="csdn"><i class="fa fa-fw fa-crosshairs"></i> csdn</a></span><span class="links-of-author-item"><a href="https://juejin.im/user/5866ed77ac502e00612f1949" target="_blank" rel="external nofollow" title="掘金"><i class="fa fa-fw fa-spinner"></i> 掘金</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> 推荐阅读</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://www.uisdc.com/" title="优设" target="_blank">优设</a></li><li class="links-of-blogroll-item"><a href="http://www.zhangxinxu.com/" title="张鑫旭" target="_blank">张鑫旭</a></li><li class="links-of-blogroll-item"><a href="http://www.alloyteam.com/nav/" title="Web前端导航" target="_blank">Web前端导航</a></li><li class="links-of-blogroll-item"><a href="http://www.36zhen.com/t?id=3448" title="前端书籍资料" target="_blank">前端书籍资料</a></li><li class="links-of-blogroll-item"><a href="http://ife.baidu.com/" title="百度前端技术学院" target="_blank">百度前端技术学院</a></li><li class="links-of-blogroll-item"><a href="http://wf.uisdc.com/cn/" title="google前端开发基础" target="_blank">google前端开发基础</a></li></ul></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#常用插件"><span class="nav-number">1.</span> <span class="nav-text">常用插件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Auto-Close-Tag"><span class="nav-number">1.1.</span> <span class="nav-text">Auto Close Tag</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Auto-Rename-Tag"><span class="nav-number">1.2.</span> <span class="nav-text">Auto Rename Tag</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Beautify"><span class="nav-number">1.3.</span> <span class="nav-text">Beautify</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Bootstrap-4-amp-Font-awesome-snippets"><span class="nav-number">1.4.</span> <span class="nav-text">Bootstrap 4 & Font awesome snippets</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Bracket-Pair-Colorizer"><span class="nav-number">1.5.</span> <span class="nav-text">Bracket Pair Colorizer</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Class-autocomplete-for-HTML"><span class="nav-number">1.6.</span> <span class="nav-text">Class autocomplete for HTML</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Code-Runner"><span class="nav-number">1.7.</span> <span class="nav-text">Code Runner</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#css-peek"><span class="nav-number">1.8.</span> <span class="nav-text">css peek</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Dash"><span class="nav-number">1.9.</span> <span class="nav-text">Dash</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Debugger-for-Chrome"><span class="nav-number">1.10.</span> <span class="nav-text">Debugger for Chrome</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Document-This"><span class="nav-number">1.11.</span> <span class="nav-text">Document This</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ESLint"><span class="nav-number">1.12.</span> <span class="nav-text">ESLint</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Font-awesome-codes-for-html"><span class="nav-number">1.13.</span> <span class="nav-text">Font-awesome codes for html</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#filesize"><span class="nav-number">1.14.</span> <span class="nav-text">filesize</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Git-History"><span class="nav-number">1.15.</span> <span class="nav-text">Git History</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Git-Lens"><span class="nav-number">1.16.</span> <span class="nav-text">Git Lens</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-CSS-Support"><span class="nav-number">1.17.</span> <span class="nav-text">HTML CSS Support</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML-Snippets"><span class="nav-number">1.18.</span> <span class="nav-text">HTML Snippets</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#htmlhint"><span class="nav-number">1.19.</span> <span class="nav-text">htmlhint</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#htmltagwrap"><span class="nav-number">1.20.</span> <span class="nav-text">htmltagwrap</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Indenticator"><span class="nav-number">1.21.</span> <span class="nav-text">Indenticator</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#IntelliSense-for-CSS-class-names"><span class="nav-number">1.22.</span> <span class="nav-text">IntelliSense for CSS class names</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Image-Preview"><span class="nav-number">1.23.</span> <span class="nav-text">Image Preview</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-ES6-code-snippets"><span class="nav-number">1.24.</span> <span class="nav-text">JavaScript (ES6) code snippets</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JavaScript-Snippet-Pack"><span class="nav-number">1.25.</span> <span class="nav-text">JavaScript Snippet Pack</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#jQuery-Code-Snippets"><span class="nav-number">1.26.</span> <span class="nav-text">jQuery Code Snippets</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Live-Sass-Compiler"><span class="nav-number">1.27.</span> <span class="nav-text">Live Sass Compiler</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#markdownlint"><span class="nav-number">1.28.</span> <span class="nav-text">markdownlint</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Node-js-Modules-Intellisense"><span class="nav-number">1.29.</span> <span class="nav-text">Node.js Modules Intellisense</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#npm-Intellisense"><span class="nav-number">1.30.</span> <span class="nav-text">npm Intellisense</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#open-in-browser"><span class="nav-number">1.31.</span> <span class="nav-text">open in browser</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Output-Colorizer"><span class="nav-number">1.32.</span> <span class="nav-text">Output Colorizer</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Path-Intellisense"><span class="nav-number">1.33.</span> <span class="nav-text">Path Intellisense</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Prettier"><span class="nav-number">1.34.</span> <span class="nav-text">Prettier</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Project-Manager"><span class="nav-number">1.35.</span> <span class="nav-text">Project Manager</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Sass"><span class="nav-number">1.36.</span> <span class="nav-text">Sass</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vscode-faker"><span class="nav-number">1.37.</span> <span class="nav-text">vscode-faker</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Quokka-js"><span class="nav-number">1.38.</span> <span class="nav-text">Quokka.js</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Regex-Previewer"><span class="nav-number">1.39.</span> <span class="nav-text">Regex Previewer</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#TSLint"><span class="nav-number">1.40.</span> <span class="nav-text">TSLint</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#TypeScript-Importer"><span class="nav-number">1.41.</span> <span class="nav-text">TypeScript Importer</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vscode-icons"><span class="nav-number">1.42.</span> <span class="nav-text">vscode-icons</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#react"><span class="nav-number">2.</span> <span class="nav-text">react</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#React-Native-React-Redux-snippets-for-es6-es7"><span class="nav-number">2.1.</span> <span class="nav-text">React-Native/React/Redux snippets for es6/es7</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#react-beautify"><span class="nav-number">2.2.</span> <span class="nav-text">react-beautify</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue"><span class="nav-number">3.</span> <span class="nav-text">vue</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#vetur"><span class="nav-number">3.1.</span> <span class="nav-text">vetur</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VueHelper"><span class="nav-number">3.2.</span> <span class="nav-text">VueHelper</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue-TypeScript-Snippets"><span class="nav-number">3.3.</span> <span class="nav-text">Vue TypeScript Snippets</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue-2-Snippets"><span class="nav-number">3.4.</span> <span class="nav-text">Vue 2 Snippets</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#主题"><span class="nav-number">4.</span> <span class="nav-text">主题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Dracula-Official"><span class="nav-number">4.1.</span> <span class="nav-text">Dracula Official</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#One-Dark-Pro"><span class="nav-number">4.2.</span> <span class="nav-text">One Dark Pro</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Atom-One-Dark-Theme-老版本"><span class="nav-number">4.3.</span> <span class="nav-text">Atom One Dark Theme(老版本)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#One-Monokai-Theme"><span class="nav-number">4.4.</span> <span class="nav-text">One Monokai Theme</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Eva-Theme"><span class="nav-number">4.5.</span> <span class="nav-text">Eva Theme</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Boxy-Theme-Kit"><span class="nav-number">4.6.</span> <span class="nav-text">Boxy Theme Kit</span></a></li></ol></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">shenzekun</span></div><div class="theme-info"><i class="fa fa-pencil"></i> <span class="post-count">博客全站共 40.7k 字</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script><script type="text/javascript">!function(e,t){var n,c=e.getElementsByTagName(t)[0];"function"!=typeof LivereTower&&((n=e.createElement(t)).src="https://cdn-city.livere.com/js/embed.dist.js",n.async=!0,c.parentNode.insertBefore(n,c))}(document,"script")</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="popoverlay">').css("overflow","hidden"),$(".popup").toggle()}var isfetched=!1,search_path="search.xml";0==search_path.length&&(search_path="search.xml");var path="/"+search_path,searchFunc=function(e,t,a){"use strict";$.ajax({url:e,dataType:"xml",async:!0,success:function(e){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var r=$("entry",e).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),c=document.getElementById(t),n=document.getElementById(a);c.addEventListener("input",function(){var e=0,t='<ul class="search-result-list">',a=this.value.trim().toLowerCase().split(/[\s\-]+/);n.innerHTML="",this.value.trim().length>1&&r.forEach(function(r){var c=!1,n=r.title.trim().toLowerCase(),s=r.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),o=decodeURIComponent(r.url),i=-1,l=-1,p=-1;if(""!=n&&a.forEach(function(e,t){i=n.indexOf(e),l=s.indexOf(e),(i>=0||l>=0)&&(c=!0,0==t&&(p=l))}),c){e+=1,t+="<li><a href='"+o+"' class='search-result-title'>"+n+"</a>";var h=r.content.trim().replace(/<[^>]+>/g,"");if(p>=0){var u=p-20,d=p+80;u<0&&(u=0),0==u&&(d=50),d>h.length&&(d=h.length);var f=h.substring(u,d);a.forEach(function(e){var t=new RegExp(e,"gi");f=f.replace(t,'<b class="search-keyword">'+e+"</b>")}),t+='<p class="search-result">'+f+"...</p>"}t+="</li>"}}),t+="</ul>",0==e&&(t='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'),""==a&&(t='<div id="no-result"><i class="fa fa-search fa-5x" /></div>'),n.innerHTML=t}),proceedsearch()}})};$(".popup-trigger").click(function(e){e.stopPropagation(),0==isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(function(e){$(".popup").hide(),$(".popoverlay").remove(),$("body").css("overflow","")}),$(".popup").click(function(e){e.stopPropagation()})</script><script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script><script>AV.initialize("Cc9hxvKgB63w6aMIIBCV2Bfz-gzGzoHsz","mBmolCuukl1GN11A7m8VQj9f")</script><script>function showTime(e){var t=new AV.Query(e),n=[],o=$(".leancloud_visitors");o.each(function(){n.push($(this).attr("id").trim())}),t.containedIn("url",n),t.find().done(function(e){if(0!==e.length){for(c=0;c<e.length;c++){var t=e[c],i=t.get("url"),s=t.get("time"),l=document.getElementById(i);$(l).find(".leancloud-visitors-count").text(s)}for(var c=0;c<n.length;c++){var i=n[c],l=document.getElementById(i),r=$(l).find(".leancloud-visitors-count");""==r.text()&&r.text(0)}}else o.find(".leancloud-visitors-count").text(0)}).fail(function(e,t){console.log("Error: "+t.code+" "+t.message)})}function addCount(e){var t=$(".leancloud_visitors"),n=t.attr("id").trim(),o=t.attr("data-flag-title").trim(),i=new AV.Query(e);i.equalTo("url",n),i.find({success:function(t){if(t.length>0){var i=t[0];i.fetchWhenSave(!0),i.increment("time"),i.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to save Visitor num, with error message: "+t.message)}})}else{var s=new e,l=new AV.ACL;l.setPublicReadAccess(!0),l.setPublicWriteAccess(!0),s.setACL(l),s.set("title",o),s.set("url",n),s.set("time",1),s.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to create")}})}},error:function(e){console.log("Error:"+e.code+" "+e.message)}})}$(function(){var e=AV.Object.extend("Counter");1==$(".leancloud_visitors").length?addCount(e):$(".post-title-link").length>1&&showTime(e)})</script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script></body></html>