前端工程化之规范化标准

文章内容输出来源：拉勾大前端高薪训练营

规范化介绍

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

• 为什么要有规范标准

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

• 哪里需要规范化标准

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

• 实施规范化的方法

  • 编码前人为的标准约定

  • 通过工具实现lint

  • 常见的规范化实现方法

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

ESLint

• 介绍

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

• 安装

  • 初始化项目

    • yarn init --yes

  • 安装ESLint模块为开发依赖

    • npm install eslint --save-dev

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

    • npx eslint --version

• 快速上手

  • 1，编写"问题"代码

    • 根目录新建文件01-prepare.js

      • const foo = 123

function fn(){ console.log('hello') console.log('eslint')

}

fn(

syy()

- npx eslint   .\01-prepare.js

	- 报错: eslint couldn't find a configuration file.

- 解决报错

	- npx eslint --init

		- 会提出一些选项供选择，选择完后根目录下会生成.eslintrc文件

- npx eslint   .\01-prepare.js

	- OK: 可以检测单代码中错误了

- 自动修正

	- npx eslint   .\01-prepare.js --fix

• 配置文件解析

  • module.exports = { // 标记代码的最终运行环境 env: { browser: true, es2020: true }, // 用于继承一些共享的配置 extends: [ 'standard'], // 用来设置语法解析器的相关配置 parserOptions: { // 控制是否允许使用某一个ES版本的语法，影响的只是语法检测，不代表某个成员是否可用， // 具体成员是否可用还是得有env中进行配置 ecmaVersion: 11 }, // 用于配置ESLint中某个检验的开启或关闭 rules: { 'no-alert': "error" }, // 用于额外声明我们在代码中可以使用的全局成员 globals: { "jQuery": "readonly" } }

• 配置注释

  • 简单理解就是将配置通过注释的方式写在脚本文件当中，然后再去执行代码的检验

  • 项目根目录下新建文件eslint-configuration-comments.js

    • const str1 = '${name} is a coder' console.log(str1)

  • yarn eslint .\eslint-configuration-comments.js

    • 报错: Unexpected template string expression

  • 修改文件eslint-configuration-comments.js

    • // eslint-disable-line const str1 = '${name} is a coder' console.log(str1)

  • yarn eslint .\eslint-configuration-comments.js

    • OK: 但是会禁用整行检验

  • 修改文件eslint-configuration-comments.js

    • // eslint-disable-line no-template-curly-in-string const str1 = '${name} is a coder' console.log(str1)

  • yarn eslint .\eslint-configuration-comments.js

    • OK: 只禁用指定规则的检验了。

• 结合自动化工具

  • 优点

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

  • 准备

    • 克隆代码

      • git clone github.com/zce/zce-gul…

    • 完成相应的依赖安装

    • 完成eslint模块安装

    • 完成gulp-eslint模块安装

  • 修改根目录下gulpfile.js文件

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

module.exports = { clean, build, develop, script }

- 执行script任务

	- npx gulp script

		- 报错: Error: no ESLint configuration found

- 解决报错

	- 初始化eslint配置文件npx eslint --init

- 执行script任务

	- npx gulp script

		- OK：eslint正常执行了

- 修改文件src/assets/scripts/main.js

	-  $(($) ⥤{

const $body =$('html, body’) ('scroll_top').on('click', () ⥤ { body.animate({ scrollTop: 0 }, 600) return false }) }) const a=1

- 执行script任务

	- npx gulp script

		- OK：有些不合理

- 解决不合理

	- 修改根目录下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 })) }

module.exports = { clean, build, develop, script }

- 执行script任务

	- npx gulp script

		- OK~

• 结合webpack

  • 准备

    • 克隆代码

      • git clone github.com/zce/zce-gul…

    • 完成相应的依赖安装

    • 完成eslint模块安装

    • 完成eslint-loader模块安装

    • 初始化.eslintrc.js配置文件

  • 项目根目录下webpack.config.js文件

    • const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports ={ mode: 'production' entry: './src/main.js' module: { rules:[ { test: '.js/, exclude: /node_modules/, use: 'babel-loader' }, { test: '\.js/, exclude: /node_modules/, use: 'eslint-loader', enforce: 'pre' }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ new HtmlWebpackPulgin({ template: 'src/index.html' }) ]

  • npx webpack

    • OK:eslint成功集成

  • 后续配置

    • module.exports = { // 标记代码的最终运行环境 env: { browser: true, es2020: true }, // 用于继承一些共享的配置 extends: [ 'standard'], // 用来设置语法解析器的相关配置 parserOptions: { // 控制是否允许使用某一个ES版本的语法，影响的只是语法检测，不代表某个成员是否可用， // 具体成员是否可用还是得有env中进行配置 ecmaVersion: 11 }, // 用于配置ESLint中某个检验的开启或关闭 rules: { 'react/jsx-uses-react': 2, 'react/jsx-uses-vars': 2, }, plugins: [ 'react' ] }

    • npx webpack

      • OK:eslint成功集成

    • src/main.js

      • import React from 'react' import ReactDOM from 'react-dom' import './global.css' import App from './components/App' ReactDOM.render( <React.StrictMode> <Aрр /> </React.StrictMode>, document.getElementById('root') )

    • npm install eslint-plugin-react --save-dev

    • yarn webpack

      • OK~

    • 继承方式

      • module.exports = { // 标记代码的最终运行环境 env: { browser: true, es2020: true }, // 用于继承一些共享的配置 extends: [ 'standard', 'plugin:react/recommended' ], // 用来设置语法解析器的相关配置 parserOptions: { // 控制是否允许使用某一个ES版本的语法，影响的只是语法检测，不代表某个成员是否可用， // 具体成员是否可用还是得有env中进行配置 ecmaVersion: 11 }, // 用于配置ESLint中某个检验的开启或关闭 rules: { // 'react/jsx-uses-react': 2, // 'react/jsx-uses-vars': 2, }, // plugins: [ // 'react' // ] }
      • yarn webpack

• 现代化项目集成ESLint

  • npm install @vue/cli -g

  • vue create syy-vue-app

    • 根据需要选择对应选项，选择后生成基本项目结构

  • cd syy-vue-app

  • npm run serve

    • OK~

• eslint检查TypeScript

  • npx eslint --init

    • 选项中选择需要TypeScript

  • 项目根目录新建index.ts

    • function foo(ms: string) { console.log(msg) }

foo('hello typescript')

- 修改eslint配置

	- module.exports = { 

// 标记代码的最终运行环境 env: { browser: true, es2020: true }, // 用于继承一些共享的配置 extends: [ 'standard', 'plugin:react/recommended' ], parser: '@typescript-eslint/parser', // 用来设置语法解析器的相关配置 parserOptions: { // 控制是否允许使用某一个ES版本的语法，影响的只是语法检测，不代表某个成员是否可用， // 具体成员是否可用还是得有env中进行配置 ecmaVersion: 11 }, // 用于配置ESLint中某个检验的开启或关闭 rules: { // 'react/jsx-uses-react': 2, // 'react/jsx-uses-vars': 2, }, // plugins: [ // 'react' // ] }

- npx eslint  .\index.ts

	- ok~q

Stylelint的认识

• 使用介绍

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

• 安装

  • npm install stylelint -D

• 测试

  • npx stylelint ./index.css

    • 报错: No configuration provided for

• 解决报错

  • 项目根目录下添加.stylelintrc.js文件

    • module.exports ={ extends: 'stylelint-config-standard' }

  • npm install stylelint-config-standard -D

• npx stylelint ./index.css

  • OK:可以找到css中的问题了

• 自动修复

  • npx stylelint ./index.css --fix

• 检查Sass代码

  • npm install stylelint-config-sass-guidelines -D

• 修改.stylelintrc.js文件

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

• npx stylelint ./index.sass

  • OK:可以找到sass中的问题了

Prettier的使用

• 通用的前端代码格式化工具

• 安装

  • npm install prettier -D

• 使用

  • npx prettier style.css

    • 将格式化的代码直接输出到控制台中

  • npx prettier style.css --write

    • 将格式化的代码直接覆盖写入该文件

  • 批量格式化

    • npx prettier . --write

Git Hooks

• 介绍

  • 背景

    • 问题: 代码提交到仓库之前未执行lint操作
    • 解决: 通过Git Hooks在代码提交前强制lint

  • Git Hooks也称为Git钩子，每个钩子都对应一个任务

  • 通过shell脚本可以编写钩子任务触发时要具体执行的操作

  • .git隐藏目录文件夹中有个叫hooks的文件夹📂，里面存放了一些sample文件，每一个sample文件就代表一种钩子

• eslint结合Git Hooks

  • 背景

    • 问题

      • 很多前端开发者并不擅长使用shell

    • 解决

      • Husky可以实现Git Hooks的使用需求

  • 安装

    • npm install husky -D

  • 在项目根目录下package.json文件中增加husky配置

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

  • 项目根目录下新建index.js文件

    • const a = 1

2222

- git add  .
- git commit -m "333"
- 在项目根目录下package.json文件中修改scripts属性

	- "scripts": {

"test" : "eslint./index.js" }

- 修改index.js文件

	- const a = 1

3333

- git add  .
- git commit -m "444"

	- OK~

- 自动修复并将修正后代码放入暂存区

	- 安装

		- npm install lint-staged -D

	- package.json中增加配置

		- "scripts": {

"test" : "eslint./index.js", "precommit": "lint-staged" },

"lint-staged": { "*.js": [ "eslint", "git add" ] }, "husky": { hooks: { "pre-commit": "npm run precommit" } }

	- 修改index.js文件

		- const a = 1

4444

	- git add  .
	- git commit -m "555"

		- OK~