带你深入了解vscode-eslint插件

本文介绍了ESLint的作用,它是用来检查和规范代码风格的工具,避免团队成员间的代码风格差异和语法错误。通过运行npm run lint可以检查代码问题,但为避免大量问题集中出现,可以使用ESLint插件实现实时提示。在Vue项目中,对于Vue2使用vetur,Vue3使用Volar。安装ESLint插件后,它会自动应用项目规则并提供提示。要开启格式化,需在设置中启用eslint.format.enable,并可通过两种方式实现格式化:右键选择Eslint格式化或配置保存时自动格式化。作者建议养成手动修正的习惯以提高代码质量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天我们聊的东西vscode 中的这个东东:
请添加图片描述
在聊ESlint 插件之前我们先聊聊eslint .

啥是eslint,为啥要有eslint?
这个问题估计大多数人都知道,在我们写代码时每一个人的风格都不一样,有时候还会写错语法,那么如果提交到代码仓库,同组小伙伴估计要口吐芬芳了。eslint 就为我们提前先检查一下代码是否有风险。

我们只需要运行下npm run lint,就会提示我们有哪些问题。这样就会有个问题,如果我们写了很多代码,当我们想提交时再去验证,如果发现一堆问题,估计我们内心也是万马奔腾。那么能不能当我们写代码那一时刻就提示我们说代码可能有问题?因此ESLint 插件就可以搞定

当我们使用Vue写项目时,我们需要下面几个步骤:

  1. 若是Vue2使用vetur, Vue3使用Volar
  2. 安装Eslint插件
    • 只要安装这个插件,它会自动查找项目中的ESlint规则,给出验证提示
    • 如何格式化?需要手动开启,preferences->settings->Exnsions->eslint.format.enable 勾选,就会开启格式化。
    • 格式化操作有两种方式(个人不建议开启格式化,自己根据提示手动去改,会让我们养成代高质量的代码书写习惯):1.选择格式化的文件,右击,选择格式化方式,选Eslint; 2:在配置文件中配置一下,保存就可以格式化,
       "editor.codeActionsOnSave": {
            "source.fixAll": true // 保存时使用eslint校验文件
       },
      
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值