mindskip/xzs-mysql代码规范：ESLint代码检查
项目地址: https://gitcode.com/mindskip/xzs-mysql 前言
在大型开源项目中，代码质量是项目成功的关键因素。学之思开源考试系统（xzs-mysql）作为一款Java + Vue的前后端分离考试系统，采用了严格的ESLint代码检查规范来确保代码质量和一致性。本文将深入解析项目的ESLint配置、代码规范实践以及最佳使用方式。
项目ESLint配置解析
基础配置结构
学之思考试系统的两个前端项目（xzs-admin和xzs-student）都采用了统一的ESLint配置：
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
配置详解
| 配置项 | 说明 | 作用 |
|---|---|---|
root: true | 根配置文件 | 防止ESLint向上查找父目录配置 |
env.node: true | Node.js环境 | 提供Node.js全局变量和语法支持 |
extends | 扩展配置 | 继承Vue和Standard代码规范 |
rules | 自定义规则 | 根据环境配置不同的规则严格程度 |
parserOptions | 解析器配置 | 使用babel-eslint支持ES6+语法 |
代码规范实践
1. 变量命名规范
项目采用camelCase（驼峰命名法）规范：
// ✅ 正确示例
const userName = '张三'
const examPaperList = []
const getUserInfo = () => {}
// ❌ 错误示例
const user_name = '张三' // 使用下划线
const ExamPaperList = [] // 首字母大写
const get_user_info = () => {} // 使用下划线
2. 函数定义规范
// ✅ 正确示例 - 函数声明
function getUserInfo(userId) {
return api.get(`/user/${userId}`)
}
// ✅ 正确示例 - 箭头函数
const getUserInfo = (userId) => {
return api.get(`/user/${userId}`)
}
// ❌ 错误示例 - 缺少空格
function getUserInfo(userId){
return api.get(`/user/${userId}`)
}
3. 组件命名规范
Vue组件采用PascalCase（帕斯卡命名法）：
<!-- ✅ 正确示例 -->
<template>
<UserInfoCard :user="userData" />
</template>
<script>
import UserInfoCard from './components/UserInfoCard.vue'
export default {
name: 'UserProfile',
components: {
UserInfoCard
}
}
</script>
ESLint规则详解
生产环境严格规则
Standard规范扩展
项目继承了@vue/standard规范，包含以下重要规则：
| 规则类别 | 具体规则 | 说明 |
|---|---|---|
| 缩进 | indent: 2 | 使用2个空格缩进 |
| 分号 | semi: never | 禁止使用分号 |
| 引号 | quotes: single | 使用单引号 |
| 逗号 | comma-dangle: never | 禁止尾随逗号 |
| 空格 | space-before-function-paren: always | 函数括号前需要空格 |
Git提交前检查
Husky + lint-staged配置
项目配置了Git提交前的自动代码检查：
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
}
}
提交流程
常见错误及修复
1. 控制台语句错误
// ❌ 生产环境错误
console.log('调试信息')
console.error('错误信息')
// ✅ 修复方案
if (process.env.NODE_ENV !== 'production') {
console.log('调试信息') // 仅开发环境输出
}
2. 未使用变量错误
// ❌ 错误示例
const unusedVariable = '未使用的变量'
const usedVariable = '使用的变量'
console.log(usedVariable)
// ✅ 修复方案
const usedVariable = '使用的变量'
console.log(usedVariable)
3. 引号使用错误
// ❌ 错误示例
const name = "张三"
const message = `欢迎, ${name}`
// ✅ 修复方案
const name = '张三'
const message = `欢迎, ${name}` // 模板字符串允许使用反引号
自定义规则配置
扩展规则配置
如果需要扩展或修改规则，可以在.eslintrc.js中添加：
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 自定义规则
'max-len': ['error', { 'code': 100 }], // 最大行长度100
'comma-dangle': ['error', 'never'], // 禁止尾随逗号
'arrow-parens': ['error', 'as-needed'] // 箭头函数参数括号
}
开发最佳实践
1. 实时检查配置
在开发过程中，建议配置编辑器的ESLint插件，实现实时检查：
# 安装VS Code ESLint扩展
# 配置settings.json
{
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
2. 批量修复命令
# 检查所有文件
npm run lint
# 自动修复可修复的问题
npm run lint -- --fix
# 检查特定文件
npx eslint src/components/UserCard.vue
# 生成HTML报告
npx eslint --format html -o eslint-report.html src/
3. 忽略特定文件或代码
// eslint-disable-next-line no-console
console.log('这行代码不会被检查')
/* eslint-disable */
const legacyCode = require('./old-file.js')
/* eslint-enable */
总结
学之思考试系统通过严格的ESLint代码规范，确保了项目的代码质量和一致性。主要特点包括：
- 统一规范：采用Standard和Vue官方推荐规范
- 自动化检查：Git提交前自动执行代码检查
- 环境感知：根据环境配置不同的规则严格程度
- 可扩展性：支持自定义规则满足特定需求
通过遵循这些规范，开发者可以编写出高质量、可维护的代码，为项目的长期发展奠定坚实基础。
# 快速开始
git clone https://gitcode.com/mindskip/xzs-mysql
cd xzs-mysql/source/vue/xzs-admin
npm install
npm run lint # 检查代码规范创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
