。

Git钩子是在Git操作时触发的脚本#xff0c;可以用于自动化一些任务#xff0c;比如代码格式化、代码检查、测试等。

.husky文件可以指定在Git的不同操作#xff08;如commit、push等#xff…创建husky规范前端项目

.husky文件是一个配置文件用于配置Git钩子。

Git钩子是在Git操作时触发的脚本可以用于自动化一些任务比如代码格式化、代码检查、测试等。

.husky文件可以指定在Git的不同操作如commit、push等时应该运行哪些脚本。

这样每次进行Git操作时就会自动运行指定的脚本从而保证代码质量和开发效率。

Husky使用

在package.json中添加如下命令在scripts中添加

prepare:

在这之后会生成一个husky文件夹3、lint-staged本地暂存代码检查工具

npm

lint:lint-staged4、添加lint-staged.config.js

module.exports

--write],{!(package)*.json,*.code-snippets,.!(browserslist)*rc}:

[prettier

--fix],*.{scss,less,styl,html}:

[stylelint

}8、新建commitlint.config.js文件对提交信息做格式检验的

see:

https://cz-git.qbenben.com/zh/guide

/**

[commitlint/config-conventional],rules:

{//

https://commitlint.js.org/#/reference-rulesbody-leading-blank:

[2,

[2,always,[init,feat,page,completepage,fix,fixbug,docs,style,refactor,perf,test,build,ci,chore,revert,wip,workflow,types,release,],],},prompt:

{messages:

选择关联issue前缀可选:,customFooterPrefixs:

输入自定义issue前缀

custom,allowCustomIssuePrefixs:

0,scopeOverrides:

\src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\,lint:stylelint:

stylelint

\**/*.{vue,less,postcss,css,scss}\

--cache

node_modules/.cache/stylelint/,lint:lint-staged:

lint-staged,prepare:

stylelint-config-recommended-scss

stylelint-config-recommended-vue

postcss

[css,less,postcss,scss,vue,sass,html],files.eol:

}4、配置.stylelintrc.js

https://stylelint.iomodule.exports

{/*

配置stylelint拓展插件stylelint-config-html/vue,

vue

样式格式化stylelint-config-standard-scss,

配置stylelint

scss插件stylelint-config-recommended-vue/scss,

vue

样式格式化stylelint-config-recess-order,

配置stylelint

css属性书写顺序插件,stylelint-config-prettier,

配置stylelint和prettier兼容],overrides:

[//

[**/*.{vue,html}],customSyntax:

null

v-bind不报错no-descending-specificity:

null,

禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器function-url-quotes:

always,

always(必须加上引号)|never(没有引号)string-quotes:

double,

lower(全小写)|upper(全大写)color-hex-case:

lower,

lower(全小写)|upper(全大写)color-hex-length:

long,

short(16进制简写)|long(16进制扩写)rule-empty-line-before:

never,

always(规则之前必须始终有一个空行)|never(规则前绝不能有空行)|always-multi-line(多行规则之前必须始终有一个空行)|never-multi-line(多行规则之前绝不能有空行。

)font-family-no-missing-generic-family-keyword:

null,

禁止在字体族名称列表中缺少通用字体族关键字block-opening-brace-space-before:

always,

always(大括号前必须始终有一个空格)|never(左大括号之前绝不能有空格)|always-single-line(在单行块中的左大括号之前必须始终有一个空格)|never-single-line(在单行块中的左大括号之前绝不能有空格)|always-multi-line(在多行块中左大括号之前必须始终有一个空格)|never-multi-line(多行块中的左大括号之前绝不能有空格)property-no-unknown:

null,

禁止空源码declaration-block-trailing-semicolon:

null,

stringalways(必须始终有一个尾随分号)|never(不得有尾随分号)selector-class-pattern:

null,

强制选择器类名的格式scss/at-import-partial-extension:

null,

解决不能引入scss文件value-no-vendor-prefix:

null,

-webkit-box)selector-pseudo-class-no-unknown:

[global,

https://www.prettier.cnmodule.exports

{//

使用单引号(true单引号false双引号)singleQuote:

true,//

可选值as-needed|consistent|preservequoteProps:

as-needed,//

可选值none|es5|all默认nonetrailingComma:

all,//

在JSX中使用单引号而不是双引号jsxSingleQuote:

true,//

doclock这个选项将新建一行注释并打上format标记。

insertPragma:

false,//

comment而按照markdown文本样式进行折行proseWrap:

preserve,//

空格被认为是不敏感的htmlWhitespaceSensitivity:

css,//

这两个选项可用于格式化以给定字符偏移量分别包括和不包括开始和结束的代码rangeStart:

0,rangeEnd:

Infinity,vueIndentScriptAndStyle:

false,

typescript-eslint/eslint-plugin

-D2、安装

typescript-eslint/parser,ecmaVersion:

2020,sourceType:

[plugin:vue/vue3-recommended,plugin:typescript-eslint/recommended,prettier,plugin:prettier/recommended,],/**

off

(http://eslint.cn/docs/rules)no-var:

error,

(https://typescript-eslint.io/rules)typescript-eslint/no-unused-vars:

error,

禁止定义未使用的变量typescript-eslint/prefer-ts-expect-error:

error,

ts-ignoretypescript-eslint/no-inferrable-types:

off,

可以轻松推断的显式类型可能会增加不必要的冗长typescript-eslint/no-namespace:

off,

模块和命名空间。

typescript-eslint/no-explicit-any:

off,

禁止使用特定类型typescript-eslint/explicit-function-return-type:

off,

不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明typescript-eslint/no-var-requires:

off,

语句typescript-eslint/no-empty-function:

off,

禁止空函数typescript-eslint/no-use-before-define:

off,

禁止在变量定义之前使用它们typescript-eslint/ban-ts-comment:

off,

使用注释或要求在指令后进行描述typescript-eslint/no-non-null-assertion:

off,

不允许使用后缀运算符的非空断言(!)typescript-eslint/explicit-module-boundary-types:

off,

(https://eslint.vuejs.org/rules)vue/no-v-html:

off,

v-htmlvue/script-setup-uses-vars:

error,

setup使用的变量template被标记为未使用此规则仅在启用该no-unused-vars规则时有效。

vue/v-slot-style:

error,

prop的改变vue/custom-event-name-casing:

off,

为自定义事件名称强制使用特定大小写vue/attributes-order:

off,

api使用顺序强制执行属性顺序vue/one-component-per-file:

off,

强制每个组件都应该在自己的文件中vue/html-closing-bracket-newline:

off,

在标签的右括号之前要求或禁止换行vue/max-attributes-per-line:

off,

强制每行的最大属性数vue/multiline-html-element-content-newline:

off,

在多行元素的内容之前和之后需要换行符vue/singleline-html-element-content-newline:

off,

在单行元素的内容之前和之后需要换行符vue/attribute-hyphenation:

off,

对模板中的自定义组件强制执行属性命名样式vue/require-default-prop:

off,

为必填时必须提供默认值vue/multi-word-component-names:

off,