Vite: 集成Lint工具规范代码

概述

  • 在前端开发中,尤其是在大型项目中,代码的规范性和一致性对于项目的可维护性、可读性以及团队协作效率至关重要。为了保障代码质量,前端社区涌现出了许多Lint工具,如ESLint、Prettier、Stylelint等,它们能帮助我们自动化地检查并修复代码中的潜在问题。本文将介绍如何在Vite项目中集成这些Lint工具,以规范代码质量
  • 在真实的工程项目中,尤其是多人协作的场景下,代码规范就变得非常重要了,它可以用来统一团队代码风格,避免不同风格的代码混杂到一起难以阅读,有效提高代码质量,甚至可以将一些语法错误在开发阶段提前规避掉。但仅有规范本身不够,我们需要自动化的工具(即 Lint 工具 )来保证规范的落地,把代码规范检查(包括 自动修复 )这件事情交给机器完成,开发者只需要专注应用逻辑本身

JS/TS 规范工具: ESLint

  • ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误
  • Eslint 一款插件化的 JavaScript 代码静态检查工具,通过解析代码的 AST 来分析代码格式,检查代码的风格和质量问题
  • 现在,Eslint 已经成为一个非常成功的开源项目了,基本上属于前端项目中 Lint 工具的标配, ESLint的使用并不复杂,主要通过配置文件对各种代码格式的规则( rules )进行配置,以指定具体的代码规范
  • 目前开源社区也有一些成熟的规范集可供使用,著名的包括 Airbnb JavaScript 代码规范、Standard JavaScript 规范、Google JavaScript 规范等等,你可以在项目中直接使用这些成熟的规范,也可以自己定制一套团队独有的代码规范,这在一些大型团队当中还是很常见的

1 )初始化

  • 来利用 ESLint 官方的 cli 在现有的脚手架项目中进行初始化操作,首先我们
    需要安装 ESLint: $ pnpm i eslint -D
  • 接着执行 ESLint 的初始化命令,并进行如下的命令行交互: $ npx eslint --init
  • 接着 ESLint 会帮我们自动生成 .eslintrc.js 配置文件。需要注意的是,在上述初始化流程中我们并没有用 npm 安装依赖,需要进行手动安装: $ pnpm i eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest

2 )核心配置解读

2.1 parser - 解析器

  • ESLint 底层默认使用 Espree来进行 AST 解析,这个解析器目前已经基于 Acron 来实现,虽然说 Acron 目前能够解析绝大多数的 ECMAScript 规范的语法,但还是不支持TypeScript ,因此需要引入其他的解析器完成 TS 的解析。社区提供了 @typescript-eslint/parser 这个解决方案,专门为了 TypeScript 的解析而诞生,将 TS 代码转换为 Espree 能够识别的格式(即 Estree 格式),然后在 Eslint 下通过 Espree 进行格式检查, 以此兼容了 TypeScript 语法

2.2 parserOptions - 解析器选项

  • 这个配置可以对上述的解析器进行能力定制,默认情况下 ESLint 支持 ES5 语法,你可以配置这个选项,具体内容如下:
    • ecmaVersion: 这个配置和 Acron 的 ecmaVersion 是兼容的,可以配置 ES + 数字 (如 ES6)或者 ES + 年份 (如 ES2015),也可以直接配置为 latest ,启用最新的 ES 语法
    • sourceType: 默认为 script ,如果使用 ES Module 则应设置为 module
    • ecmaFeatures: 为一个对象,表示想使用的额外语言特性,如开启 jsx

2.3 rules - 具体代码规则

  • rules 配置即代表在 ESLint 中手动调整哪些代码规则,比如 禁止在 if 语句中使用赋值语句 这条规则可以像如下的方式配置:
    // .eslintrc.js
    module.exports = {// 其它配置省略rules: {// key 为规则名,value 配置内容"no-cond-assign": ["error", "always"]}
    }
    
  • 在 rules 对象中, key 一般为 规则名 , value 为具体的配置内容,在上述的例子中我们设置为一个数组,数组第一项为规则的 ID ,第二项为 规则的配置 。
    这里重点说一说规则的 ID,它的语法对所有规则都适用,你可以设置以下的值:
    • off 或 0 : 表示关闭规则。
    • warn 或 1 : 表示开启规则,不过违背规则后只抛出 warning,而不会导致程序退出
    • error 或 2 : 表示开启规则,不过违背规则后抛出 error,程序会退出
  • 具体的规则配置可能会不一样,有的是一个字符串,有的可以配置一个对象,可以参考 ESLint 官方文档
  • 当然,你也能直接将 rules 对象的 value 配置成 ID,如: “no-cond-assign”:
    “error”

2.4 plugins

  • 上面提到过 ESLint 的 parser 基于 Acorn 实现,不能直接解析 TypeScript,需要我们指定 parser 选项为 @typescript-eslint/parser 才能兼容 TS 的解析。同理,ESLint 本身也没有内置 TypeScript 的代码规则,这个时候 ESLint 的插件系统就派上用场了。我们需要通过添加 ESLint 插件来增加一些特定的规则,比如添加 @typescript-eslint/eslintplugin 来拓展一些关于 TS 代码的规则,如下代码所示

    // .eslintrc.js
    module.exports = {// 添加 TS 规则,可省略`eslint-plugin`plugins: ['@typescript-eslint']
    }
    
  • 值得注意的是,添加插件后只是拓展了 ESLint 本身的规则集,但 ESLint 默认并没有开启这些规则的校验!如果要开启或者调整这些规则,你需要在 rules 中进行配置,如:

    // .eslintrc.js
    module.exports = {// 开启一些 TS 规则rules: {'@typescript-eslint/ban-ts-comment': 'error','@typescript-eslint/no-explicit-any': 'warn',}
    }
    

2.5 extends - 继承配置

  • extends 相当于 继承 另外一份 ESLint 配置,可以配置为一个字符串,也可以配置成一个字符串数组。主要分如下 3 种情况:

    • 从 ESLint 本身继承;
    • 从类似 eslint-config-xxx 的 npm 包继承;
    • 从 ESLint 插件继承
      // .eslintrc.js
      module.exports = {"extends": [// 第1种情况"eslint:recommended",// 第2种情况,一般配置的时候可以省略 `eslint-config`"standard"// 第3种情况,可以省略包名中的 `eslint-plugin`// 格式一般为: `plugin:${pluginName}/${configName}`"plugin:react/recommended""plugin:@typescript-eslint/recommended",]
      }
      
  • 有了 extends 的配置,对于之前所说的 ESLint 插件中的繁多配置,我们就不需要手动一一开启了,通过 extends 字段即可自动开启插件中的推荐规则:
    extends: ["plugin:@typescript-eslint/recommended"]

2.6. env 和 globals

  • 这两个配置分别表示 运行环境 和 全局变量 ,在指定的运行环境中会预设一些全局变量,比如
    // .eslint.js
    module.export = {"env": {"browser": "true","node": "true"}
    }
    
  • 指定上述的 env 配置后便会启用浏览器和 Node.js 环境,这两个环境中的一些全局变量 (如 window 、 global 等) 会同时启用
  • 有些全局变量是业务代码引入的第三方库所声明,这里就需要在 globals 配置中声明全局变量了。每个全局变量的配置值有 3 种情况:
    • “writable” 或者 true ,表示变量可重写;
    • “readonly” 或者 false ,表示变量不可重写;
    • “off” ,表示禁用该全局变量
  • 那 jquery 举例,我们可以在配置文件中声明如下:
    // .eslintrc.js
    module.exports = {"globals": {// 不可重写"$": false, "jQuery": false}
    }
    
  • 相信有了上述核心配置部分的讲解,你再回头看看初始化生成的 ESLint 配置文件,你也能很好地理解各个配置项的含义了

2.7 与 Prettier 的结合

  • 虽然 ESLint 本身具备自动格式化代码的功能( eslint --fix ),但术业有专攻,ESLint 的主要优势在于 代码的风格检查并给出提示 ,而在代码格式化这一块 Prettier 做的更加专业,因此我们经常将 ESLint 结合 Prettier 一起使用

  • 首先我们来安装一下 Prettier: $ pnpm i prettier -D

  • 在项目根目录新建 .prettierrc.js 配置文件,填写如下的配置内容:

    // .prettierrc.js
    module.exports = {printWidth: 80, //一行的字符数,如果超过会进行换行,默认为80tabWidth: 2, // 一个 tab 代表几个空格数,默认为 2 个useTabs: false, //是否使用 tab 进行缩进,默认为false,表示用空格进行缩减singleQuote: true, // 字符串是否使用单引号,默认为 false,使用双引号semi: true, // 行尾是否使用分号,默认为truetrailingComma: "none", // 是否使用尾逗号bracketSpacing: true // 对象大括号直接是否有空格,默认为 true,效果:{ a: 1 }
    };
    
  • 接下来我们将 Prettier 集成到现有的 ESLint 工具中,首先安装两个工具包:

    • $ pnpm i eslint-config-prettier eslint-plugin-prettier -D
  • 其中 eslint-config-prettier 用来覆盖 ESLint 本身的规则配置,而 eslint-pluginprettier 则是用于让 Prettier 来接管 eslint --fix 即修复代码的能力。

  • 在 .eslintrc.js 配置文件中接入 prettier 的相关工具链,最终的配置代码如下所示,可以直接粘贴过去

    // .eslintrc.js
    module.exports = {env: {browser: true,es2021: true},extends: ["eslint:recommended","plugin:react/recommended","plugin:@typescript-eslint/recommended",// 1. 接入 prettier 的规则"prettier","plugin:prettier/recommended"
    ],parser: "@typescript-eslint/parser",parserOptions: {ecmaFeatures: {jsx: true},ecmaVersion: "latest",sourceType: "module"},// 2. 加入 prettier 的 eslint 插件plugins: ["react", "@typescript-eslint", "prettier"],rules: {// 3. 注意要加上这一句,开启 prettier 自动修复的功能"prettier/prettier": "error",quotes: ["error", "single"],semi: ["error", "always"],"react/react-in-jsx-scope": "off"}
    
  • 现在回到项目中来见证一下 ESLint + Prettier 结合的威力

  • 在 package.json 中定义一个脚本:

    {"scripts": {// 省略已有 script"lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",}
    }
    
  • 接下来在命令行终端执行: $ pnpm run lint:script

  • 这样我们就完成了 ESLint 的规则检查 以及 Prettier 的自动修复 。

  • 不过每次执行这个命令未免会有些繁琐,我们可以在 VSCode 中安装 ESLint 和 Prettier 这两个插件,并且在, 设置区中开启 Format On Save :

  • 接下来在你按 Ctrl + S 保存代码的时候,Prettier 便会自动帮忙修复代码格式

在 Vite 中接入 ESLint

  • 除了安装编辑器插件,我们也可以通过 Vite 插件的方式在开发阶段进行 ESLint 扫描,以
    命令行的方式展示出代码中的规范问题,并能够直接定位到原文件。
  • 首先我们安装 Vite 中的 ESLint 插件: $ pnpm i vite-plugin-eslint -D
  • 然后在 vite.config.ts 中接入
    // vite.config.ts
    import viteEslint from 'vite-plugin-eslint';// 具体配置
    {plugins: [// 省略其它插件viteEslint(),]
    }
    
  • 现在你可以试着重新启动项目, ESLint 的错误已经能够及时显示到命令行窗口中了
  • 由于这个插件采用另一个进程来运行 ESLint 的扫描工作,因此不会影响 Vite 项目
    的启动速度,这个大家不用担心

样式规范工具: Stylelint

  • 接下来我们进入 Stylelint 的部分,先来看看官方的定义:

  • Stylelint,一个强大的现代化样式 Lint 工具,用来帮助你避免语法错误和统一代码风格

  • Stylelint 主要专注于样式代码的规范检查,内置了 170 多个 CSS 书写规则,支持 CSS
    预处理器(如 Sass、Less),提供插件化机制以供开发者扩展规则,已经被 Google、
    Github 等大型团队投入使用。与 ESLint 类似,在规范检查方面,Stylelint 已经做的足
    够专业,而在代码格式化方面,我们仍然需要结合 Prettier 一起来使用。

  • 首先让我们来安装 Stylelint 以及相应的工具套件:

    • $ pnpm i stylelint stylelint-prettier stylelint-config-standard stylelint-config-standard-scss stylelint-config-recess-order stylelint-config-prettier stylelint-prettier/recommended
      // .stylelintrc.js
      module.exports = {// 注册 stylelint 的 prettier 插件plugins: ['stylelint-prettier'],// 继承一系列规则集合extends: [// standard 规则集合'stylelint-config-standard',// standard 规则集合的 scss 版本'stylelint-config-standard-scss',// 样式属性顺序规则'stylelint-config-recess-order',// 接入 Prettier 规则'stylelint-config-prettier','stylelint-prettier/recommended'],// 配置 rulesrules: {// 开启 Prettier 自动格式化功能'prettier/prettier': true}
      };
      
  • 可以发现 Stylelint 的配置文件和 ESLint 还是非常相似的,常用的 plugins 、 extends
    和 rules 属性在 ESLint 同样存在,并且与 ESLint 中这三个属性的功能也基本相同。

  • 不过,需要强调的是在 Stylelint 中 rules 的配置会和 ESLint 有些区别,对于每个具体的 rule
    会有三种配置方式:

    • null ,表示关闭规则。
    • 一个简单值(如 true,字符串,根据不同规则有所不同),表示开启规则,但并不做过多的定制。
    • 一个数组,包含两个元素,即 [简单值,自定义配置] ,第一个元素通常为一个简单值,第二个元素用来进行更精细化的规则配置
  • 接下来我们将 Stylelint 集成到项目中,回到 package.json 中,增加如下的 scripts 配置:

    {"scripts": {// 整合 lint 命令"lint": "npm run lint:script && npm run lint:style",// stylelint 命令"lint:style": "stylelint --fix \"src/**/*.{css,scss}\""}
    }
    
  • 执行 pnpm run lint:style 即可完成样式代码的规范检查和自动格式化。当然,你也可以
    在 VSCode 中安装 Stylelint 插件,这样能够在开发阶段即时感知到代码格式问题,提
    前进行修复。

  • 当然,我们也可以直接在 Vite 中集成 Stylelint。社区中提供了 Stylelint 的 Vite 插件,
    实现在项目开发阶段提前暴露出样式代码的规范问题。我们来安装一下这个插件:

    • $ pnpm i @amatlash/vite-plugin-stylelint -D
  • 然后在 Vite 配置文件中添加如下的内容:

    import viteStylelint from '@amatlash/vite-plugin-stylelint';// 具体配置
    {plugins: [// 省略其它插件viteStylelint({// 对某些文件排除检查exclude: /windicss|node_modules/}),]
    }
    
  • 接下来,你就可以在命令行界面看到对应的 Stylelint 提示了:

Husky + lint-staged 的 Git 提交工作流集成

  • 提交前的代码 Lint 检查,在上文中我们提到了安装 ESLint 、 Prettier 和 Stylelint 的 VSCode 插件或者 Vite插件,在开发阶段提前规避掉代码格式的问题,但实际上这也只是将问题提前暴露,并不
    能保证规范问题能完全被解决,还是可能导致线上的代码出现不符合规范的情况。那么如
    何来避免这类问题呢?

  • 我们可以在代码提交的时候进行卡点检查,也就是拦截 git commit 命令,进行代码格式
    检查,只有确保通过格式检查才允许正常提交代码。社区中已经有了对应的工具——
    Husky 来完成这件事情,让我们来安装一下这个工具: $ pnpm i husky -D

  • 注意,有很多人推荐在 package.json 中配置 husky 的钩子:

    // package.json
    {"husky": {"pre-commit": "npm run lint"}
    }
    
  • 这种做法在 Husky 4.x 及以下版本没问题,而在7.x 版本之后是无效的!在新
    版 Husky 版本中,我们需要做如下的事情:

  • 初始化 Husky: $ npx husky install,并将 husky install 作为项目启动前脚本,如:

    {"scripts": {// 会在安装 npm 依赖后自动执行"postinstall": "husky install"}
    }
    
  • 添加 Husky 钩子,在终端执行如下命令: $ npx husky add .husky/pre-commit "npm run lint"

  • 接着你将会在项目根目录的 .husky 目录中看到名为 pre-commit 的文件,里面包含
    了 git commit 前要执行的脚本。现在,当你执行 git commit 的时候,会首先执行 npm
    run lint 脚本,通过 Lint 检查后才会正式提交代码记录

  • 不过,刚才我们直接在 Husky 的钩子中执行 npm run lint ,这会产生一个额外的问题:
    Husky 中每次执行 npm run lint 都对仓库中的代码进行全量检查,也就是说,即使某些
    文件并没有改动,也会走一次 Lint 检查,当项目代码越来越多的时候,提交的过程会越
    来越慢,影响开发体验

  • 而 lint-staged 就是用来解决上述全量扫描问题的,可以实现只对存入 暂存区 的文件进
    行 Lint 检查,大大提高了提交代码的效率。首先,让我们安装一下对应的 npm 包:

    • $ pnpm i -D lint-staged
  • 然后在 package.json 中添加如下的配置

    {"lint-staged": {"**/*.{js,jsx,tsx,ts}": ["npm run lint:script","git add ."],"**/*.{scss}": ["npm run lint:style","git add ."]}
    }
    
  • 接下来我们需要在 Husky 中应用 lint-stage ,回到 .husky/pre-commit 脚本中,将原来
    的 npm run lint 换成如下脚本: $ npx --no -- lint-staged

  • 如此一来,我们便实现了提交代码时的 增量 Lint 检查

提交时的 commit 信息规范

  • 除了代码规范检查之后,Git 提交信息的规范也是不容忽视的一个环节,规范的 commit
    信息能够方便团队协作和问题定位
  • 首先我们来安装一下需要的工具库,执行如下的命令: $ pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D
  • 接下来新建 .commitlintrc.js :
    // .commitlintrc.js
    module.exports = {extends: ["@commitlint/config-conventional"]
    };
    
  • 一般我们直接使用 @commitlint/config-conventional 规范集就可以了
  • 它所规定的commit 信息一般由两个部分: type 和 subject 组成,结构如下:
    // type 指提交的类型
    // subject 指提交的摘要信息
    <type>: <subject>
    
  • 常用的 type 值包括如下:
    • feat : 添加新功能
    • fix : 修复 Bug
    • chore : 一些不影响功能的更改
    • docs : 专指文档的修改
    • perf : 性能方面的优化
    • refactor : 代码重构
    • test : 添加一些测试代码等等
  • 接下来我们将 commitlint 的功能集成到 Husky 的钩子当中,在终端执行如下命令即可:
    • $ npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"
  • 可以发现在 .husky 目录下多出了 commit-msg 脚本文件,表示 commitlint 命令已经成
    功接入到 husky 的钩子当中。
  • 现在我们可以尝试对代码进行提交,假如输入一个错误的 commit 信息,commitlint 会自动抛出错误并退出:
  • 至此,我们便完成了 Git 提交信息的卡点扫描和规范检查

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/35569.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用深度远程启动管理器配置BMC DHCP管理地址的方法

目录 1.请确保服务器BMC是DHCP状态&#xff0c;才可以使用深度工具分配地址&#xff1b;若BMC配置过静态地址&#xff0c;请使用静态地址登录&#xff1b; 2.配置好自己笔记本的 ip&#xff08;例如&#xff1a;192.168.78.1&#xff09;&#xff0c;用网线与 ipmi 独立管理口…

Day46

Day46 手写Spring-MVC 解决Controller层的方案 思路&#xff1a;监听器在项目启动时DispatherServlet会将controller层的信息记录下来&#xff0c;当前端发送请求的时候DispatherServlet就会根据信息分发给controller层。 准备工作 准备工作的目的是准备好监听器&#xff0c;而…

AudioLM: 音频生成的革命性模型

AudioLM: 音频生成的革命性模型 AudioLM是一种革命性的音频生成模型&#xff0c;它结合了深度学习和自然语言处理的先进技术&#xff0c;能够生成高质量、逼真的音频内容。本文将探讨AudioLM的基本原理、工作机制、应用场景以及对音频生成领域的影响和未来发展方向。 一、Aud…

AI-智能体基础设施

个性化记忆需要世界模型来协助构建 业界有一个精简的Agent表达公示&#xff0c;即&#xff1a;Agent大模型&#xff08;LLM&#xff09;记忆&#xff08;Memory&#xff09;主动规划&#xff08;Planning&#xff09;工具使用&#xff08;Tool Use&#xff09;。基于该公式&am…

打破界限:Postman中CORS问题的终极解决方案

打破界限&#xff1a;Postman中CORS问题的终极解决方案 在当今的Web开发中&#xff0c;API跨域调用已成为常态。然而&#xff0c;浏览器的同源策略常常限制了这种跨域的自由。跨域资源共享&#xff08;CORS&#xff09;作为解决方案&#xff0c;允许不同源之间的资源访问。但如…

零信任价值获全面认可 新场景下展现无穷潜力

2023年&#xff0c;零信任在全球范围内持续快速发展&#xff0c;已经从新的安全理念发展成为云时代的主流安全架构&#xff0c;进入了全面普及期。 2023年&#xff0c;中国零信任市场同样涨势迅猛&#xff0c;产业生态越来越成熟&#xff0c;应用范围越来越广&#xff0c;应用…

模型微调DPO入门

一、定义 定义数据集格式llamafactory 训练案例入门文档阅读 二、实现 定义 DPO通过直接优化语言模型来实现对其行为的精确控制&#xff0c;而无需使用复杂的强化学习&#xff0c;也可以有效学习到人类偏好&#xff0c;DPO相较于RLHF更容易实现且易于训练&#xff0c;效果更好…

面试题-Redis简介

1.主流应用框架 概念&#xff1a; 穿透查询&#xff1a;数据库中的名词&#xff0c;与逐层查询不同&#xff0c;通过超链接可直接查询想要的结果&#xff0c;更加方便快捷 熔断机制&#xff1a;指软件系统中&#xff0c;由于某些原因使得服务出现了过载现象&#xff0c;为防止…

「2024中国数据要素产业图谱1.0版」重磅发布,景联文科技凭借高质量数据采集服务入选!

近日&#xff0c;景联文科技入选数据猿和上海大数据联盟发布的《2024中国数据要素产业图谱1.0版》数据采集服务板块。 景联文科技是专业数据服务公司&#xff0c;提供从数据采集、清洗、标注的全流程数据解决方案&#xff0c;协助人工智能企业解决整个AI链条中数据采集和数据标…

【面试题】SpringBoot面试题

目录 Spring Boot 的核心注解是哪个&#xff1f;它主要由哪几个注解组成的&#xff1f;如何理解 Spring Boot 中的 Starters&#xff1f;Spring Boot 的核心配置文件有哪几个&#xff1f;它们的区别是什么&#xff1f;Spring Boot、Spring MVC 和 Spring 有什么区别&#xff1f…

Maven高级的多环境配置与应用

多环境配置与应用 这一节中&#xff0c;我们会讲两个内容&#xff0c;分别是多环境开发和跳过测试 5.1 多环境开发 我们平常都是在自己的开发环境进行开发&#xff0c;当开发完成后&#xff0c;需要把开发的功能部署到测试环境供测试人员进行测试使用&#xff0c;等测试人员测…

Redis报错:MISCONF Redis is configured to save RDB snapshots

错误提示内容&#xff1a; 2024-06-25 16:30:49 : Connection: Redis_Server > [runCommand] PING 2024-06-25 16:30:49 : Connection: Redis_Server > Response received : -MISCONF Redis is configured to save RDB snapshots, but it is currently not able to pers…

Qt Quick Effect Maker 工具使用介绍

一、介绍 随着 Qt 版本的不断升级,越来越多的功能被加入 Qt,一些新的工具也随之应运而生,Qt Quick Effect Maker 工具是 Qt 6.5 之后才新添加的工具,之前的名字应该是叫做 Qt shader tool 这个模块。 以下是官方的释义:Qt Quick Effect Maker是一个用于为Qt Quick创建自定…

C语⾔数据类型和变量

C语⾔数据类型和变量 1.数据类型介绍1.1 字符型1.2 整型1.3 浮点型1.4 布尔类型1.5 各种数据类型的长度1.5.1 sizeof操作符1.5.2 数据类型长度1.5.3 sizeof中表达式不计算 2. signed 和 unsigned3. 数据类型的取值范围4. 变量4.1 变量的创建4.2 变量的分类 5. 算术操作符&#…

Vue2+TS el-table简单封装 和 使用

1.封装的组件写法 <template><div style"height: calc( 100% - 33px);width:100%;position:relative"><!-- 权限管理标题显示与否 --><div ref"operationBtnbox" class"operation-Btn-box" v-if"showOperationBtn&qu…

React Hooks 小记(七)_useReducer

useReducer usereducer 相当于 复杂的 useState 当状态更新逻辑较复杂时可以考虑使用 useReducer。useReducer 可以同时更新多个状态&#xff0c;而且能把对状态的修改从组件中独立出来。 相比于 useState&#xff0c;useReducer 可以更好的描述“如何更新状态”。例如&#…

Zookeeper 集群的应用场景

Zookeeper 集群的应用场景 Zookeeper 是一个分布式协调服务,主要用于管理分布式应用中的配置、同步和命名等任务。由于其高可用性、 一致性和可靠性,Zookeeper 被广泛应用于各种分布式系统中。以下是 Zookeeper 集群的一些典型应用场景: 1. 配置管理 Zookeeper 可以用来集…

社区团购小程序开发

在快节奏的现代生活中&#xff0c;人们越来越追求便利与效率。社区团购小程序应运而生&#xff0c;以其独特的优势成为连接社区居民与优质商品的重要桥梁。本文将探讨社区团购小程序的特点、优势以及未来发展趋势&#xff0c;为大家揭示这一新型购物模式的魅力。 社区团购小程序…

LLM与GPT的一些概念

LLM 大模型语言模型(Large Language Model,LLM)技术是近年来人工智能领域的重要突破,凭借其出色的语义理解和生成能力,正在广泛应用于各种自然语言处理场景。 基本原理 LLM 是基于深度学习的语言模型,通过学习大规模文本数据,获得对自然语言的深入理解。这种模型能够准确地预…

MAC 查看公钥私钥

电脑配置过公钥私钥&#xff0c;现在需要查看&#xff1a; 1、 查看本地是否存在SSH密钥 命令&#xff1a;ls -al ~/.ssh 如果在输出的文件列表中发现id_rsa和id_rsa.pub的存在&#xff0c;证明本地已经存在SSH密钥&#xff0c;请执行第3步 2、 生成SSH密钥 命令&#xff1…