<p><code></p> <p>1.vscode 默认 单击文件是预览, 双击文件是用一个新的Tab打开。如果想关掉预览模式,单击打开文件,在设置里加入"workbench.editor.enablePreview": false,这样单击文件就是直接用新Tab打开了。</p> <p>2.在vscode中,有个beauty插件,它可以帮你把压缩的代码进行还原。</p> <p><span class="img-wrap"><img data-src="/img/bVWqfN?w=466&amp;h=61" src="/img/bVWqfN?w=466&amp;h=61" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p><span class="img-wrap"><img data-src="/img/bVWqf5?w=513&amp;h=71" src="/img/bVWqf5?w=513&amp;h=71" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p>记住,要先选中要解压的代码,再用ctrl+shift+B进行还原(在mac中是用cmd+shift+B)</p> <p>3."view-in-browser.customBrowser": "chrome"//在用户设置中,设置使用chrome浏览器打开html文件<br />使用如下快捷键打开单一的html页面:<br /><span class="img-wrap"><img data-src="/img/bVWqiY?w=935&amp;h=28" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>4.Keyboard shortcuts for Windows<br />vscode的快捷键操作可以查看vscode官网</p> <p>5.Vetur插件<br /><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新。虽然现在的编辑器需要安装相应的plugins才能进行<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>组件化开发,但是越来越多优秀的plugins都提供了强大的支持。比如VSCode下面的Vetur就是这样一款必备的<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>开发工具。下面就开始介绍一下它的一些功能吧</p> <p><strong>语法高亮</strong></p> <p>Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript,完整的支持高亮的语法如下所示:</p> <p><span class="img-wrap"><img data-src="/img/bV2OsU?w=600&amp;h=377" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p><strong>Snippet</strong></p> <p>你可以使用一些snippet来编写不同的脚本,比如在script中申明 lang=”ts” 来开发TypeScript</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script lang=&quot;ts&quot;> // Use TS snippets here </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"ts"</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">// Use TS snippets here</span> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><strong>Emmet</strong></p> <p>VSCode本身自带了Emmet,能够通过Tab键对<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>5的代码进行快速开发,不过,VSCode中需要修改Emmet配置才能对Vue进行支持。打开文件-&gt;首选项-&gt;设置,就会进入到 settings.json 文件中,在左侧是VSCode默认的配置</p> <p><span class="img-wrap"><img data-src="/img/bV2OsY?w=600&amp;h=280" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br />在窗口右侧可以进行一系列的配置,在其中添加</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;emmet.syntaxProfiles&quot;: { &quot;vue-html&quot;: &quot;html&quot;, &quot;vue&quot;: &quot;html&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"emmet.syntaxProfiles"</span>: { <span class="hljs-string">"vue-html"</span>: <span class="hljs-string">"html"</span>, <span class="hljs-string">"vue"</span>: <span class="hljs-string">"html"</span> }</code></pre> <p>这样就可以愉快的在Vue中体验Emmet带来的方便和快捷了</p> <p><strong>错误检测</strong></p> <p>Vetur默认使用 eslint-plugin-vue@beta 来检测</p> <p>你可以在设置中的 settings.json 文件关闭 linting:</p> <p><span class="img-wrap"><img data-src="/img/bV2Os7?w=576&amp;h=174" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span><br />修改 vetur.validation.template 为false即可</p> <p><strong>格式</strong></p> <p>Vetur推荐使用2个空格来规定 editor.tabSize 和 editor.insertSpace,对于html和css/scss/less格式使用js-beautify来规范,js/ts的格式使用 TypeScript’s language service,同时这些配置是可以改变的。具体可以参考:</p> <p>js-beautify的Github仓库:<a href="https://github.com/beautify-web/js-beautify" rel="nofollow noreferrer" target="_blank">js-beautify</a></p> <p>Sbulime-<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>Prettify的Github仓库:<a href="https://github.com/victorporof/Sublime-HTMLPrettify" rel="nofollow noreferrer" target="_blank">Sublime-HTMLPrettify</a></p> <p>除了以上的功能外,还有代码补全和Debugging功能,总而言之,一个工具如果能够为开发提供非常大的便利,那么它就是非常值的推荐的。</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_27174.html