江门网站建设公司企业网站文案外包

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

江门网站建设公司,企业网站文案外包,用来制作网页的软件是,凡科 做网站前言 在现代的前端开发中#xff0c;代码规范非常重要。它可以提高团队的协作效率#xff0c;减少代码错误#xff0c;使代码更易于维护。为了实现代码规范化#xff0c;我们可以使用一些工具来辅助我们的开发流程#xff0c;包括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, // 禁止使用 varno-unused-vars: error, // 禁止出现未使用的变量// 最佳实践no-console: error, // 禁止使用 consoleno-debugger: error, // 禁止使用 debuggerno-alert: error, // 禁止使用 alert// 错误处理handle-callback-err: error, // 要求回调函数中有错误处理// Vuevue/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 冲突  然后解决eslint9.11.0 与 prettier3.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 messagecz-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-rulesbody-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我们可以实现代码的静态分析、格式化和风格检查并在团队中推行统一的代码规范。这将帮助我们提高代码质量提高开发效率降低维护成本。