当前位置: 首页 > web >正文

使用cursor 编辑器开发 Vue项目,配置ESlint自动修复脚本,解决代码不规范引起的报错无法运行项目问题

一、 使用cursor 编辑器开发,配置ESlint 自动修复脚本

ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等

在这里插入图片描述
在这里插入图片描述
在开发中,遇到ESlint报警

解决方法

.在 .eslintrc.js 中添加了明确的规则配置:

  1. space-before-function-paren: 强制函数括号前有空格
  2. comma-dangle: 禁止尾随逗号
  3. semi: 禁止使用分号
  4. quotes: 强制使用单引号
  5. package.json 中修改了 lint 脚本,添加了 --fix 选项,这样每次运行 npm run lint 时都会自动修复问题。

1.在 .eslintrc.js 文件中,编写如下代码

在这里插入图片描述

完整代码:

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/essential', '@vue/standard'],parserOptions: {parser: '@babel/eslint-parser'},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren': ['error', 'always'],'comma-dangle': ['error', 'never'],semi: ['error', 'never'],quotes: ['error', 'single']}
}

2.在 package.json 中添加一个自动修复的脚本

代码:

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint --fix"},

在这里插入图片描述
之后,每次保存文件时都会自动修复 ESLint 错误,不需要手动运行命令行了

最后 重启服务就可以生效了~

http://www.xdnf.cn/news/12047.html

相关文章:

  • rockyLinux常用共享的服务和配置
  • JAVASE:面向对象
  • 第4章(旧)Day1 - Python小白上路
  • 路凯智行助力华润水泥长治矿区开启无人运输新场景
  • 奈氏准则/奈奎斯特定理 如何直观理解2W这个超参数,为什么偏偏就是2呢?
  • fastadmin+workman环境搭建
  • thymeleaf直接调用Spring Bean中定义的方法
  • 区块链技术在计算机信息网络综合布线实训室的应用实践
  • mybatis 参数绑定错误示范(1)
  • 配置GDAL使用工具
  • window 显示驱动开发-提供视频解码功能(二)
  • 工业自动化DeviceNET从站转Ethernet/IP主站网关赋能冶金行业工业机器人高效运行
  • 网络编程之网络基础
  • VS Code 打开ipynb(还不会)运行python
  • 微服务面试资料1
  • CppCon 2015 学习:Benchmarking C++ Code
  • 【vibe coding解决100个问题】开发CRM管理系统, Augment/windsurf/bolt.new哪家强?
  • AtCoder-abc407_e解析
  • 【Blender Texture】【游戏开发】高质感 Blender 4K 材质资源推荐合集 —— 提升场景真实感与美术表现力
  • Vue跨层级通信
  • 2025-0604学习记录17——文献阅读与分享(2)
  • Anaconda全平台安装指南
  • PostgreSQL-安装-win10、win11安装pgsql16.1和timescaledb2.13.0(绿色免安装版本)
  • 开源库 API 化平台 (ALLBEAPI) - 让优秀工具触手可及!
  • 实验设计如何拯救我的 CEI VSR 28G 设计
  • ubuntu下libguestfs-tools
  • 电力系统时间同步系统之二
  • 我的概要设计模板(以图书管理系统为例)
  • [Css]等腰梯形
  • 如何在IDE中通过Spark操作Hive