脚本宝典收集整理的这篇文章主要介绍了

vscode 配置eslint 开发vue的相关配置

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>如何在vscode中用JavaScript Standard Style风格去验证 vue文件<br />实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。</p> <p>但是有一点非常重要的作者没有提到,就是eslint-plugin-html这个插件必须要安装3.x.x版本的, 现在eslint-plugin-html, 已经升级到4.x版本,默认不写版本号安装的就是4.x版本的,所以会出现问题。</p> <p>参考:详情请参考 <a href="https://www.npmjs.com/package/eslint-plugin-html" rel="nofollow noreferrer" target="_blank">https://www.npmjs.com/package...</a><br /> 此ESLint插件允许linting和修复<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>文件中包含的内联脚本。</p> <p>迁移到v4<br /> eslint-plugin-htmlv4至少需要ESLint v4.7。这是因为ESLint v4.7中发生了许多内部更改,包括支持预处理器中自动固定的新<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>。如果您仍在使用旧版本的ESLint,请考虑升级或继续使用 eslint-plugin-htmlv3。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>eslint-plugin-htmlv4中的重要特性(和重大变化)是能够选择在同一<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>文件中的脚本标记之间共享范围的方式。</p> <p>迁移到v3<br /> 如果您正在考虑升级到v3,请阅读本指南。<br />ESLint v4 is only supported by eslint-plugin-html v3, so you can't use eslint-plugin-html v1.5.2 with it (I should add a warning about <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a> when trying to use the plugin with an incompatible version on ESLint).<br />If you do not use ESLint v4, please provide more information (package.json, a gist to reproduce, ...)<br />// FAQ<br />How to lint script tag in vue or html files?</p> <p>You can lint them with eslint-plugin-html, just install it first, then enable linting for those file types in settings.json with:</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;standard.validate&quot;: [ &quot;javascript&quot;, &quot;javascriptreact&quot;, &quot;html&quot; ], &quot;standard.options&quot;: { &quot;plugins&quot;: [&quot;html&quot;] }, &quot;files.associations&quot;: { &quot;*.vue&quot;: &quot;html&quot; } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json"> { <span class="hljs-attr">"standard.validate"</span>: [ <span class="hljs-string">"javascript"</span>, <span class="hljs-string">"javascriptreact"</span>, <span class="hljs-string">"html"</span> ], <span class="hljs-attr">"standard.options"</span>: { <span class="hljs-attr">"plugins"</span>: [<span class="hljs-string">"html"</span>] }, <span class="hljs-attr">"files.associations"</span>: { <span class="hljs-attr">"*.vue"</span>: <span class="hljs-string">"html"</span> } }</code></pre> <p>If you want to enable autoFix for the new languages, you should enable it yourself:</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;standard.validate&quot;: [ &quot;javascript&quot;, &quot;javascriptreact&quot;, { &quot;language&quot;: &quot;html&quot;, &quot;autoFix&quot;: true } ], &quot;standard.options&quot;: { &quot;plugins&quot;: [&quot;html&quot;] } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json"> {<span class="hljs-attr">"standard.validate"</span>: [ <span class="hljs-string">"javascript"</span>, <span class="hljs-string">"javascriptreact"</span>, { <span class="hljs-attr">"language"</span>: <span class="hljs-string">"html"</span>, <span class="hljs-attr">"autoFix"</span>: <span class="hljs-literal">true</span> } ], <span class="hljs-attr">"standard.options"</span>: { <span class="hljs-attr">"plugins"</span>: [<span class="hljs-string">"html"</span>] } }</code></pre> <h1 id="articleHeader0">1、需要安装插件:</h1> <p>npm i -g standard<br />npm i -g eslint-plugin-html@3.2.2 此处使用是3x版本<br />npm i -g eslint 或者 vscode 安装 eslint</p> <h1 id="articleHeader1">2 、vscode setting 设置:</h1> <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;standard.validate&quot;: [ &quot;javascript&quot;, &quot;javascriptreact&quot;, { &quot;language&quot;: &quot;html&quot;, &quot;autoFix&quot;: true } ], &quot;standard.options&quot;: { &quot;plugin&quot;: [&quot;html&quot;] }, &quot;files.associations&quot;: { &quot;*.vue&quot;: &quot;html&quot; }, &quot;standard.autoFixOnSave&quot;: true }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">{ <span class="hljs-attr">"standard.validate"</span>: [ <span class="hljs-string">"javascript"</span>, <span class="hljs-string">"javascriptreact"</span>, { <span class="hljs-attr">"language"</span>: <span class="hljs-string">"html"</span>, <span class="hljs-attr">"autoFix"</span>: <span class="hljs-literal">true</span> } ], <span class="hljs-attr">"standard.options"</span>: { <span class="hljs-attr">"plugin"</span>: [<span class="hljs-string">"html"</span>] }, <span class="hljs-attr">"files.associations"</span>: { <span class="hljs-attr">"*.vue"</span>: <span class="hljs-string">"html"</span> }, <span class="hljs-attr">"standard.autoFixOnSave"</span>: <span class="hljs-literal">true</span> }</code></pre> <h1 id="articleHeader2">3、vscode 相关插件 Prettier and eslint 格式化代码:</h1> <p>ESLint (如果全局安装了,vscode 可以不安装)<br /> Prettier formatter <br /> Vetur<br /> #4 格式化代码相关设置</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;files.autoSave&quot;: &quot;afterDelay&quot;, &quot;editor.fontSize&quot;: 14, &quot;editor.tabSize&quot;: 2, &quot;eslint.autoFixOnSave&quot;: true, &quot;eslint.validate&quot;: [ &quot;javascript&quot;, &quot;javascriptreact&quot;, &quot;vue&quot;, { &quot;language&quot;: &quot;html&quot;, &quot;autoFix&quot;: true } ], &quot;prettier.singleQuote&quot;: true, &quot;prettier.semi&quot;: false, &quot;editor.formatOnSave&quot;: true }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json">{ <span class="hljs-attr">"files.autoSave"</span>: <span class="hljs-string">"afterDelay"</span>, <span class="hljs-attr">"editor.fontSize"</span>: <span class="hljs-number">14</span>, <span class="hljs-attr">"editor.tabSize"</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">"eslint.autoFixOnSave"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"eslint.validate"</span>: [ <span class="hljs-string">"javascript"</span>, <span class="hljs-string">"javascriptreact"</span>, <span class="hljs-string">"vue"</span>, { <span class="hljs-attr">"language"</span>: <span class="hljs-string">"html"</span>, <span class="hljs-attr">"autoFix"</span>: <span class="hljs-literal">true</span> } ], <span class="hljs-attr">"prettier.singleQuote"</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">"prettier.semi"</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">"editor.formatOnSave"</span>: <span class="hljs-literal">true</span> }</code></pre> <h1 id="articleHeader3">5 .eslintrc.js 相关</h1> <p>项目根目录下创建 .eslintrc.js</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="module.exports = { root: true, env: { node: true, }, 'extends': [ // 需要官方的 eslint-plugin-vue,它支持同时检查你 .vue 文件中的模板和脚本。请确保在你的 ESLint 配置中使用了该插件自身的配置: 'plugin:vue/essential', // standard 代码规范 https://github.com/standard/standard/blob/master/docs/RULES-en.md '@vue/standard' ], rules: { 'no-new-func':0, 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 解决 iview 报错问题 &quot;vue/no-parsing-error&quot;: [2, { &quot;x-invalid-end-tag&quot;: false }] }, parserOptions: { parser: 'babel-eslint' }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">root</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">env</span>: { <span class="hljs-attr"><a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a></span>: <span class="hljs-literal">true</span>, }, <span class="hljs-string">'extends'</span>: [ <span class="hljs-comment">// 需要官方的 eslint-plugin-vue,它支持同时检查你 .vue 文件中的模板和脚本。请确保在你的 ESLint 配置中使用了该插件自身的配置:</span> <span class="hljs-string">'plugin:vue/essential'</span>, <span class="hljs-comment">// standard 代码规范 https://github.com/standard/standard/blob/master/docs/RULES-en.md</span> <span class="hljs-string">'@vue/standard'</span> ], <span class="hljs-attr">rules</span>: { <span class="hljs-string">'no-new-func'</span>:<span class="hljs-number">0</span>, <span class="hljs-string">'no-console'</span>: process.env.NODE_ENV === <span class="hljs-string">'production'</span> ? <span class="hljs-string">'error'</span> : <span class="hljs-string">'off'</span>, <span class="hljs-string">'no-debugger'</span>: process.env.NODE_ENV === <span class="hljs-string">'production'</span> ? <span class="hljs-string">'error'</span> : <span class="hljs-string">'off'</span>, <span class="hljs-comment">// 解决 iview 报错问题</span> <span class="hljs-string">"vue/no-parsing-error"</span>: [<span class="hljs-number">2</span>, { <span class="hljs-string">"x-invalid-end-tag"</span>: <span class="hljs-literal">false</span> }] }, <span class="hljs-attr">parserOptions</span>: { <span class="hljs-attr">parser</span>: <span class="hljs-string">'<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-eslint'</span> }</code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vscode 配置eslint 开发vue的相关配置

全部内容,希望文章能够帮你解决

vscode 配置eslint 开发vue的相关配置

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过