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

前言  

        在现代的前端开发中,代码规范非常重要。它可以提高团队的协作效率,减少代码错误,使代码更易于维护。为了实现代码规范化,我们可以使用一些工具来辅助我们的开发流程,包括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.mzph.cn/web/56829.shtml

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

相关文章

word中的内容旋转90度

在vsto、Aspose.Words 中&#xff0c;默认没有直接的 API 可以让表格整体旋转 90 度。然而&#xff0c;我们可以通过一些方式来实现类似的效果&#xff0c;具体思路如下&#xff1a; 将表格插入到一个形状&#xff08;Shape&#xff09;或文本框中&#xff0c;然后旋转该形状。…

DVD光盘解密工具 Xreveal v2.7.1 官方版

下载地址 【1】https://pan.quark.cn/s/a95d5fa38f48 【2】https://drive.uc.cn/s/1e81ba7ee01e4?public1 Xreveal是一款功能相当贴心给力的光碟工具&#xff0c;其功能可以帮助用户检测以及删除DVD、CD保护。它完全不含有任何的解密密钥以及BD转换表&#xff0c;它是基于官…

【Windows】电脑端口明明没有进程占用但显示端口被占用(动态端口)

TOC 一、问题 重启电脑后&#xff0c;启用某个服务显示1089端口被占用。 查看是哪个进程占用了&#xff1a; netstat -aon | findstr "1089"没有输出&#xff0c;但是换其他端口&#xff0c;是可以看到相关进程的&#xff1a; 现在最简单的方式是给我的服务指定另…

阿里云项目启动OOM问题解决

问题描述 随着项目业务的增长&#xff0c;系统启动时内存紧张&#xff0c;每次第一次启动的时候就会出现oom第二次或者第n的时候&#xff0c;就启动成功了。 带着这个疑问&#xff0c;我就在阿里云上提交了工单&#xff0c;咨询为什么第一次提交失败但是后面却能提交成功尼&a…

HarmonyOS 组件样式@Style 、 @Extend、自定义扩展(AttributeModifier、AttributeUpdater)

1. HarmonyOS Style 、 Extend、自定义扩展&#xff08;AttributeModifier、AttributeUpdater&#xff09; Styles装饰器&#xff1a;定义组件重用样式   ;Extend装饰器&#xff1a;定义扩展组件样式   自定义扩展&#xff1a;AttributeModifier、AttributeUpdater 1.1. 区…

SpringBoot 下的Excel文件损坏与内容乱码问题

序言 随着打包部署的方式的改变&#xff0c;原本正常运行的代码可能带来一些新的问题&#xff0c;比如我们现在使用SpringBoot 的方式生成Jar包直接运行&#xff0c;就会对我们再在Resource下的Excel文件产生影响&#xff0c;导入与预期不符的情况发生cuiyaonan2000163.com 比…

Anchor DETR论文笔记

原文链接 [2109.07107] Anchor DETR: Query Design for Transformer-Based Object Detection (arxiv.org)https://arxiv.org/abs/2109.07107 原文笔记 What 提出了一种新的基于锚点的查询设计&#xff0c;即将锚点编码为对象查询。 Why 对象检测任务是预测图像中每个对象…

el-table相关的功能实现

1. 表格嵌套表格时&#xff0c;隐藏父表格的全选框 场景&#xff1a;当table表格设置复选&#xff08;多选&#xff09;功能时&#xff0c;如何隐藏表头的复选框&#xff0c;不让用户一键多选。 <el-table :header-cell-class-name"cellClass">// 表头复选框禁…

机器视觉-相机、镜头、光源(总结)

目录 1、机器视觉光源概述 2、光源的作用 3、光谱 4、工业场景常见光源 4.1、白炽灯 4.2、卤素灯 4.3、 荧光灯 4.4、LED灯 4.5、激光灯 5、光源的基本性能 5.1、光通量 5.2、光效率 5.3、发光强度 5.4、光照度 5.5、均匀性 5.6、色温 5.7、显色性 6、基本光学…

【Linux | 网络I/O模型】五种网络I/O模型详解

1、数据传输过程 在 Linux 系统中&#xff0c;数据传输是通过 I/O 操作来实现的。I/O 操作是指数据从应用程序到内核&#xff0c;再到硬件设备&#xff08;如磁盘、网络接口&#xff09;的过程。 操作系统为了保护自己&#xff0c;设计了用户态、内核态两个状态。应用程序一般工…

基于云平台的智能家居管理系统设计与通信协议分析

案例 阅读以下关于 Web 系统架构设计的教述&#xff0c;在答题纸上回答问题1至问题3。 【说明】 某公司拟开发一个智能家居管理系统&#xff0c;该系统的主要功能需求如下: 1)用户可使用该系统客户端实现对家居设备的控制&#xff0c;且家居设备可向客户端反馈实时状态&#x…

Redis 线程控制 总结

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 线程控制 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 线程控制 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis &a…

JavaScript part2

一.前言 前面我们讲了一下js的基础语法&#xff0c;但是这些还是远远不够的&#xff0c;我们要想操作标签&#xff0c;实现一个动态且好看的页面&#xff0c;就得学会BOM和DOM&#xff0c;这些都是浏览器和页面的&#xff0c;这样我们才能实现一个好看的页面 二.BOM对象 BOM…

Radar Fields: Frequency-Space Neural Scene Representations for FMCW Radar 笔记

Code 主要思想 文章提出了一种新的神经场表示方法——Radar Fields&#xff0c;用于从FMCW&#xff08;调频连续波&#xff09;雷达数据中恢复场景几何信息。与以往的依赖于光学成像&#xff08;如RGB相机和LiDAR&#xff09;的神经场方法不同&#xff0c;该研究利用了雷达的…

高级网络互联技术:AS3001与AS3000的路由交换方案

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

基于SSM的智能养生平台管理系统源码带本地搭建教程

技术栈与架构 技术框架&#xff1a;采用SSM&#xff08;Spring Spring MVC MyBatis&#xff09;作为后端开发框架&#xff0c;结合前端技术栈layui、JSP、Bootstrap与jQuery&#xff0c;以及数据库MySQL 5.7&#xff0c;共同构建项目。 运行环境&#xff1a;项目在JDK 8环境…

HarmonyOS 5.0应用开发——应用打包HAP、HAR、HSP

【高心星出品】 目录 应用打包HAP、HAR、HSPModule类型HAPHAR创建HAR建立依赖HAR共享内容 HSP创建HSP建立依赖同上HSP共享内容同上 HAR VS HSP 应用打包HAP、HAR、HSP 一个应用通常会包含多种功能&#xff0c;将不同的功能特性按模块来划分和管理是一种良好的设计方式。在开发…

【mysql】4-2. MySQL存储结构

MySQL存储结构 1 什么是表空间⽂件&#xff1f; 解答问题 表空间⽂件是⽤来存储表中数据的⽂件&#xff0c;表空间⽂件的⼤⼩由存储的数据多少决定&#xff0c;不同的表空间⽂件存储数据的种类也有所不同&#xff0c;在MySQL中表空间分为五类&#xff0c;包括&#xff1a;系统…

Python | Leetcode Python题解之第514题自由之路

题目&#xff1a; 题解&#xff1a; Test "godding" target "d"i 0left i lc 0 right i rc 0while Test[left] ! target:left - 1lc 1if left -1:left len(Test) - 1while Test[right] ! target:right 1rc 1if right len(Test):right 0prin…

vue3报错:找不到模块“element-plus”或其相应的类型说明

1.问题复现 2.首先去检查一下package.json中是否安装了element-plus 3.存在&#xff0c;就是另一个问题&#xff0c;模块没有被导出来 a.此时需要建立一个.d.ts文件&#xff08;在package.json同级目录下&#xff09; 4.写入代码保存&#xff0c;即可解决报错问题 declare mo…