前端百日进阶-7.代码规范

为什么需要代码规范

在平时项目开发中由于开发人员的开发习惯不同，如果不制定规范，项目之后的维护阅读起来可能会很吃力，而且文件看起来会非常的乱。所以为了避免这些问题，在开发之前还是制定好规范。

ESlint

eslint会帮我们去检测代码中哪里写的不规范的地方，这些规范都可以通过eslint配置项去定制

npm i eslint -D

初始化项目

npx eslint --init

// .eslintrc.js
// 这里初始化了一个vue的模板
module.exports = {
    // env 定义了 对应环境的全局变量这样eslint在检测时遇到了就不会报错
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    // 继承于某个预设规则(预设规则包含了很毒品rules)
    "extends": "plugin:vue/essential",
    // 规定使用的es版本和模块化规范
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    // 在使用typescript会使用到,这是配置对应的解析器
    // parser: '@typescript-eslint/parser'
    // 各种各样的插件
    "plugins": [
        "vue"
    ],
   	// 这里可以配置各种各样的规则
    // 具体规则可以查看http://eslint.cn/docs/rules/
    "rules": {
    }
};

配置完成之后执行eslint src/*.vue既可以检测对应文件的语法问题,在使用过程中如果想要在某个地方禁止eslint的检查可以通过注释的方式

// 下面可以禁用一行的所有规则
const a = 1 // eslint-disable-line
// 下面是禁用具体的某一个规则
const a = 1 // eslint-disable-line no-constant-condition

eslint结合webpack

npm i eslint-loader -D

{
    test: /\.vue$/,
    exclude: /node_modules/,
    use: "eslint-loader",
    enforce: "pre",
},

这样执行webpack编译时会先检测语法

在vscode中配置检测

在vscode中的setting.json,配置后会根据项目下的.eslintrc.js配置来格式化代码

{
    // 当代码保存时自动格式化代码
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }
}

Stylelint

npm i stylelint -D

这个工具主要用于检测css文件的语法

创建一个配置文件.stylelintrc.js

module.exports = {
    // 这是官方推荐的方式
    // 使用起来和eslint差不多,遇到需要的配置时去查即可
    extends: "stylelint-config-standard",
};

Git Hook

githook可以提供在git操作的生命周期期间做一些事情,每一个使用了 git 的工程下面都有一个隐藏的 .git 文件夹.在这.git/hooks下面就会有对应的hook。当git做出对应操作就会执行当前对应文件。

平时在使用的时候是不需要自己去改变文件内容的只需要使用husky

npm install -D husky

"scripts": {
    "prepare": "husky install",
},

在package.json配置如上后执行yarn husky add .husky/pre-commit "npm run lint"。执行后会在.husky生成pre-commit

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

npm run lint

之后便可以在git commit的时候执行npm run lint

但是这样用eslint去检测代码,每一次commit都会全部代码扫描一遍,这时候可以使用lint-staged只检测暂存区代码格式.

npm i lint-staged -D

在package.json配置

"lint-staged": {
   "*.js": "eslint --fix"
},

这时候只需要修改生成后的pre-commit

#!/bin/bash
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

Git提交规范

在平时提交中常用规范如下

feat：新功能（feature）
fix：修补bug
docs：增加文档
style： css格式
refactor：重构
test：增加测试
chore：构建过程或辅助工具的变动

我们可以使用validate-commit-msg约束强制使用这种规范

npm install --save-dev validate-commit-msg

之后添加新的husky

yarn husky add .husky/commit-msg "npx validate-commit-msg"

在提交的时候就会去检测提交规范了