如何规范团队代码，小程序ESLint+Prettier+lint-staged+commit+changelog+standard-version自动规范实践

最新推荐文章于 2024-09-26 11:20:11 发布

前端彭于晏Eddie

最新推荐文章于 2024-09-26 11:20:11 发布

阅读量5.5k

点赞数 3

分类专栏：小程序文章标签：代码规范前端小程序 javascript

本文链接：https://blog.csdn.net/weixin_45495667/article/details/110950040

版权

本文介绍了如何在小程序开发中建立代码规范，通过ESLint进行语法检查，Prettier进行代码格式化，lint-staged与husky在提交前检查变动的代码，commitizen辅助规范提交信息，commitlint确保提交信息格式，conventional-changelog自动生成变更日志，standard-version自动化版本管理。

摘要由CSDN通过智能技术生成

文章目录

如何规范团队代码，小程序ESLint+Prettier+lint-staged+commit+changelog+standard-version自动规范实践

如何规范团队代码，小程序ESLint+Prettier+lint-staged+commit+changelog+standard-version自动规范实践

简介以及优势

ESLint

ESLint中文官网

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
相较于Prettier更为自由，并且更为严苛，也可以发现JS当中的错误。

Prettier

Prettier官网

Prettier能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。正因为Prettier Opinionated 的特性，所以我们不需要配置过多的规则，并且它能够支持更多编辑器的插件以及对于html、css等文件的格式化。

husky + lint-staged

husky Github仓库

lint-staged Github仓库

husky让Git钩子变得容易，把 git 钩子的功能加到了 package 的 script 里面，使我们有能力直接调用其他命令而不用把钩子脚本写在项目的 .git/hook 里面, 方便团队间 git 钩子命令的共享.

lint-staged 检查所有被 git add 加入的文件，对这些文件执行你需要的命令。

由于每次在提交代码之前，对整个项目进行eslint处理耗时长且容易对老项目产生致命的bug。为了解决这个问题，我们引入 husky + lint-staged 可以只对我们本次commit修改的代码进行eslint处理，让linting更有意义。这样，您可以确保没有错误进入存储库并强制执行代码样式。

commitizen

commitizen Github仓库

Commitizen 是一个撰写合格 Commit message 的工具，当您使用 Commitizen 进行提交时，系统将提示您在提交时填写所有必填的提交字段。

commitlint

commitlint GitHub仓库

commitlint检查您的提交消息是否符合常规的提交格式。

conventional-changelog

conventional-changelog GitHub仓库

如果你的所有 Commit 都符合 Angular 格式，那么发布新版本时， Change log 就可以用脚本自动生成。

生成的文档包括以下三个部分。

New features

Bug fixes

Breaking changes.

每个部分都会罗列相关的 commit ，并且有指向这些 commit 的链接。当然，生成的文档允许手动修改，所以发布前，你还可以添加其他内容。

standard-version

standard-version GitHub仓库

利用standard-version进行版本控制，可以省去git tag手动打标签以及手动生成changelog的过程。

ESLint引入

安装

NPM

npm install eslint --save-dev

配置使用规则

在root文件夹下创建文件 .eslintrc.js 和 .editorconfig

module.exports = {
   
    env: {
   
        browser: true,
        es2021: true,
        node: true,
    },
    extends: ['eslint:recommended'],
    parserOptions: {
   
        ecmaVersion: 12,
        sourceType: 'module',
    },
    globals: {
   
    	// 小程序的全局变量
        __DEV__: true,
        __WECHAT__: true,
        __ALIPAY__: true,
        __wxConfig: true,
        App: true,
        Page: true,
        Component: true,
        Behavior: true,
        wx: true,
        getApp: true,
        getCurrentPages: true,
    },
    rules: {
   
    	// 这是我的配置，大家可以参考官方团队的配置
        'linebreak-style': ['error', 'unix'], //换行样式
        quotes: ['error', 'single', {
    avoidEscape: true }], //单引号
        semi: ['error', 'always'], //分号
        'no-mixed-spaces-and-tabs': [2, false