如何使用vue中的代码校验(ESlint)

本文介绍了在vue-cli3+项目中如何使用和配置ESlint,包括ESlint的开启与关闭,默认设置,以及如何解决ESlint报错。通过在项目根目录创建配置文件,查阅官方文档了解规则,利用VS Code的Es-lint插件进行实时提示和修复,或者使用eslint自带的`eslint --fix`命令批量修复错误。

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

如何使用vue-cli3+中的ESlint

在创建项目的时候把Linter / Formatter给勾选上

eslint的开启与关闭(默认为开启)

在项目的根目录下可以手动创建 vue.config.js 文件(默认没有此文件)也如以下代码:

module.exports = {
  lintOnSave: false  // false为关闭反正true开启
} 

ESlint官方网址:

Eslint官网:https://eslint.org/

Eslint中文文档:https://cn.eslint.org/

官网有规则的介绍

ESlint错误解决

  1. 手动解决错误
    报错信息中包括:报错的文件路径,报错文件的行号/列号,报错信息,报错规则

  2. 通过vs code解析错误:通过在vs code安装Es-lint插件来修复格式错误, 安装此插件后语法不符合规范会有波浪线提示,可以将鼠标放到波浪线上在弹出框上修复

  3. 通过eslint自带功能修复 方法
    在package.json的scripts中加入

    “lint-fix”: “eslint --fix --ext .js --ext .jsx --ext .vue src/ test/unit test/e2e/specs”,

    然后关闭项目,运行下列代码

    npm run lint-fix,

  4. 利用vue ui 看下图↓
    点击运行就ok了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值