规范化标准及ESLint使用

为什么需要规范标准

软件开发需要多人协同
不同开发者具有不同的编码习惯和喜好
不同的喜好增加项目维护成本
每个项目或者团队需要明确统一的标准

哪里需要规范化标准

代码、文档、甚至是提交日志
开发过程中人为编写的成果物
代码标准化规范最为重要

实施规范化的方法

编码前人为的标准约定
通过工具实现 Lint

ESLint使用

ESlint是最为主流的 JavaScript Lint 工具，用于监测JS代码质量，通过ESLint很容易统一开发者的编码风格，例如缩进、换行、分号等等，并且ESLint可以避免代码中存在的潜在问题，如变量声明未使用等，从而提高代码质量；并且ESLint可以帮助开发者提升编码能力

安装

yarn init --yes初始化项目
安装ESLint模块 yarn add eslint --dev，node-modules/.bin目录生成eslint的cli程序
使用yarn eslint --version查看eslint的版本

使用

首先使用yarn eslint --init初始化.eslintrc.js文件，选择相应配置后会自动生成.eslintrc.js

image-20210124172343450.png

接着使用yarn eslint ./index.js，当代码中出现语法错误时，eslint无法检查问题代码和代码风格

image-20210124172527664.png
使用命令yarn eslint .\index.js --fix，自动修正风格代码
其余代码，自己手动修改

ESLint配置文件解析

module.exports = {
  // 标记代码最终的运行环境，eslint根据环境信息判断成员是否可用
  env: {
    browser: true, // 修改为false，使用document时代码依旧没报错，因为eslint-config-standard下的eslintrc.json文件将document等都设置为全局只读成员，而这里的配置继承了standard，所以这里的设置不会影响，而像alert这种就会收到影响
    es2021: true,
  },
  extends: ['standard'], // 继承共享配置
  parserOptions: {
    // 设置语法解析器，控制是否使用某一个es版本的语法 只是检测语法，而不是检测某个成员是否可用
    ecmaVersion: 12,
  },
  rules: {
    'no-alert': "error"
  }, // 配置eslint规则
  globals: {
    // 额外声明项目中可以使用的全局成员
    'jQuery': 'readonly'
  }
}

ESLint配置注释

如果代码中有用的代码违反了ESLint的检查规范，那么需要通过注释的方式解决，更多解决办法

const str1 = '${name} is a coder' // eslint-disable-line no-template-curly-in-string
console.log(str1)
// 不直接使用eslint-disable-line 因为会屏蔽掉此行中的所有ESLint错误

ESLint结合自动化工具

首先添加插件gulp-eslint

修改js文件的操作如下，先进行eslint的检查，在执行babel转换等

const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    // 在babel处理之前进行ESLint的操作
    .pipe(plugins.eslint())
    .pipe(plugins.eslint().format()) // format（）将lint结果输出到控制台 使进程退出时具有错误代码
    .pipe(plugins.eslint().failAfterError()) // lint错误，终止任务
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};

初始化eslint配置文件
yarn gulp script直接运行打包，eslint报错详情

ESLint结合Webpack

安装eslint和eslint-loader

在rules中实现eslint检查

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          'eslint-loader' // eslint需放在babel之前
        ]
      },
      {
        test: /\.js$/,
        use: 'eslint-loader',
        enforce: 'pre' // 或使用enforce属性指定eslint-loader的执行顺序
      }
    ]
  },
  ...
}

执行yarn webpack打包过程会执行eslint检验

现代化项目集成ESLint

像Vue和React主流框架，都已经在CLI工具中集成了ESLint，不需要单独配置

创建项目时根据提示选择lint检验即可

ESLint检查TypeScript

在yarn eslint --init的过程中，是否使用Typecript时，选择yes后，会自动安装typeSctipt需要的模块

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "standard"
    ],
    "parser": "@typescript-eslint/parser", // 使用typescript解析器
    "parserOptions": {
        "ecmaVersion": 11
    },
    "plugins": [
        "@typescript-eslint" // 加载typescript规则，等待被配置后使用
    ],
    "rules": {
    }
}

StyleLint

CSS代码的lint操作，一般使用Stylelint工具

提供默认的代码检查规则，可以在配置中选择性的开启或关闭某项规则
提供CLI工具，可以在终端中执行校验命令
通过插件支持 Sass Less PostCSS 这些CSS衍生语法的代码检查
支持 Gulp 或 Webpack 集成

使用步骤

安装stylelint模块，yarn add stylelint -D
Stylelint没有提供像ESLint一样的--init初始化配置文件的命令，手动创建.stylelintrc.js文件，文件格式和eslintrc.js相同

通过npm安装stylelint-config-standard和stylelint-config-sass-guidelines模块，注意这里的extends需要使用完整名称

module.exports = {
  extends: [
    'stylelint-config-standard', // stylelint的推荐配置
    'stylelint-config-sass-guidelines', // sass代码进行stylelint
  ],
}

yarn stylelint src/.css --fix或yarn stylelint src/.scss --fixs检验css代码，需要注意用/而不是\，否则会报以下错误

image-20210125103503997.png

Prettier的使用

Prettier是近几年使用频率特别高的通用的前端代码格式化工具，几乎可以完成所有类型代码的格式化工作

安装使用：

安装prettier，yarn add prettier --dev，会在node_module/.bin目录生成cli程序
通过yarn prettier xxx --write，不加--write会将格式化的代码输出到控制台，--write会覆盖修改源文件

ESLint结合GIt Hooks

Hook 就是在执行某个事件之前或之后进行一些其他额外的操作

通过lint工具确保代码规范的落地，但是也会有遗漏。比如有人未使用lint工具，就将代码提交到远程仓库

相比约定，通过Git Hooks在代码提交前强制lint会更好一些

Git Hooks

Git钩子，每个钩子都对应一个任务或具体的Git操作，比如push、commit等，通过编写shell脚本，可以编写钩子具体执行的任务
Git Hooks使用
1. git init创建git仓库
2. 在.git/hooks目录中，每个.sample既是一个钩子
3. 修改commit提交使用到的钩子pre-commit.sample（只有去掉.sample后缀才能生效,并且不能全局配置，只能在配置的项中生效），当执行commit时就会触发这个钩子所定义的任务
```
#!/bin/sh
echo "before commit"
```
4. 执行git add .，git commit -m "xxx"后，可以看到控制台的输出
  
  image-20210126110335477.png

Husky配置

本地配置好的Git Hooks，不能上传到远程仓库。此时就需要使用Hysky，Husky是一个让配置Git钩子变得更简单的工具，像webpack、babel等，Husky原理是在项目根目录下一个配置文件（或package.json），它会自动在.git/目录下增加相应的钩子，这样就可以在团队中使用Git Hook了
1. 安装husky，yarn add husky --dev，此时在.git/hooks目录下会多一些Husky自定义的钩子
  
  image-20210126114111692.png

yarn remove husky 卸载Husky后会同步删除Husky创建的 Git hooks 钩子

在项目根目录创建.huskyrc或在package.json中添加配置

// package.json
"husky": {
    "scripts": {
        "lint": "eslint ."
      },
    "hooks": {
        "pre-commit": "npm run lint"
    }
},
// 或创建.huskyrc文件
{
    "hooks": {
        "pre-commit": "npm run lint"
    }
}

执行提交操作，会先进行eslint校验

lint-staged

husky可以实现在代码提交前执行lint校验，但是校验的是项目全部文件，而不是当前提交文件。lint-staged就是解决这个问题，其中staged指的是Git的暂存区

使用步骤：
1. 安装lint-staged，yarn add --dev lint-staged
2. 在package.json配置任务，并添加执行lint-staged命令的脚本，配合husky使用
```
{
  "scripts": {
    "precommit": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit"
    }
  },
  "lint-staged": {
   // 多任务使用数组
    "*.js": "eslint"
  }
}
```
  也可以使用多任务，或者使用prettier的校验
```
"lint-staged": {
  "*.js": [
      // "prettier --write", // prettier校验
      "eslint --fix",
      "git add"
  ]
}
```