前言

上节我们搭建了组件库的基本环境架构，这节我们来对项目的代码规范和git提交规范进行配置。

集成eslint

1.安装

pnpm i eslint eslint-plugin-vue -D -w

2.替换默认解析器

因为EsLint默认使用ESpree解析器进行解析，无法识别一些特定的TypeScript语法，因此使用@typescript-eslint/parser替换默认的解析器。

pnpm i @typescript-eslint/parser -D -w

同时，作为eslint的补充,@typescript-eslint/eslint-plugin还提供了一些额外的TypeScript语法支持。

pnpm i @typescript-eslint/eslint-plugin -D -w

3.创建.eslintrc.yml配置文件

## .eslintrc.yml
env:browser: truees2021: truenode: true
extends:- plugin:vue/vue3-essential- standard-with-typescript- prettier
overrides: []
parser: '@typescript-eslint/parser'
parserOptions:ecmaVersion: latestsourceType: module
plugins:- vue- '@typescript-eslint'# - import- prettier
rules: {eqeqeq: offcurly: errorquotes:- error- double
}

4.创建忽略文件.eslintignore

## .eslintignore
node_modules/
dist/
index.html

集成 prettier

1.安装

pnpm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

2.创建配置文件.prettierrc

## .prettierrc
{"printWidth": 120, // 一行打最大字符数"semi": true, // 行尾添加分号"trailingComma": "all", // 末尾使用逗号"singleQuote": true, // 使用单引号"arrowParens": "always", // 箭头函数只有一个参数时添加括号"bracketSpacing": true // 大括号首位添加空格
}

集成# commitizen

1.安装

pnpm install -D commitizen cz-conventional-changelog @commitlint/config-conventional @commitlint/cli commitlint-config-cz cz-customizable

2.修改package.json

{"script": {..."cz": "git-cz"},"config": {"commitizen": {"path": "./node_modules/cz-conventional-changelog"}}
}

3.测试

className的BEM规范

1.安装

我们结合sass进行使用

pnpm i sass -D -w

2.BEM概述

BEM分别指的是Block、Element和Modifier。其中，Block描述的是一个元素本身，比如table、button；Element指的是元素的一部分，比如table__item、button__inner;Modifier则是描述了元素的外观、状态和行为，比如button–success、input–disabled。

3.创建hooks函数

// useNameSpace.ts
export const defaultNamespace = 'vl';
const statePrefix = 'is-';const _bem = (namespace: string, block: string, blockSuffix: string, element: string, modifiter: string) => {let className = `${namespace}-${block}`;if(blockSuffix) {str += '-' + blockSuffix;}if(element) {str += '__' + block;}if(midifiter) {str += '--' + midifiter;}
}export const useNamespace = (block: string) {const namespace = defaultNamespace;const b = (blockSuffix = '') => {return _bem(namespace, block, blockSuffix, '', '')}const e = (element = '') => {return _bem(namespace, '', '', element, '')}const m = (modifiter = '') => {return _bem(namespace, '', '', '', modifiter);}const bem = (namespace, block, blockSuffix = '', element= '', modifiter = '') => {return _bem(namespace, block, blockSuffix, element, modifiter);}return {namespace,b,e,m,bem}
}

4.使用hooks函数

// button.vue
<templete><button :class="nc.b()">按钮</button>
</templete><script setup lang="ts">
import { useNamespace } from './useNamespace.ts'const nc = useNamespace('button');
</script>

使用效果:

5.封装scss函数

// config.scss
$namespace: 'vl' !default;
$common-separator: '-' !default;
$element-separator: '__' !default;
$modifiter-separator: '--' !default;
$state-prefix: 'is-' !default;

// mixins.scss
@use 'config.scss' as *;
@use 'function.scss' as *;@mixin b($block) {$B: $namespace + '-' + $block !defalut;#{$B} {@content;}
}@mixin e($element) {$E: $element !default;$selector: &;$currentSeletor: '';@each $item in $element {$currentSelector: #{$currentSeletor + '.' + $B + $element-separator + $unit + ','};}// 如果父级选择器包含任意一种特殊规则，将样式放置在该父级选择器内@if hitAllSpecialNestRule($selector) {@at-root {#{$selector} {#{$currentSelector} {@content;}}}} @else {@at-root {#{$currentSelector} {@content;}}}
}@mixin m($modifier) {$selector: &;$currentSelector: '';@each $unit in $modifier {$currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ','};}@at-root {#{$currentSelector} {@content;}}
}@mixin when($state) {@at-root {&.#{$state-prefix + $state} {@content;}}
}

// 将选择器转换为字符
@function selectorToString($selector) {$selector: inspect($selector);$selector: str-slice($selector, 2, -2);@return $selector;
}
// 判断父级选择器是否包含'--'
@function containsModifier($selector) {$selector: selectorToString($selector);@if str-index($selector, config.$modifier-separator) {// str-index 返回字符串的第一个索引@return true;} @else {@return false;}
}
// 判断父级选择器是否包含'.is-'
@function containWhenFlag($selector) {$selector: selectorToString($selector);@if str-index($selector, '.' + config.$state-prefix) {@return true;} @else {@return false;}
}
// 判断父级是否包含 ':' （用于判断伪类和伪元素）
@function containPseudoClass($selector) {$selector: selectorToString($selector);@if str-index($selector, ':') {@return true;} @else {@return false;}
}
// 判断父级选择器，是否包含`--` `.is-`  `：`这三种字符
@function hitAllSpecialNestRule($selector) {@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}

6.使用scss函数

// button.scss
@use 'mixins.scss' as *;@include b(button) {display: inline-flex;justify-content: center;align-items: center;background: #fff;line-height: 1;font-size: 14px;color: #000;border: 1px solid #000;border-radius: 3px;
}

使用效果:

总结

通过对代码规范的配置，极大地提升了我们开发的效率和体验。正所谓，工欲善其事必先利其器。对于一个团队，尤其是一个刚组建的团队来说，对代码格式的约束是尤为重要的，因为大家在组成一个团队之前，代码风格和编码习惯都各不相同，如果不进行相应的约束，将会造成维护困难、代码难以复用、代码维护困难等问题。而如果事先对这些地方都进行了约束，就能在很大程度上避免这些问题。