使用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 错误,不需要手动运行命令行

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

posted on 2025-10-08 09:28  slgkaifa  阅读(3)  评论(0)    收藏  举报

导航