编码标准检查配置教程:轻松搞定代码规范

什么是编码标准检查

在日常开发中,团队协作写代码最怕风格不统一。有人用四个空格缩进,有人偏爱 Tab;有人在括号前加空格,有人直接贴上去。时间一长,代码看起来像拼凑的杂文。编码标准检查就是为了解决这个问题,通过工具自动检测代码是否符合预设规范,比如 ESLint、Prettier 或 Checkstyle。

为什么办公场景也需要它

别以为只有程序员才需要。现在很多办公软件也支持脚本扩展,比如 Excel 的 VBA 宏、Google Sheets 的 Apps Script,甚至自动化流程平台如 Zapier 也允许写自定义函数。一旦脚本变复杂,维护起来就头疼。提前配好编码检查,能避免低级错误,也让别人接手时少踩坑。

以 ESLint 为例配置检查规则

假设你正在用 VS Code 编辑 JavaScript 脚本,准备给公司内部系统写个数据导出功能。第一步是安装 ESLint:

npm install eslint --save-dev

初始化配置文件:

npx eslint --init

根据提示选择环境(浏览器、Node.js)、模块系统、框架,以及想遵循的规范,比如 Airbnb 或 Standard。完成后会生成 .eslintrc.js 文件。

常见规则调整示例

打开配置文件,可以按团队习惯修改。例如,关闭分号要求:

module.exports = {
  rules: {
    "semi": ["error", "never"]
  }
};

或者统一缩进为 2 个空格:

module.exports = {
  rules: {
    "indent": ["error", 2]
  }
};

集成到编辑器实时提醒

光有配置还不行,得让它在写代码时就起作用。VS Code 安装 ESLint 插件后,保存文件时会自动标红不符合规范的地方。鼠标移上去还能看到具体哪条规则被违反,点快速修复就能自动调整格式。

配合 Prettier 美化输出

ESLint 主要管“对不对”,Prettier 则专注“好不好看”。两者搭配使用更顺手。先安装依赖:

npm install --save-dev prettier eslint-config-prettier

然后在 .eslintrc.js 中关闭与 Prettier 冲突的规则:

extends: [
  "eslint:recommended",
  "prettier"
]

再建一个 .prettierrc 配置文件:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

让检查成为工作流一环

可以在 package.json 里加个命令:

"scripts": {
  "lint": "eslint src/**/*.js"
}

运行 npm run lint 就能批量检查所有源文件。进一步还可以设置 Git 提交前自动检查,防止不合规代码进入仓库。

小技巧:从现有项目复制配置

如果你们部门已经有项目在用这类工具,最省事的方法是直接把 .eslintrc.js、.prettierrc 这些文件拷过来,稍作修改就能用。不用从头研究上百条规则怎么配。