规范化标准-eslint,stylelint,prettier,githooks

规范化标准

1）为什么要有规范化标准

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

2）哪里需要规范化标准

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

3）实施规范化的方法

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

4）ESLint 介绍

• 最为主流的 JavaScript Lint 工具，监测代码质量
• ESLint 很容易统一开发者的编码风格
• ESLint 可以帮助开发者提升编码能力

5）ESLint 安装

• 初始化项目

npm init -y

• 安装 ESLint 模块为开发依赖

npm i eslint -D

• 通过 CLI 命令验证安装结果

npx eslint --version

6) ESLint 快速上手

• 编写 “问题” 代码
• 使用 eslint 执行检测

npx eslint --init  生成配置文件.eslintrc.js

npx eslint '文件' 检测
npx eslint '文件' --fix 检测并尝试修复一些错误

• 完成 eslint 使用配置

// .eslintrc.js
module.exports = {
  env: { // 标记当前代码最终的运行环境, 不互斥，可以开启多个环境
    browser: true, // 浏览器环境（成员可用，如document，window）
    es2021: true
  },
  extends: [ // 继承共享配置，可以同时继承多个共享配置
    'standard'
  ],
  parserOptions: { // 设置语法解析器的相关配置
    ecmaVersion: 12
  },
  rules: { // 配置 ESLint 每一个校验规则的开启和关闭
    'no-alert': 'warn' // 值可设置 off or 0(关闭), warn or 1(警告), error or 2(报错)
  },
  globals: { //额外声明可以使用的全局成员
    'jQuery': 'readonly'
  }
}

• ESLint 配置注释

官网链接

const str = '${name} is a coder' // eslint-disable-line no-template-curly-in-string

console.log(str)

• ESLint 结合自动化工具

  • 集成之后，ESLint 一定会工作
  • 与项目统一，管理更加方便
  • ESLint 结合 gulp

  // gulpfile.js
  const script = () => {
    return src('src/assets/scripts/*.js', { base: 'src' })
      .pipe(plugins.eslint())
      .pipe(plugins.eslint.format())
      .pipe(plugins.eslint.failAfterError())
      .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
      .pipe(dest('temp'))
      .pipe(bs.reload({ stream: true }))
  }
  

  • ESLint 结合 webpack
  • 现代化项目集成ESLint（如vue-cli)

7) ESLint 检查 TypeScript

// eslintrc.js
"parser": "@typescript-eslint/parser",
 "plugins": [
        "@typescript-eslint",

    ],

8）stylelint

9）Prettier 的使用

1. npm i prettier -D
2. npx prettier '文件路径' 格式化
3. npx prettier '文件路径' --write 格式化并覆盖源文件
4. npx prettier . --write 格式化所有文件

10）Git Hooks 介绍

• 背景：
  • 代码提交至仓库之前未执行 lint 工作
  • 通过 Git Hooks 在代码提交前强制 lint
• Git Hooks 也称之为 Git 钩子， 每个钩子都对应一个任务
• 通过 shell 脚本 可以编写钩子任务 触发时要具体执行的操作

11）ESLint 结合 Git Hooks ------ Husky

1. npm install husky --save-dev
2. 设置 scripts 标签 test 指令为具体操作
// package.json
{
  "scripts": {
      "test": "eslint ./index.js",
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run test", // git commit 时触发
    }
  }
}

3. npm install lint-staged -D
4. 
    // package.json
{
  "scripts": {
      "test": "eslint ./index.js",
      "precommit": "lint-staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run precommit", // git commit 时触发
    }
  },
  "lint-staged": {
      "*.js": [
          "eslint",
          "git add"
      ]
  }
}