专栏首页Micro_awake webVSCode配置eslint

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 条评论
登录 后参与评论

相关文章

  • webstorm配置eslint【标记错误,修复错误】

    用户1149564
  • JavaScript OOP(三):prototype原型对象(即构造函数的prototype属性)

    通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法);造成了一定的资源浪费 1 function Obj(name...

    用户1149564
  • VSCode插件及用户设置

    第一部分:插件 VSCode内置"emmet"插件,"convert to utf-8"等插件效果!十分强大!代码提示功能特别强悍! VSCode官网插件地址:...

    用户1149564
  • 详解冒泡排序算法

    冒泡排序的基本思想是: 通过对待排序的序列从前向后依次比较相邻元素的值,如果发现逆序则交换。 逆序的含义:如果想把序列从小到大排序,那么两个数中前面的...

    code随笔
  • 【干货来了】!Oracle及普通软件卸载详解!

    电脑用的久了,里面的软件安装也会越来越多,但总有一些软件在使用过程中,甚至我们安装的过程中出现或多或少的问题,导致我们总是装了卸,卸了装(老实说,有时候纠结症都...

    Java学习
  • python之selectors

    selectors是select模块的包装器,ptython文档建议大部分情况使用selectors而不是直接使用selectors

    py3study
  • Java失宠,谷歌宣布Kotlin现在是Android开发的首选语言

    谷歌今天宣布,Kotlin 编程语言现在是 Android 应用程序开发人员的首选语言。

    Android技术干货分享
  • Java失宠,谷歌宣布Kotlin现在是Android开发的首选语言

    谷歌昨天宣布,Kotlin 编程语言现在是 Android 应用程序开发人员的首选语言。

    新智元
  • Java与Kotlin, 哪个是开发安卓应用的首选语言?

    Java是很多开发者创建安卓应用的首选语言。但它在 Android 界的领导地位正受到各种新语言的挑战,Kotlin就是其一。虽然Kotlin最近才开始受到热捧...

    LiveEdu
  • 使用 Q-Learning 实现 FlappyBird AI

    Q-Learning 是一种 off-policy 的强化学习算法, 本文介绍如何使用 Q-Learning 来实现FlappyBird 游戏的 AI,附件中给...

    罗晖

扫码关注云+社区

领取腾讯云代金券