项目搭建规范：打造可维护、高效的代码规范

1、editorconfig–编辑器配置

简介

• 在多人团队协作中，EditorcConfig有助于为不同的IDE编辑器上处理统一项目的多个开发人员维护一致的编码风格。文档链接：EditorConfig

使用

1. VS Code需要安装一个插件：EditorConfig for VS code

2. 新建文件 .editorconfig，编写代码：

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为utf-8
indent_style = space # 缩进风格(tab|space)
indent_size = 4 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅md文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

2、prettier–代码格式化

简介

• Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。文档链接：Prettier · Opinionated Code Formatter

使用

1. 安装prettier：

   • npm install prettier -D

2. 新建并配置**.prettierrc**文件

   • useTabs：使用tab缩进还是空格缩进，选择false
   • tabWidth：tab是空格的情况下，是几个空格，选择2个
   • printWidth：当行字符的长度，推荐80，也有人喜欢100或者120
   • singleQuote：使用单引号还是双引号，选择true，使用单引号
   • trailingComma：在多行输入的尾逗号是否添加，设置为 none
   • semi：语句末尾是否要加分号，默认值true，选择false表示不加

   {
     "useTabs": false,
     "tabWidth": 2,
     "printWidth": 80,
     "singleQuote": true,
     "trailingComma": "none",
     "semi": false,
     "endOfLine":"lf"
   }
   

3. 创建**.prettierignore**忽略文件

   /build/*
   .local
   .output.js
   /node_modules/**
   
   **/*.svg
   **/*.sh
   
   /public/*
   

4. 在VSCode中安装prettier的插件

5. VSCode中的配置

6. 检测prettier是否生效

   • 可以直接代码代码中保存代码检测

   • 通过配置一次性修改命令运行检测

     • 在package.json中配置一个scripts："prettier": "prettier --write ."

     

3、eslint–代码检查

简介

• 查看并修复JavaScript代码中的问题。ESLint 静态地分析你的代码以快速发现问题。它内置于大多数文本编辑器中，但你也可以在持续集成运行 ESLint。文档链接：ESLint - Pluggable JavaScript Linter

使用

1. VSCode需要安装ESLint插件：

2. 安装 :npm i eslint-plugin-prettier eslint-config-prettier -D
3. 生成： npx eslint --init

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:react/recommended',
        //解决eslint和prettier冲突问题
        'plugin:prettier/recommended'
    ],
    overrides: [
        {
            env: {
                node: true
            },
            files: ['.eslintrc.{js,cjs}'],
            parserOptions: {
                sourceType: 'script'
            }
        }
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
    },
    plugins: ['@typescript-eslint', 'react'],
    rules: {
        '@typescript-eslint/no-var-requires': 'off',
        'react/react-in-jsx-scope': 'off',
        '@typescript-eslint/no-explicit-any': 'off'
    }
}

4. VSCode设置中eslint的配置(早期版本)

"eslint.lintTask.enable":true,
"eslint.alwaysShowStatus":true,
"eslint.validate":[
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],
"edit.codeActionsOnSave":{
    "source.fixALL.eslint":true
},

4、git Husky和eslint–提交时hook

简介

• husky做的事情就是在git工作流的某个时机触发脚本，也就是git hook，比如我们在git commit之前进行eslint语法检查，eslint检查过程中报错或者警告太多是会中断指令（git commit）执行，所以这样就保证了提交到远程的代码是通过eslint检查的。文档链接：husky (typicode.github.io)

使用

1. 这里我们可以使用自动配置命令：npx husky-init && npm install

2. 编辑.husky下pre-commit文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint

3 这个时候我们执行git commit的时候会自动对代码进行lint校验

5、git commit规范–提交规范

5.1 代码提交规范

简介

• 主流的提交规范一般包括：标题（类型、精简总结）、内容、备注 。其中精简总结 是必填的，类型 最好也填一下，其余都是选填
• 标题一般分为：类型、改动范围、精简总结三部分
• 类型：

Type	作用
feat	新增特性 (feature)
fix	修复 Bug(bug fix)
docs	修改文档 (documentation)
style	代码格式修改(white-space, formatting, missing semi colons, etc)
refactor	代码重构(refactor)
perf	改善性能(A code change that improves performance)
test	增加/更改测试用例(when adding missing tests)
build	变更项目构建或外部依赖（例如 scopes: webpack、gulp、npm 等）
ci	更改持续集成软件的配置文件和 package 中的 scripts 命令，例如 scopes: Travis, Circle 等
chore	变更构建流程或辅助工具(比如更改测试环境)
revert	代码回退

• Commitizen 是一个用于规范代码提交信息的工具。它可以帮助开发者生成符合规范的代码提交信息，并鼓励开发者遵循一定的规范和风格来编写代码提交信息。

使用

1. 安装Commitizen：npm install commitizen -D
2. 安装cz-conventional-changelog，并且初始化cz-conventional-changelog：npx commitizen init cz-conventional-changelog --save-dev --save-exact
3. 在package.json中配置好：

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

4. 此时提交代码只需要:npx cz
   • 选择type，本次更新的类型：
   • 随后进行各项配置，代码commit完成：

5.2 代码提交验证

简介

• 在提交代码之前，您可以使用工具来检查提交信息是否符合规范。例如，可以使用 commitlint 工具来检查提交信息是否符合 Conventional Commits 规范。

使用

1. 安装 @commitlint/config-conventional 和 @commitlint/cli： npm i @commitlint/config-conventional @commitlint/cli -D
2. 在根目录创建 commitlint.config.js 文件，配置commitlint：

module.exports = {
  extends: ['@commitlint/config-conventional']
}

3. 使用husky生成commit-msg文件，验证提交信息:npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
4. 配置脚本命令：

5. 使用npm run commit即可