当前位置： 首页 > article >正文

基于vite和vue3、 eslint、prettier、stylelint、husky规范

article 2024/10/28 6:25:37

前言  

        在现代的前端开发中，代码规范非常重要。它可以提高团队的协作效率，减少代码错误，使代码更易于维护。为了实现代码规范化，我们可以使用一些工具来辅助我们的开发流程，包括eslint、prettier、stylelint、husky，如果没有这些工具去辅助、约束我们团队开发，那么团队内，百花齐放，各写各的，各用各的规范格式、那么每次提交代码的时候，由于每个人的规范格式不一样，那么不同人提交的代码，在对比的时候，就会出现，不必要的改动显示，不利于代码检视，代码维护、代码统一规范等，所以需要上诉工具帮助我们代码开发,下面逐一介绍。

Eslint

        ESLint是一个非常流行的JavaScript代码静态分析工具，它可以帮助检测和修复代码中的错误和不规范的写法。它提供了丰富的规则配置，可以根据项目的需要进行定制，如果需要详细的教程可点击Eslint跳转官网查看。

eslint在项目中的配置使用步骤

安装eslint

npm init @eslint/config

 安装完毕之后，会在项目根目录看到 eslint.config.js 配置文件，其内容是

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";

export default [
  {files: ["**/*.{js,mjs,cjs,vue}"]}, // 校验文件类型，如果明确我们的项目中没有 mjs 和 cjs 文件,可以删除掉这两个后缀
  {languageOptions: { globals: globals.browser }},  // 全局变量
  pluginJs.configs.recommended, // eslint-plugin-js 的推荐配置
  ...pluginVue.configs["flat/essential"], // 表示使用Vue.js的扁平化基本配置
]

我们可以像下面一样添加一些自定义的规则，来让我们的项目更加规范

import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";

export default [
  {files: ["**/*.{js,mjs,cjs,vue}"]}, // 校验文件类型，如果明确我们的项目中没有 mjs 和 cjs 文件,可以删除掉这两个后缀
  {languageOptions: { globals: globals.browser }},  // 全局变量
  pluginJs.configs.recommended, // eslint-plugin-js 的推荐配置, 具体有啥推荐，可以查看官方文档 https://zh-hans.eslint.org/docs/latest/rules/
  ...pluginVue.configs["flat/essential"], // 表示使用Vue.js的扁平化基本配置
  /** 自定义规则 */
  {
    rules: {
      // 代码风格
      "indent": ["error", 2], // 缩进2个空格
      "quotes": ["error", "single"],  // 字符串使用单引号
      "semi": ["error", "always"],  // 语句结尾使用分号
      "space-before-function-paren": ["error", "never"],  // 函数定义时括号前面不加空格

      // 变量声明
      "no-var": "error",  // 禁止使用 var
      "no-unused-vars": "error",  // 禁止出现未使用的变量

      // 最佳实践
      "no-console": "error",  // 禁止使用 console
      "no-debugger": "error", // 禁止使用 debugger
      "no-alert": "error",    // 禁止使用 alert

      // 错误处理
      "handle-callback-err": "error", // 要求回调函数中有错误处理

      // Vue
      "vue/html-indent": ["error", 2],  // vue文件缩进2个空格
    }
  }
];

 有了这些规则，自然就得用起来，我们可以使用下面的命令

npx eslint . // 校验当前目录下的所有文件
npm eslint file.js // 校验 file.js 文件

如何让eslint 规则，在我们编写代码的时候就校验，而不是在控制台输入命令后才校验呢 

那就得在vscode 插件市场中找到 eslint 插件然后安装

安装完我们就打开vscode设置，启用eslint即可

如果我们的代码不符合校验规则，就会出现红线提示了像下面这样

 接下来就是，设置如何在保存的时候，自动正确格式化我们的代码了，那就需要用到下面介绍的工具prettier了

配置 eslint 忽略

只需要在配置文件里面进行类似下面相应的配置即可，这是现在最新版的eslint  9.11.0

Prettier

Prettier是一个代码格式化工具，它可以自动调整代码的缩进、换行、引号等格式，使代码风格保持一致。与ESLint不同，Prettier主要关注代码的格式问题，而不是语法或逻辑错误。

安装prettier

npm install --save-dev --save-exact prettier

创建一个配置文件.prettier及忽略文件 .prettierignore

接下来是配置 prettier 可点击这里前往官网查看详细配置，下面的我一些配置

// 注意实际上,文件中不能有注释代码，记得去除
{
  "experimentalTernaries": true,  // 使用实验性的三元表达式
  "singleQuote": true,  // 使用单引号
  "semi": true,  // 使用分号
  "trailingComma": "none",  // 不使用尾随逗号
  "arrowParens": "avoid",  // 箭头函数参数只有一个时不使用括号
  "printWidth": 80,  // 每行最大字符数
  "tabWidth": 2,  // 缩进字符数
  "useTabs": false,  // 使用空格缩进
  "bracketSpacing": true,  // 对象字面量的大括号前后使用空格
  "jsxBracketSameLine": false,  // 在jsx中，将>多行JSX元素的放在另起一行
  "vueIndentScriptAndStyle": true,  // 在Vue文件中，缩进<template>、<script>和<style>标签内的代码
  "endOfLine": "auto",  // 自动检测换行符
  "quoteProps": "as-needed",  // 对象属性仅在必要时使用引号
  "bracketSameLine": false,  // 将多行HTML (HTML、JSX、Vue、Angular)元素的>单独放在下一行(不适用于自闭元素)
  "vueIndentScriptAndStyle": false,  // 在Vue文件中，缩进<script>和<style>标签内的代码
}

1、接下来在vscode 的设置里面 找到代码格式化设置，设置为使用 prettier格式化代码

2、然后再找到 保存自动格式化代码设置

3、安装vscode 扩展 eslint 与 prettier

如果发现做了上述操作之后，保存代码还是没有自动格式化代码，那就把vscode的 eslint、prettier 扩展插件 卸载了重新安装，然后重启vscode，就可以解决了，点击保存后，发现还是有eslint 校验出来的红线，我理解这就是eslint 与 prettier 的冲突规则

解决 eslint 与 prettier 冲突 

然后解决eslint（9.11.0） 与 prettier（3.3.3）冲突的常用方法就是使用 下面两个包

  • eslint-config-prettier 会关闭ESLint中有关代码格式化的配置。
  • eslint-plugin-prettier 把Prettier配置成ESLint的一个插件，让其当做一个linter规则来运行

 作为开发依赖安装

npm i eslint-config-prettier eslint-plugin-prettier  -D

 然后在eslint.config.js 增加下面的配置即可

extends: ['plugin:prettier/recommended'],

在这个地方增加配置

Stylelint

Stylelint是一个专门用于检测CSS代码规范的工具。它可以检查CSS文件中的语法错误、命名规范、属性顺序等问题。Stylelint也提供了大量的规则配置，可以根据项目需要进行定制。

安装 Stylelint

// 如果是 scss/sass 则后一个插件的后缀对应改一下接口 例如 stylelint-config-standard-scss
npm install --save-dev stylelint stylelint-config-standard-less

我是使用less写样式的，所以安装上述依赖即可，如果是其他的预处理器，则安装对应的即可，安装完之后，就需要到vscode,安装对应的插件了

安装 vscode 插件 

Git 规范流程

Husky是一个git钩子工具，它可以在代码提交前或提交后执行一些自定义的脚本。我们可以使用Husky来集成各种代码规范检查工具，例如在提交代码前自动运行ESLint、Prettier和Stylelint，以确保提交的代码符合规范、校验提交信息是否符合规范等

需要安装的依赖如下

husky操作git钩子的工具
lint-staged在提交前进行eslint校验，并使用prettier格式化暂存区的代码
@commitlint/cli校验提交信息
@@commitlint/config-conventionalAngular 的提交规范
commitizen生成标准化的commit message
cz-git轻量级、高度自定义。输出标准格式的commitize 适配器

下面逐一安装使用

安装husky 

npm install husky -D

然后再package.json 中添加如下配置

"prepare": "husky install"

npm run prepare 一下 就会在项目根目录生成一个.husky文件夹

安装 lint-staged

npm install lint-staged -D

然后在根目录创建一个lint-staged.config.js 配置如下

export default {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
    'prettier --write--parser json'
  ],
  'package.json': ['prettier --write'],
  '*.vue': ['eslint --fix', 'prettier --write', 'stylelint --fix'],
  '*.{scss,less,styl,html}': ['stylelint --fix', 'prettier --write'],
  '*.md': ['prettier --write']
};

安装 commitlint 校验提交信息

npm i @commitlint/cli @commitlint/config-conventional -D

 安装commitizen、cz-git

npm install commitizen cz-git -D

 然后在 package.json中添加如下配置

"config": {
  "commitizen": {
    "path": "node_modules/cz-git"
  }
}

 然后在根目录创建一个  commitlint.config.js 文件配置如下

// @see: https://cz-git.qbenben.com/zh/guide
/** @type {import('cz-git').UserConfig} */

module.exports = {
	ignores: [commit => commit === "init"],
	extends: ["@commitlint/config-conventional"],
	rules: {
		// @see: https://commitlint.js.org/#/reference-rules
		"body-leading-blank": [2, "always"],
		"footer-leading-blank": [1, "always"],
		"header-max-length": [2, "always", 108],
		"subject-empty": [2, "never"],
		"type-empty": [2, "never"],
		"subject-case": [0],
		"type-enum": [
			2,
			"always",
			[
				"feat",
				"fix",
				"docs",
				"style",
				"refactor",
				"perf",
				"test",
				"build",
				"ci",
				"chore",
				"revert",
				"wip",
				"workflow",
				"types",
				"release"
			]
		]
	},
	prompt: {
		messages: {
			type: "选择你要提交的类型 :",
			scope: "选择一个提交范围（可选）:",
			customScope: "请输入自定义的提交范围 :",
			subject: "填写简短精炼的变更描述 :\n",
			body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
			breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
			footerPrefixsSelect: "选择关联issue前缀（可选）:",
			customFooterPrefixs: "输入自定义issue前缀 :",
			footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
			confirmCommit: "是否提交或修改commit ?"
		},
		types: [
			{ value: "feat: 特性", name: "特性:   🚀  新增功能", emoji: "🚀" },
			{ value: "fix: 修复", name: "修复:   🧩  修复缺陷", emoji: "🧩" },
			{ value: "docs: 文档", name: "文档:   📚  文档变更", emoji: "📚" },
			{ value: "style: 格式", name: "格式:   🎨  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: "🎨" },
			{ value: "refactor: 重构", name: "重构:   ♻️  代码重构（不包括 bug 修复、功能新增）", emoji: "♻️" },
			{ value: "perf: 性能", name: "性能:   ⚡️  性能优化", emoji: "⚡️" },
			{ value: "test: 测试", name: "测试:   ✅  添加疏漏测试或已有测试改动", emoji: "✅" },
			{ value: "chore: 构建", name: "构建:   📦️  构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）", emoji: "📦️" },
			{ value: "ci: 集成", name: "集成:   🎡  修改 CI 配置、脚本", emoji: "🎡" },
			{ value: "revert: 回退", name: "回退:   ⏪️  回滚 commit", emoji: "⏪️" },
			{ value: "build: 打包", name: "打包:   🔨  项目打包发布", emoji: "🔨" }
		],
		useEmoji: true,
		themeColorCode: "",
		scopes: [],
		allowCustomScopes: true,
		allowEmptyScopes: true,
		customScopesAlign: "bottom",
		customScopesAlias: "custom",
		emptyScopesAlias: "empty",
		upperCaseSubject: false,
		allowBreakingChanges: ["feat", "fix"],
		breaklineNumber: 100,
		breaklineChar: "|",
		skipQuestions: [],
		issuePrefixs: [{ value: "closed", name: "closed:   ISSUES has been processed" }],
		customIssuePrefixsAlign: "top",
		emptyIssuePrefixsAlias: "skip",
		customIssuePrefixsAlias: "custom",
		allowCustomIssuePrefixs: true,
		allowEmptyIssuePrefixs: true,
		confirmColorize: true,
		maxHeaderLength: Infinity,
		maxSubjectLength: Infinity,
		minSubjectLength: 0,
		scopeOverrides: undefined,
		defaultBody: "",
		defaultIssues: "",
		defaultScope: "",
		defaultSubject: ""
	}
};

 再然后再package.json 的script中添加如下命令

"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
		"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
		"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
		"lint:lint-staged": "lint-staged",
		"prepare": "husky install",
		"release": "standard-version",
		"commit": "git status && git add -A && git-cz"

最后我们就可以通过 运行 npm run commit 进行代码提交了，就会出现下面的场景，然后选择对一个的特性即可 

​​​​​​​

 

然后假如 git commit -m "xx"则汇报下面的错误，无法完成提交，这样就可以达到，提交信息统一规范的目的，但是假如是通过vscode提交的还是校验不到，目前找不到解决办法 

 

总结

        综上所述，通过使用ESLint、Prettier、Stylelint和Husky，我们可以实现代码的静态分析、格式化和风格检查，并在团队中推行统一的代码规范。这将帮助我们提高代码质量，提高开发效率，降低维护成本。


http://www.kler.cn/news/368329.html

相关文章：

  • Spring Boot：植物健康监测的智能先锋
  • 多eSIM配置文件(MEP)
  • JCSA-Journal of Consumer Affairs
  • OpenFeign返回参数统一处理
  • 手机柔性屏全贴合视觉应用
  • 基于SSM轻型卡车零部件销售系统的设计
  • Python实现贝叶斯优化器(Bayes_opt)优化简单循环神经网络分类模型(SimpleRNN分类算法)项目实战
  • count(1)、count(*)、count(主键)、count(字段)区别
  • openlayers 封装加载本地geojson数据 - vue3
  • git stash和git stash pop
  • Linux之nginx离线安装
  • 图文详解ChatGPT-o1完成论文写作的全流程
  • android openGL ES详解——缓冲区VBO/VAO/EBO/FBO/离屏渲染
  • 使用Node.js和Express构建RESTful API
  • 机器学习介绍
  • QT 信号重载时的处理方法
  • jmeter自定义函数
  • 浅谈网络 | 通信协议
  • Leetcode刷题笔记13
  • 16天自制CppServer-day05
  • apply,call,bind手写
  • 关于Docker的docker engine stopped问题解决
  • Lesson11---stack
  • fileinclude
  • 【计算机网络 - 基础问题】每日 3 题（五十五）
  • Discuz 论坛开发一套传奇发布站与传奇开服表