<p><code></p> <h2 id="articleHeader0">方法1:安装 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.js 插件</h2> <p>打开 Settings-&gt;Plugins 搜索安装<br />css预处理器支持</p> <p>在我写这文章的时间,还没有支持预处理的方案,不过现在已经很简单了。<br />给 style 标签加上 rel=”stylesheet/scss” 属性即可支持 scss 语法,看规则可以改成 less stylus 之类的。</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=" <style rel=&quot;stylesheet/scss&quot; lang=&quot;sass&quot; scoped> </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet/scss"</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"sass"</span> <span class="hljs-attr">scoped</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <h2 id="articleHeader1">方法2:Webstorm EAP 版已经原生支持vue文件</h2> <p>看这里 <a href="https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-2822/" rel="nofollow noreferrer" target="_blank">https://blog.jetbrains.com/we...</a> EAP版可能不太稳定,不过也能用。<br />或者等过段时间发布的 Webstorm 2017.1 稳定版。<br />不得不说vue真是越用越厉害了啊,Webstorm也开始支持了。最后 原生支持才是最好的</p> <h2 id="articleHeader2">以下内容过时,针对旧版本的Webstorm</h2> <p>webstorm是前端开发神器,但我一直都不喜欢webstorm,就因为那很挫的配色和那大光标。<br />上阵子开始玩 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>js,在 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 中,可以 .vue 文件实现组件化,但各种编辑器都支持不好,作者也给sublime开发了相关的vue插件。我觉得用sublime就是在浪费生命啊,花那么多时间来装插件配环境,我选择IDE!<br />坚持用sublime写了一个月的vue,没有智能提示(而对重度依赖提示),不能对代码进行格式化,手动调缩进,尼玛,能坚持这么久也不容易。所以折腾了下webstorm看怎么支持,所以就有这篇笔记。</p> <h2 id="articleHeader3">vue支持</h2> <p>打开 Settings =&gt; File Types 找到 <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> 添加 *.vue</p> <p><span class="img-wrap"><img data-src="/img/bVPc9Q?w=978&amp;h=700" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>这样vue文件就相当于html文件,可以编辑css,js,也都有智能提示。<br />我一般用的是 <a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a> ,所以vue写<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>的代码,webstorm还是会报错。</p> <h2 id="articleHeader4">vue里ES6支持</h2> <p>将script标签添加 type=”<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>” 属性</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 type=&quot;es6&quot;> </script><br /> " 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">type</span>=<span class="hljs-string">"es6"</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>然后打开 Settings =&gt; Language Injections 添加 XML Tag Injection,内容如下图。</p> <p><span class="img-wrap"><img data-src="/img/bVPc9R?w=978&amp;h=700" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <h2 id="articleHeader5">*.js 支持ES6</h2> <p>webstorm默认js文件是ES5语法<br />打开 Settings =&gt; Languages &amp; Frameworks =&gt; Javascript<br />把 Javascript Language version 改为 <a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a> 6</p> <p><span class="img-wrap"><img data-src="/img/bVPc9T?w=978&amp;h=700" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="clipboard.png" title="clipboard.png" style="cursor: pointer;"></span></p> <p>PS:要在vue文件里写sass,stylus之类的css预处理,webstorm就不支持了,我也尝试了添加 Injection ,代码高亮正常,但却是临时的,只要一改动代码,又会划很多红线了,经过google,这似乎是webstorm的一个已知的Bug。</p> <p>本文转载于<a href="http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%81/" rel="nofollow noreferrer" target="_blank">http://www.lred.me/2016/01/07...</a></p> <p></code></p>

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