Node前端开发工具链优化与配置指南

背景介绍

在现代 TypeScript 项目中，高效且规范的开发流程离不开合理的工具链配置。从代码格式化（如 Prettier）到静态类型检查（如 ESLint），再到依赖管理（如 pnpm 或 Yarn）和编译优化（如 tsup 或 swc），工具链的合理选择与配置直接影响开发效率、代码质量和团队协作的一致性。

代码格式化：确保团队成员遵循统一的代码风格，减少不必要的格式争议。
静态检查：提前捕获潜在错误，提升代码健壮性。
依赖管理：优化安装速度，减少 node_modules 冗余。
编译优化：加快构建速度，提升开发体验。

目标受众

本文适合以下开发者：

前端或全栈开发者：使用 TypeScript 进行应用或库开发。
Node.js 技术栈团队：基于 Node.js 构建后端服务或工具链。
希望优化工程化配置的团队：通过标准化工具提升协作效率。

.npmrc 配置

# 设置 npm 缓存目录，避免污染项目目录
cache=.npm/cache
# 设置 npm 临时文件目录
tmp=.npm/tmp

# 设置 npm 镜像源为国内镜像，提高安装速度
registry=https://mirrors.huaweicloud.com/repository/npm

# 强制使用 package.json 中指定的 Node 和 npm 版本
engine-strict=true
# 安装依赖时锁定确切版本号，避免出现 ^ 或 ~ 引入的非预期更新
save-exact=true
# 始终生成 package-lock.json 文件，确保团队一致性
package-lock=true
# 安装时自动保存到 package.json
save=true

# 优先使用缓存中的包，减少网络请求
prefer-offline=true
# 可选：完全离线模式（需要缓存完整）
# offline=true
# 尽可能复用已安装的包
prefer-dedupe=true
# 审计时仅显示高危及以上级别的漏洞
audit-level=high
# 强制将 devDependencies 中的依赖提升到 dependencies 中
shamefully-hoist=true
# 禁用 peerDependencies 的严格检查
strict-peer-dependencies=false
# 自动安装缺少的 peerDependencies
auto-install-peers=true

# 设置日志级别为 error，减少无用日志输出
loglevel=error
# 安装或下载包时显示进度条
progress=true

.prettierrc.json 配置

{
    // 语句末尾是否加分号
    "semi": true,

    // 尾随逗号设置为 none
    "trailingComma": "none",

    // 是否使用单引号
    "singleQuote": false,

    // 对象属性加引号的策略
    "quoteProps": "as-needed",

    // 每行最大长度
    "printWidth": 100,

    // 缩进宽度
    "tabWidth": 4,

    // 是否使用 tab
    "useTabs": false,

    // 箭头函数参数是否总带括号
    "arrowParens": "always",

    // 换行符类型
    "endOfLine": "lf",

    // 对象花括号内是否有空格
    "bracketSpacing": true,

    // 多行 JSX 的闭合标签是否在同一行
    "bracketSameLine": false
}

.eslintrc.json 配置

{
    // 标记为 ESLint 配置的根目录，停止向上查找配置文件
    "root": true,

    // 使用 TypeScript 解析器
    "parser": "@typescript-eslint/parser",

    // 解析器选项
    "parserOptions": {
        // 指定 ECMAScript 版本为 ES2017
        "ecmaVersion": 2017,
        // 使用 ES 模块语法
        "sourceType": "module",
        // 指定 TypeScript 项目配置文件路径
        "project": "./tsconfig.json"
    },

    // 使用的 ESLint 插件
    "plugins": ["@typescript-eslint"],

    // 继承的配置规则集
    "extends": [
        // ESLint 推荐规则
        "eslint:recommended",
        // TypeScript ESLint 推荐规则
        "plugin:@typescript-eslint/recommended",
        // Prettier 规则（禁用与 Prettier 冲突的 ESLint 规则）
        "prettier"
    ],

    // 运行环境
    "env": {
        // Node.js 全局变量和作用域
        "node": true,
        // ES2017 全局变量
        "es2017": true
    },

    // 自定义规则
    "rules": {
        // 类型安全规则
        "@typescript-eslint/no-explicit-any": "error", // 禁止显式使用 any 类型
        "@typescript-eslint/no-unsafe-assignment": "error", // 禁止将 any 值赋值给其他变量
        "@typescript-eslint/no-unsafe-member-access": "error", // 禁止访问 any 值的属性
        "@typescript-eslint/no-unsafe-call": "error", // 禁止调用 any 类型的函数
        "@typescript-eslint/no-unsafe-return": "error", // 禁止函数返回 any 类型
        "@typescript-eslint/no-unsafe-argument": "error", // 禁止将 any 作为参数传递

        // 代码风格规则
        "quotes": ["error", "double", { "avoidEscape": true }], // 强制使用双引号，允许为避免转义使用其他引号
        "semi": ["error", "always"], // 强制使用分号
        "no-trailing-spaces": "error", // 禁止行尾空格
        "eol-last": ["error", "always"], // 文件末尾必须有换行符
        "comma-dangle": ["error", "never"], // 禁止尾随逗号
        "arrow-parens": ["error", "always"], // 箭头函数参数始终使用括号
        "key-spacing": [
            "error",
            {
                // 对象字面量键值对的空格规则
                "beforeColon": false, // 冒号前无空格
                "afterColon": true // 冒号后有空格
            }
        ],
        "curly": ["error", "all"], // 所有控制语句必须使用花括号

        // 语法限制规则
        "no-restricted-syntax": [
            "error",
            {
                "selector": "ChainExpression", // 禁止可选链 ?.
                "message": "Optional chaining (?.) is ES2020+, not allowed in ES2017. Use explicit checks instead: obj && obj.prop"
            },
            {
                "selector": "LogicalExpression[operator='??']", // 禁止空值合并运算符 ??
                "message": "Nullish coalescing (??) is ES2020+, not allowed in ES2017. Use || or explicit checks instead"
            }
        ]
    },

    // 忽略文件
    "ignorePatterns": [
        "node_modules",
        "dist",
        "build",
        "coverage",
        "*.config.js",
        "*.config.cjs",
        "*.config.mjs",
        "**/*.spec.ts",
        "**/*.test.ts",
        "*.log",
        "*.swp",
        "*.swo"
    ]
}