一、nextjs如何使项目工程化(c-shopping电商开源)

欢迎来到本系列文章,这些内容都是从我的开源项目 C-Shopping 衍生而来的。在这个系列中,我们将深入探讨 Next.js 和其他技术的各个方面,分享我在开发 C-Shopping 时积累的见解和最佳实践。如果你发现这些文章有帮助,请考虑在 GitHub 上为项目点亮一颗星星。你的支持对我来说意义重大,也会激励我进行更多的开发!

项目在线演示地址:

项目传送门:github.com/huanghanzhi...

本篇文章围绕C-Shopping 电商项目的代码实战,研究如何整合 ESLint、Prettier、Husky、Lint-staged 和 Commitlint 等工程化利器,提高代码质量和开发效率。


ESLint ------ 代码质量的守护神(工具层)

什么是 ESLint?

ESLint 是一款强大的静态代码分析工具,有助于发现和修复代码中的问题,并确保整个团队遵循一致的代码规范。

如何整合 ESLint 到你的 C-Shopping 项目?

nextjs 已经提供了一个开箱即用的集成ESLint体验。将next lint作为脚本添加到package.json中

提提供了两种使用模式: Strict:严格模式(本项目中使用); Base:基础模式。

在nextjs项目中创建.eslintrc.json

  • 安装 ESLint 及相关依赖 npm install --save-dev eslint eslint-config-next

  • 配置 .eslintrc 文件

    json 复制代码
    {
      "extends": "next/core-web-vitals"
    }
  • ESLint 检查 npm run lint

如果你的编辑器是vscode,可以配合ESLint插件一起使用


Prettier ------ 代码格式化的魔法师(工具层)

什么是 Prettier?

Prettier 是一款自动化代码格式化工具,可以确保整个 C-Shopping 项目的代码风格保持一致,让你的代码更美观。

与 ESLint 的完美协同

  • 安装 npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev

  • 更新.eslintrc.js文件 { "extends": [ "next/core-web-vitals", "plugin:prettier/recommended", "prettier" // Add "prettier" last. This will turn off eslint rules conflicting with prettier. This is not what will format our code. ] }

  • 添加 NPM 脚本并使用 "scripts": { "format": "prettier --write './**/*.+(js|ts|jsx|tsx)'" },

    arduino 复制代码
    npm run format

如果你的编辑器是vscode,可以配合ESLint插件和prettier插件一起使用

vscode编辑器,如果想保存执行eslint,prettier

在根目录新建.vscode文件夹,新建settings.json文件

json 复制代码
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

在vscode,安装eslintprettier两插件,保存项目代码就会执行eslintprettier配置

个性化 Prettier 配置

我们将详细讨论如何根据 C-Shopping 项目的需求调整 Prettier 的配置,让格式化符合你团队的规范。


Husky ------ Git Hooks 的得力助手(流程层)

什么是 Husky?

husky是一个git hook工具,用于你在提交代码的时候进行自定义的操作。

在 C-Shopping 项目中使用 Husky

在 C-Shopping 项目中集成 Husky,让其在关键的 Git Hooks 上执行我们指定的任务,确保代码提交符合标准。

  • 在git commit 之前执行自定义命令,检查代码 npm install husky --save-dev npm pkg set scripts.prepare="husky install" npm run prepare

    sql 复制代码
    npx husky add .husky/pre-commit "npm run lint"
    npx husky add .husky/pre-commit "npm run format"
    npx husky add .husky/pre-commit "git add ."
  • commit lint 代码提交时,限制代码提交规范 限制代码提交规范github.com/conventiona... 安装

    perl 复制代码
    # Install commitlint cli and conventional config
    npm install --save-dev @commitlint/{config-conventional,cli}
    # For Windows:
    npm install --save-dev @commitlint/config-conventional @commitlint/cli
    
    # Configure commitlint to use conventional config
    echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

    Add hook

    sql 复制代码
    npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

    如果提交不安装规范来会报错


Lint-staged ------ 精准 Linting,高效开发(流程层)

什么是 Lint-staged?

lint-staged 是一个工具,可以在 Git 暂存区的文件上运行指定的 lint 工具,以便于仅在需要时执行 lint 检查。它通常与 Husky 配合使用,以在提交代码前运行 lint-staged。使用 lint-staged 可以大大提高 lint 检查的效率,因为只需要针对本次提交的文件执行 lint 检查,而不是所有的文件。

在 C-Shopping 项目中应用 Lint-staged

在根目录新建.lintstagedrc.js

javascript 复制代码
module.exports = {
  // Lint then format TypeScript and JavaScript files
  '/**/*.(ts|tsx|js)': filenames => [
    `eslint --fix ${filenames.join(' ')}`,
    `prettier --write ${filenames.join(' ')}`,
  ],

  // Format MarkDown and JSON
  '/**/*.(md|json)': filenames => `prettier --write ${filenames.join(' ')}`,
}

修改pre-commit文件

bash 复制代码
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# npm run lint
# npm run format
npx lint-staged

git add .

结语

通过这一系列的实战指南,你将全面掌握如何运用 ESLint、Prettier、Husky、Lint-staged 和 Commitlint 等工程化工具,打造一个更出色的项目!

最后

希望你在本文中找到了对你的项目实用的见解。如果你对 C-Shoppinggithub.com/your-userna... 及其相关技术感兴趣,欢迎在 GitHub 上查看项目。如果你喜欢这些内容并期望看到更多类似的文章,请别忘了给仓库点亮一颗星星。

相关推荐
ajassi200030 分钟前
开源 C# .net mvc 开发(八)IIS Express轻量化Web服务器的配置和使用
linux·开源·c#·mvc·.net
HelloGitHub42 分钟前
从被喷“假开源”到登顶 GitHub 热榜,这个开源项目上演王者归来!
开源·github
wei_shuo1 小时前
百度开源文心 4.5 系列开源大模型 GitCode 本地化部署,硅基流动:文心 vs. DeepSeek vs. Qwen 3.0 深度测评
百度·开源·文心大模型·gitcode
AI生存日记10 小时前
百度文心大模型 4.5 系列全面开源 英特尔同步支持端侧部署
人工智能·百度·开源·open ai大模型
步、步、为营11 小时前
.net开源库SignalR
开源·.net
国服第二切图仔14 小时前
文心开源大模型ERNIE-4.5-0.3B-Paddle私有化部署保姆级教程及技术架构探索
百度·架构·开源·文心大模型·paddle·gitcode
钱彬 (Qian Bin)14 小时前
一文掌握Qt Quick数字图像处理项目开发(基于Qt 6.9 C++和QML,代码开源)
c++·开源·qml·qt quick·qt6.9·数字图像处理项目·美观界面
步、步、为营14 小时前
.net开源物联网项目IoTSharp
物联网·开源·.net
斯~内克15 小时前
Centrifugo 深度解析:构建高性能实时应用的开源引擎
前端·开源
说私域18 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源