前端规范化标准以及ESLint&prettier的简单使用

为什么要有规范标准

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

哪里需要规范化标准

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

实施规范化的方法

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

常见的规范化实现方式

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

ESLint介绍

• 最为主流的JavaScript Lint工具 监测JS代码质量

• ESLint很容易统一开发者的编码风格

• ESLint可以帮助开发者提升编码能力

ESLint的使用

初始化项目

yarn init --yes

安装ESLint模块为开发依赖

yarn add eslint --dev

通过CLI命令验证安装结果

yarn eslint --version

初始化.eslintrc.js文件

yarn enlint --init

? How would you like to use ESLint? 					// 如何使用ESLint
? What type of modules does your project use? 			// 使用什么类型的模块
? Which framework does your project use?				// 使用什么框架
? Where does your code run? 							// 代码在哪里运行
? How would you like to define a style for your project?// 你想如何定义的的代码风格
? Which style guide do you want to follow? 				// 你想遵循哪种风格
? What format do you want your config file to be in?    // 你的配置文件格式

使用 yarn eslint + 文件路径来检查代码

yarn eslint prepare.js

自动修正 在命令之后添加–fix来让文件中的绝大部分代码自动修正

yarn eslint prepare.js --fix

配置文件解析

env : 标记当前代码最终的运行环境，eslint会根据环境来判断摸一个全局成员是否可用，避免你的代码使用到不存在的成员，环境并不互斥可以同时使用多个环境。

extends : 继承共享配置，可以是一个数组，代表可以继承多个配置。

parser :指定一个语法解析器。

parserOptions : 配设置语法解析器的相关配置 控制是否可以使用某个es版本的语法，如果设置成5就不能使用es6相关的语法，但并不代表某个成员是否可用，某个成员是否可用还是需要env来判断。

rules :设置eslint中每个校验规则的开启或者关闭。

plugins :是一个数组， 可以直接去指定某一个插件。

globals:额外声明项目中可以使用的全局成员。

module.exports = {
  env: { 
    browser: true,
    es2021: true
  },
  extends: [
    'standard',
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
    'no-alert':"error"
  },
  plugins:[ 
    'react'
  ]
}

eslint配置注释

配置注释可以理解为，把配置以注释的方式写在代码中，我们日常写代码的过程中难免会遇到必须要违反配置规则的问题，这是就需要配置注释的方式

“off”或者0: 关闭这条规则。
“warn”或者1: 开启规则，如果校验有问题则抛出警告。
“error”或者2: 开启规则，如果校验有问题则抛出错误。

开启所有规则校验

/* eslint-enable */

关闭所有规则校验

/* eslint-disable */

关闭部分的规则校验

/* eslint-disable no-alert, no-console */

开启部分的规则校验

/* eslint-enable no-alert, no-console */

关闭当前行的所有规则校验

alert('foo'); // eslint-disable-line

关闭当前行的具体规则校验

alert('foo'); // eslint-disable-line no-alert

关闭当前行的多个规则校验

alert('foo'); // eslint-disable-line no-alert, no-console 

关闭下一行的所有规则校验

// eslint-disable-next-line
alert('foo');

关闭下一行的具体规则校验

// eslint-disable-next-line no-alert
alert('foo');

关闭下一行的多个规则校验

// eslint-disable-next-line no-alert, no-console 
alert('foo');

eslint结合自动化工具

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

gulp-eslint

• 在gulp项目下安装eslint和gulp-eslint模块安装
• gulpfile.js中添加相应的代码

const plugins = loadPlugins()
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    // ESLint应该在babel之前执行，因为babel过后就不是真正的源代码了
    .pipe(plugins.eslint())
    // 使用format方法，在控制台中打印具体的错误信息
    .pipe(plugins.eslint.format())
    // failAfterError,让ESLint检查到错误之后可以直接终止任务管道
    .pipe(plugins.eslint.failAfterError())
    .pipe(plugins.babel({presets: ['@babel/preset-env']})) 
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

webpack ESLint

webpack中的ESLint不是以插件的方式来工作，而是loader机制。

• 安装eslint和eslint-loader模块
• 初始化.eslintrc.js配置文件
• 在rules中配置eslint检查

{
	test: /\.js$/,
    use: 'eslint-loader',
    enfore: 'pre' // 优先执行
},

• 对react这种特殊的语法，webpack准备了相应的插件

yarn add eslint-plugin-react --dev

• 在.eslintrc.js中做相应的配置

  extends: [
    'standard',
    'plugin:react/recommended'  // 共享配置，通过继承使用
  ]

ESLint检查TypeScript

生成eslint文件时选择TypeScript, 并安装相应模块

Git Hooks介绍

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

GIt Hooks与eslint结合

Husky和lint-staged模块结合使用可以在不编写shell脚本的情况下，实现Git Hooks的使用需求。

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

安装模块

yarn add husky --dev
yarn add lint-staged --dev

在package.json中添加相应的代码就好

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

StyleLint 的认识

• 提供默认的代码检查规则

• 提供CLI工具，快速调用

• 通过插件支持Sass Less PostCSS

• 支持Gulp或Webpack集成

1. 安装StyleLint

yarn add stylelint --dev

2. 在项目跟目录下创建.stylelintrc.js文件

   stylelint里的配置对象基本和eslint相同，stylelint内部并不提供任何的共享配置，所以需自行安装模块，和stylelint不一样的是，共享配置的名称，必须是完整的模块名称。

3. 安装共享配置模块stylelint-config-standard

yarn add stylelint-config-standard --dev

4. sass代码校验

yarn add stylelint-config-sass-guidelines --dev

prettier

近两年来使用频率比较高的通用的前端代码的格式化工具，几乎可以完成所有类型代码的格式化工作。

先安装prettier模块

yarn add prettier

然后执行相应代码

yarn prettier style.css: 将格式化代码打印在命令行中

yarn prettier style.css --write: 将格式化的代码覆盖到原文件中

yarn prettier . --write: 一次性替换所有的文件