前端规范化实践

一、代码格式化

在团队项目开发中，由于大家的代码风格不一致，会导致代码难以管理，看起来很烂，新人难以快速看懂等问题。 通过下面的方式，可以一键格式化整个项目，在按下保存时，大家的代码风格将会保持为一致。

1.安装插件到开发环境

• prettier： 格式化插件
• eslint-plugin-prettier：这是一个ESLint插件，意味着它包含ESLint将检查的其他规则的实现 .
• eslint-config-prettier：这是一个ESLint配置，它包含规则的配置（某些规则是打开，关闭还是特殊配置） .

cnpm i -D prettier eslint-config-prettier eslint-plugin-prettier 

2.添加配置

• 在根目录新建.vscode而文件夹，下面新建settings.json文件，这样就可以在保存时使用 prettier和eslint自动格式一下代码，验证一下错误

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "typescript",
        "vue",
    ],
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

• 根目录新建.prettierrc文件,配置prettier规则。.prettierignore规则自行考虑配置。

{
    "printWidth": 100,
    "tabWidth": 4,
    "trailingComma": "none",
    "arrowParens": "avoid",
    "endOfLine": "auto",
    "jsxBracketSameLine": false,
    "bracketSpacing": true,
    "htmlWhitespaceSensitivity": "ignore",
    "semi": true
  }

• 根目录新建.eslintrc.js，eslint规则

module.exports = {
    root: true,
    env: {
        node: true
    },
    plugins: ["prettier"],
    extends: ["plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended"],
    rules: {
        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
        "prettier/prettier": "error"
    },
    globals: {
        // 不希望被eslint报错的全局变量
        AMap: true
    },
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: "module",
        parser: "babel-eslint"
    }
};

• 清除个人的格式化配置，避免影响到工作区的配置。

找到用户的settings.json文件。清除格式化配置代码。

3.一键格式化

在package.json的scripts中添加一下代码

 "prettier": "prettier --config ./.prettierrc --write \"./**/*.{js,jsx,vue}\" "

执行以下代码，既可一键格式化所有代码

cnpm i -D prettier eslint-config-prettier eslint-plugin-prettier 

4.注意事项

• 有些项目可能在package.json文件配置了 eslint规则 需要删除 eslintConfig 字段
• vscode文件夹，需要提交到Git仓库，避免大家的不一致。需要在.gitignore文件去掉.vscode字段
• 屏蔽项目中的全局变量报错可以在 .eslintrc.js，添加需要屏蔽的变量
• 版本冲突。# Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function

二、git规范化

日常工作中，几乎每个项目都是由多个人进行维护，每个人的代码书写习惯和风格又不尽相同，在这种情况下，如果没有统一的规范，你就会发现提交到代码仓库的代码格式五花八门，并且commit log也是乱七八糟，更严重点可能有的小伙伴在提交代码的时候为了省事commit message直接就是两个点点，总之，可能就是怎么省事怎么来。最终导致的结果就是，当你某一天需要cherry-pick某个commit到另外的分支的时，看着commmit log一脸懵逼。所以，规范和约束在多人协作下，就显得尤为重要。

1.安装插件到开发环境

• husky： Git Hooks工具 用于提交消息、运行测试、检查代码
• lint-staged： 是一个在git暂存区上运行linters的工具。

cnpm i -D husky lint-staged @commitlint/cli @commitlint/config-conventional

2.添加配置

• 在package.json的scripts中添加一下代码

 "prepare": "husky install"

• 执行以下代码(无git情况下会报错，请先git init 一下)

cnpm run prepare 

• 在package.json文件下添加如下代码：

"lint-staged": {
        "src/**/*.{js,jsx,ts,tsx,json}": [
            "prettier --write",
            "eslint",
            "git add"
        ]
    }
}

• 在根目录创建 commitlint.config.js 文件

module.exports = {
    extends: ["@commitlint/config-conventional"],
    // 以下时我们自定义的规则
    rules: {
        "type-enum": [
            2,
            "always",
            [
                "bug", // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
                "feat", // 新功能（feature）
                "fix", // 修补bug
                "docs", // 文档（documentation）
                "style", // 格式（不影响代码运行的变动）
                "refactor", // 重构（即不是新增功能，也不是修改bug的代码变动）
                "test", // 增加测试
                "chore", // 构建过程或辅助工具的变动
                "revert", // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
                "merge" // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
            ]
        ]
    }
};

• 如果还需要别的代码优化依赖包，可以接着进行安装
• 至此，准备好我们需要的依赖包之后，我们开始添加钩子
• 执行npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'之后，会看到在根目录的.husky文件夹下多了一个 commit-msg 文件，其内容如下：

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

npx commitlint --edit "$1"

• 紧接着，我们需要将上一步添加的钩子添加到git中去，执行git add .husky/commit-msg
• 执行npx husky add .husky/pre-commit 'npx lint-staged --allow-empty "$1"'之后，会看到在根目录的.husky文件夹下多了一个 pre-commit 文件，其内容如下：

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

npx lint-staged --allow-empty "$1"

• 同样的，我们需要将上一步添加的钩子添加到git中去，执行git add .husky/pre-commit

3.使用测试

提交失败示例

$ git commit -m 'test'
⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatical
git commit index.

→ No staged files match any configured task.
⧗   input: test
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

提交成功

$ git commit -m 'feat: 配置husky7.0.1版本的钩子'
⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automaticalhe git commit index.

→ No staged files match any configured task.
[master 5403b85] feat: 配置husky7.0.1版本的钩子
 5 files changed, 96 insertions(+), 9307 deletions(-)
 create mode 100644 .husky/commit-msg
 create mode 100644 .husky/pre-commit
 create mode 100644 commitlint.config.js