Debian中JS代码风格和规范如何制定 - 问答

Debian下制定JS代码风格与规范的落地方案

一基础环境准备

在 Debian 上优先使用 NodeSource 仓库或 nvm 安装与管理 Node.js/npm，保证获得较新的 ES6+ 支持与稳定的包管理能力。示例：使用 NodeSource 安装 Node.js 18.x，或用 nvm 安装与切换多版本，避免项目间版本冲突。
选择 VS Code 作为主力编辑器，并安装 ESLint、Prettier 等扩展，获得保存时自动格式化与实时诊断能力。
说明：虽然 apt 可直接安装部分工具（如 prettier、eslint），但前端生态迭代快，建议使用 npm 在项目中维护依赖版本，确保一致性与可复现性。

二规范制定与落地

使用 EditorConfig 统一基础格式（如缩进、换行、编码），抹平不同编辑器/IDE 的差异，项目根目录添加 .editorconfig。
采用 Prettier 统一代码格式（与团队审美无关的格式决策交由工具执行），项目根目录添加 .prettierrc 与 .prettierignore。
采用 ESLint 负责代码质量与风格规则（不可自动修复的逻辑问题），项目根目录添加 .eslintrc.js/.json 与 .eslintignore。
将 Prettier 与 ESLint 集成，避免规则冲突：使用 eslint-config-prettier 关闭 ESLint 中与 Prettier 重叠的格式规则，使用 eslint-plugin-prettier 将 Prettier 作为 ESLint 规则运行。
在 package.json 中固化脚本与版本，便于团队统一执行与 CI 复现。

三推荐配置与示例

Prettier 示例（.prettierrc）：统一缩进、引号、行宽、尾逗号等基础格式

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

ESLint 示例（.eslintrc.json）：质量与风格并重，并集成 Prettier

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "env": { "browser": true, "node": true, "es2022": true },
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-console": "warn",
    "prettier/prettier": "error"
  }
}

EditorConfig 示例（.editorconfig）

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

package.json 脚本示例

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "precommit": "lint-staged"
  },
  "devDependencies": {
    "eslint": "^8",
    "prettier": "^3",
    "eslint-plugin-prettier": "^5",
    "eslint-config-prettier": "^9",
    "lint-staged": "^15",
    "husky": "^9"
  }
}

说明：上述集成方式确保“格式交给 Prettier，质量交给 ESLint”，并通过 eslint-plugin-prettier 与 eslint-config-prettier 消除冲突。

四本地与提交时强制执行

使用 husky + lint-staged 在提交前自动对暂存区文件执行 ESLint 与 Prettier，阻止不合规代码进入仓库。示例：
- 安装与启用：npm i -D husky lint-staged；npx husky install；在 package.json 的 prepare 脚本中自动启用（如：“prepare”: “husky install”）。
- 配置 package.json 的 lint-staged：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

团队统一执行：开发者只需运行常规 git commit，即可在提交前自动完成格式化与质量校验；CI 中同样执行 npm run lint 与 npm run format:check，保证一致性。

五团队规范文档与维护

在仓库根目录维护 CONTRIBUTING.md / STYLEGUIDE.md，明确：
- 代码风格与质量工具链（Prettier/ESLint/EditorConfig）、版本与脚本入口；
- 命名、目录结构、注释与 JSDoc 要求；
- 错误处理、日志、依赖管理与安全约束；
- 提交规范（如约定式提交）与 CI 失败处理流程。
结合 JSDoc 与示例说明关键 API 的使用约束，提升可读性与可维护性；在 CI 中加入 npm audit 等安全审计，降低依赖风险。

0 赞

0 踩