前言

上节我们搭建了组件库的基本环境架构，这节我们来对项目的代码规范和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;
}

使用效果:

总结

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