前言
上节我们搭建了组件库的基本环境架构，这节我们来对项目的代码规范和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: true
es2021: true
node: true
extends:
- plugin:vue/vue3-essential
- standard-with-typescript
- prettier
overrides: []
parser: '@typescript-eslint/parser'
parserOptions:
ecmaVersion: latest
sourceType: module
plugins:
- vue
- '@typescript-eslint'
# - import
- prettier
rules: {
eqeqeq: off
curly: error
quotes:
- 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;
}
使用效果:
总结
通过对代码规范的配置，极大地提升了我们开发的效率和体验。正所谓，工欲善其事必先利其器。对于一个团队，尤其是一个刚组建的团队来说，对代码格式的约束是尤为重要的，因为大家在组成一个团队之前，代码风格和编码习惯都各不相同，如果不进行相应的约束，将会造成维护困难、代码难以复用、代码维护困难等问题。而如果事先对这些地方都进行了约束，就能在很大程度上避免这些问题。
转载：https://blog.csdn.net/weixin_49971653/article/details/128757166
查看评论