规范化标准

_当里个当_
195 阅读6分钟

规范化介绍

规范化是我们践行前端工程化中重要的一部分。

为什么要有规范化标准

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

哪里需要规范化标准

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

实施规范化的方法

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

常用的规范化实现方式

  • Eslint工具使用
  • 定制ESlint校验规则
  • ESlint对Typescript的支持
  • ESlint结合自动化工具或者Webpack
  • 基于ESlint的衍生工具
  • Stylelint工具的使用

ESlint

介绍

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

安装

步骤

  1. 初始化项目 npm init --yes 初始化package.json文件用于管理项目的npm依赖。

  2. 安装ESlint模块为开发依赖 npm install eslint --save-dev

  3. 通过CLI命令验证安装结果 ESlint提供了一个CLI工具，安装完成过后就可在node_modules/.bin找到ESlint的可执行文件，后续就可通过这个CLI程序检测代码中的问题，查看eslint版本：

-> cd node_modules 
-> cd .bin
-> ./eslint --version
-> v7.15.0

对于.bin下的可执行文件，可以通过npx或者yarn命令找到并执行它们，例如npx eslint yarn eslint

安装最新版本的npm就可以使用npx命令

不需要纠结到底是使用npm还是yarn，它们两者之间没有绝对的好坏之分，各有个的优势，就按照你所在团队或者是项目的具体要求使用任何一款即可。

快速上手

ESlint检查步骤

  1. 编写“问题”代码(语法错误，问题代码、代码风格)
  2. 使用eslint执行检测
  3. 完成eslint使用配置

yarn eslint --init，选择相应的个性化选项完成后项目的根目录下就会生成一个配置文件 .eslintrc.js,就可运行校验命令对代码文件进行检验。

当代码中存在语法错误时eslint是不会检查问题代码和代码风格的。此时，可以根据校验结果修复代码，也可通过yarn eslint ./xx.js --fix来修正绝大数代码风格的问题，其他问题代码可通过手动修正解决。

ESlint配置文件解析

yarn eslint --init生成的配置文件.eslintrc.js，这个配置文件里配置的规则会影响到当前目录以及子目录的文件，正常情况下一般不会手动去修改这个配置，但是如果说我们要去开启或者关闭某些校验规则的时候这个配置文件就会非常重要。

  • env 标记最终代码的运行环境，ESlint会根据环境信息判断成员的可用性，从而检测代码中一些成员的可用性。每一个环境对应着一组预定义的全局变量，开启后就可使用该环境的所有成员。env可设置的环境如下，可以同时开启多个环境

  • extends 用来继承一些共享配置
  • parserOptions 用来设置语法解析器的配置。近几年ECMAScript发布了很多语法，这个配置就是用来控制使用哪一个ES版本的语法。只代表语法检测，不代表某个成员是否可用。
  • rules 每个校验的开启或关闭。off关闭warn警告error报错。 在ESlint官网上有内置的校验规则列表，可以在使用时进行查看。
  • globals 额外声明可以在代码当中使用的全局成员，例如
globals: {
  "jQuery": "readonly"
}

这样在代码中使用jQuery就不会报错了。

ESlint配置注释

配置注释可以理解为将配置直接通过注释的方式写在脚本文件当中，然后再去执行代码的校验。为什么要这样做呢？例如在开发过程中难免遇到违反规则的情况，这样就不能因为这一两个点就去推翻检验规则的配置。

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

ESlint结合Webpack

  • 集成之后，ESlint一定会工作
  • 与项目统一，管理更加方便 ESlint通过loader机制集成到Webpack当中。

现代化项目集成ESlint

React、Vue官方CLI已经集成ESlint。

ESlint检查Typescript

ESlint配合Typescript插件来实现对代码的检验。

配置选项： parser

作用就是配置一个语法解析器

parser: '@typescript-eslint/parser'

Stylelint认识

使用介绍

  • 提供默认的代码检查规则，也可以在配置文件当中手动关闭或开启。
  • 提供CLI工具，快速调用
  • 通过插件支持Sass Less PostCSS
  • 支持Gulp或Webpack集成

安装yarn add stylelint -dev

init生成配置文件

module.exports = {
  extends: "stylelint-config-standerd",
  extends: '"stylelint-config-guidelines"
}

Prettier的使用

是一款通用的前端代码格式化工具，几乎可以完成前端所有类型代码的格式化工作。在日常使用中，我们可以通过它完成代码的格式化，或者说针对markdown这些文档完成格式化的操作。通过Prettier落实前端工程化的规范化标准。

npm install prettier -D 安装完成后可以通过prettier命令格式化代码文件。 npx prettier style.css后会打印出格式化后的代码。加上 --write参数就可格式化并写入文件。 npx prettier . --write格式化所有文件

Git Hooks 工作机制

通过Git Hooks在代码提交前强制lint

Git Hooks介绍

  • Git Hook也成为git钩子，每一个钩子对应一个任务
  • 通过shell脚本可以编写钩子任务触发时要具体执行的操作

仓库 .git目录下hooks

将pre-commit文件后缀去掉，在里面编辑一些测试语句

#!/bin/sh
 echo 'before commit'

这样执行提交时就会执行相应的操作啦。

ESlint结合Git Hooks

希望在提交之前强制地代码进行校验操作。但是很多开发者并不擅长使用shell，所以就有人开发了npm模块。Husky可以实现GitHooks的使用需求。

yarn add husky -dev 在package.json

"husky": {
  "hooks": {
    "pre-commit": "npm run lint"
  }
}

yarn add lint-staged --dev，可实现自动修复的代码提交到暂存区。

"lint-staged": {
  "*.js": [
    "eslint",
    "git add"
  ]
}
avatar
文章
阅读
粉丝