VSCode配置eslint

在Vue.js项目中,使用的是eslint检查。

而在我写完代码后,cnpm run dev运行命令。。。然后悲剧了,一大堆报错!╮(╯▽╰)╭

安装插件:Vetur:这是vscode上一个vue.js代码提示,语法高亮等功能的流行插件。不过因为它代码格式化使用的是prettier,所以使用vscode右键自带的“格式化文件 Alt+shift+F”,会存在一些问题:

比如强制双引号(double quotes)、行尾自动加上分号(semicolon)等。

重点是:这些在eslint中报错!!!无语O__O "…

所以在用户设置setting.json里面:可以这样设置

注意:这样设置后,是vscode右键格式化显示效果;不过还有点小问题,函数名后面的圆括号与函数名不会格式化后添加空格(而这导致在eslint中语法报错,╮(╯▽╰)╭)

解决方法安装ESLint插件,同样是用户设置setting.json:

 1 //配置eslint
 2     "eslint.autoFixOnSave": true,
 3     "files.autoSave":"off",
 4     "eslint.validate": [
 5        "javascript",
 6        "javascriptreact",
 7        "html",
 8        { "language": "vue", "autoFix": true }
 9      ],
10      "eslint.options": {
11         "plugins": ["html"]
12      },
13      //为了符合eslint的两个空格间隔原则
14      "editor.tabSize": 2

这样每次保存文件(ctrl+s)时,eslint插件会自动对当前文件进行eslint语法修正!

其实有时候也不得不说是一种无奈,eslint制定了规则,因为使用它,所以算是半强迫状态接收它的某些规则(即使某些规则刚开始让人有点不适应)

由原先C++等语言的在行末尾加分号,使用python时tab=4空格缩进,到现在这eslint的强制单引号和行尾不加分号等规则(整的跟ruby越来越像,╮(╯▽╰)╭)【这里说的是eslint的默认规则,当然你要去强行修改当然可以改变规则。但是大多数人使用不修改的风格,而如果你去使用修改后的风格,沟通协作又是一个问题!】

业界也是对这些东西争论不休,无奈╮(╯▽╰)╭。整天哪么语言最好,加分号还是不加分号(这里可看知乎链接),vim最强编辑器等等!

明明是可选的规则,而某些工具强制性般使用一种规则。也不知是好是坏,不过本人也只有“入乡随俗”,紧跟“大潮流”,不断变化吧╮(╯▽╰)╭

js中不加分号主要在圆括号方括号正则开头的斜杠加号减号后三种比较少见前面两种主要体现在IIFE立即执行的函数表达式,数组)5种情况下容易出问题:

这是经保存(ctrl+s)后,eslint格式化的js代码,如下图所示:

这是vscode鼠标右键“格式化文件”显示的代码,如下图所示:

本文中用到的插件主要有以下几种:

ESLint插件:

prettier插件:

Vetur插件:

 更多VSCode插件即配置可参见我的另一篇博客:VSCode插件及用户设置

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏华章科技

这件神器,每个 Python 学习者都值得一试

Jupyter Notebook 是一款 Web 应用,它能让用户将上面说的各种窗口里的东西,全部组合到一个可读性好,易于共享,且对新手友好的文档中。这个文档里...

892
来自专栏小樱的经验随笔

IPython使用学习笔记

学习《利用python进行数据分析》第三章 IPython:一种交互式计算和开发环境的笔记,共享给大家,同时为自己作为备忘用。 ? 安装ipython用pip即...

4065
来自专栏不止是前端

TS+React+Router+Mobx+Koa打造全栈应用

4877
来自专栏python小白到大牛

这件神器,每个 Python 学习者都值得一试

不论你是刚开始学 Python,还是正在啃数据分析的骨头,对你来说,不断在各种命令行窗口和编辑器里切来切去,或者不断打开各种窗口查看 matplotlib 的输...

1464
来自专栏听雨堂

Mapxtreme之活活气死

都是小问题,但是都耗费了我巨大的精力和时间。在缺乏资料的情况下,一点点小问题都会非常麻烦,有时真是气死人不偿命:( 1、加载地图(gst文件),设定的selec...

1985
来自专栏小狼的世界

Firebug Command Line 的使用技巧

Commandlinie是Firebug中总有用的一个特性。如果你有Microsoft Visual Studio的使用经验,你就会知道“Immediate W...

1143
来自专栏java思维导图

Intellij IDEA神器那些让人爱不释手的14种小技巧,统统告诉你!

来源:https://blog.csdn.net/linsongbin1/article/details/80560332

1025
来自专栏Seebug漏洞平台

HCTF2017 部分 Web 出题思路详解

作者:LoRexxar'@知道创宇404实验室 11月12日结束的HCTF2017,我总共出了其中4道题目,这4道题目涵盖了我这半年来接触的很多有趣的东西。下面...

3004
来自专栏DeveWork

【译】WordPress 中的50个过滤器(2):先介绍10个过滤器

在上一篇文章中,我们介绍了WordPress 世界的过滤器;本篇文章的话我们将要探索50个笔者精选的过滤器,并一一通过例子解释其如何工作的。 事不宜迟,让...

2206
来自专栏Google Dart

开始使用-编写你的第一个Flutter应用程序 顶

这是创建您的第一个Flutter应用程序的指南。 如果您熟悉面向对象的代码和基本编程概念(如变量,循环和条件),则可以完成本教程。 您不需要以前使用Dart或移...

1012

扫码关注云+社区

领取腾讯云代金券