跳至主要內容

规范化标准

GodX...大约 6 分钟前端规范化工程化

什么是规范化标准

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

规范化标准的意义

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

哪里需要规范化标准

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

实施规范化标准的方法

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

常见的规范化实现方式

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

ESLint

基本介绍

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

安装

  • 初始化项目

    yarn init --yes

  • 安装 ESLint 模块为开发依赖

    yarn add eslint -D

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

    yarn eslint --version

快速上手

  • 编写 “问题” 代码

  • 完成 eslint 使用配置

    # 初始化配置文件
yarn eslint --init

  • 使用 eslint 执行检测

    yarn eslint  <需要检测的文件路径> --fix

相关信息

当代码中有语法问题时，eslint 是不能进行检查问题代码*（比如变量未定义、定义的变量未使用等等）*和代码风格的

配置文件

module.exports = {
  env: { // 作用：根据所在环境判断全局成员是否可用
    browser: true, // 标记代码最终运行的环境，因为不同环境下存在不同的全局成员不同，比如在 node 环境中不能够使用 window 、document 等全局变量
    es2021: true
  },
  extends: 'standard',
  overrides: [
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
  }
}

env的配置选项

以下配置选项并不互斥，比如可以同时配置 node、browser 为 true

image-20221122111337969
image-20221122111337969

相关信息

如果你使用了社区中的标准规范，比如 standards。其中的配置选项会合并到你的配置文件当中，可能会导致你的一些配置失效，比如 env 的 browser 选项

rules

规则配置，一般有三个选项：

  • off / 0：不校验规则
  • warn / 1：打开规则作为警告（不影响退出代码）
  • error / 2：将规则作为错误打开（触发时退出代码为 1）

详细见官网

parserOptions

 parserOptions: { // 语法解析器
    ecmaVersion: 'latest' // 指定 js 语法的版本
 },

globals

定义全局变量，定义后 eslint 将不会报为定义的错误

 globals: {
    jquery: 'readonly'
 }

配置注释

通过注释的方式将校验配置写在脚本当中

使用场景

当前代码需要单独配置校验规则的场景

案例

当前行禁用校验

const str = "${name} is a coder"; // eslint-disable-line
console.log(str)

Eslint 结合自动化工具（Gulp）

原因

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

前置工作

image-20221122142847872
image-20221122142847872

相关信息

eslint 默认情况下，检测到错误是不会在控制台报错的。我们需要做额外的配置，才能正常工作

Eslint 结合 webpack

通过 loader 的形式集成到 webpack 中

前置工作

具体配置

{
  test:/.js$/，
	exclude: /node_modules/,
	use:'eslint-loader'
	enfore: 'pre' // 优先加载
}

React 中需要做额外的配置

  • 安装插件

    yarn add eslint-plugin-react -D

  • 修改配置文件

    • 单独配置，较复杂

      {
  plugins: [
    'react' // eslint 会自动去除 elsint-plugin 的前缀
  ],
   // 配置插件中的规则
   rules: {
     'react/jsx-uses-react': 2,
      'react/jsx-user-vars': 2
   },
}

    • 使用共享配置，降低使用成本

      {
  extends: [
    'standard',
    'plugin:react/recommended'
  ]
}

现代化项目集成 ESLint

这里以 vue 为例

image-20221122150410089
image-20221122150410089
  • Lint on save
    在 webpack 构建时触发校验，并不是文件保存时促发校验
  • Lint and fix on commit
    在代码提交时触发代码校验和修复

以上两个选项建议都选

ESLint 检查 TypeScript

初始化配置文件的时候开启 ts 选项

image-20221122151507745
image-20221122151507745

安装相关依赖

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

修改配置文件

module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser', // 语法解析器
  plugins: ['@typescript-eslint'],
  root: true,
};

StyleLint

  • css 代码的语法检测插件
  • 提供默认的代码检查规则
  • 提供 CLI工具，快速调用
  • 通过插件支持 Sass Less PostCSS
  • 支持 Gulp 或 Webpack 集成

安装

yarn add stylelint stylelint-config-standard -D

相关信息

因为 stylelint 没有内置共享配置，所以需要额外安装配置依赖

使用

新建 stylelintrc.js文件

module.exports = {
  extends: "stylelint-config-standard"
};

运行 cli 触发校验

yarn stylelint index.css --fix

stylelint 配合 sass

  1. 安装依赖

    yarn add stylelint-config-sass-guidelines -D

  2. 修改配置文件

    module.exports = {
  extends: ["stylelint-config-standard", "stylelint-config-sass-guidelines"]
};

  3. 使用

    yarn stylelint index.sass --fix

Preitter

前端代码格式化工具

安装

yarn add prettire -D

使用

yarn prettier style.css --write //覆盖原文件

yarn prettier . --write // 格式化所有文件

Git Hooks

功能

在代码提交前强制 lint，没有通过 lint 检查的代码不能提交到远程仓库

基本介绍

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

工作机制

  1. 将 .git/hooks 下文件的后缀 .sample 删除，即可触发对应的钩子函数
image-20221123094615795
image-20221123094615795

  1. 我们在其中写入一些 shell 脚本进行测试

    #!/bin/sh

echo "before commit"

  2. 现在就会在我们 commit 之前会执行上面的脚本文件了

ESLint 结合 Git Hooks

现状

很多前端开发者并不擅长使用 shell，编写 shell 脚本

解决方案

Husky 可以在不编写 shell 脚本的情况下， 实现 Git Hooks 的使用需求

Husky

安装

npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm

添加挂钩

npx husky add .husky/pre-commit 'npm run test'

Lint-staged

只针对暂存区的文件做一些操作，不会影响到之前提交的代码

注意

prettier 是一个很好的格式化代码的插件，但对已经有一定迭代完成度的代码不推荐使用。使用该插件后，它会将原有的代码也进行格式化，造成很多不可知的问题，我就是前车之鉴，使用 prettier 后，原本已经没有 eslint 问题的代码，又多出了更多的不知道什么原因的报错，只能将代码回退处理。

这也就是我们为什么在 lint-staged 中，执行 prettier 的原因

安装

yarn add lint-staged -D

配置

{
   "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
    "prettier --write",
    "eslint --cache --fix"
 	 ]
  }  
}

注意

新版本的 lint-staged 会自动将修改过后的代码自动添加到暂存区内，无需配置

上次编辑于:
贡献者: GodX
0  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.3.0