使用cursor 编辑器开发 Vue项目,配置ESlint自动修复脚本,解决代码不规范引起的报错无法运行项目问题
一、 使用cursor 编辑器开发,配置ESlint 自动修复脚本
ESlint:是用来统一JavaScript代码风格的工具,不包含css、html等
在开发中,遇到ESlint报警
解决方法
.在 .eslintrc.js 中添加了明确的规则配置:
- space-before-function-paren: 强制函数括号前有空格
- comma-dangle: 禁止尾随逗号
- semi: 禁止使用分号
- quotes: 强制使用单引号
- 在
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 错误,不需要手动运行命令行了
最后 重启服务就可以生效了~