规范化规范

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

  • 为什么有标准规范
  • 哪些须要规范化规范
  • 施行规范化的办法

为什么有标准规范

  • 软件开发须要多协同，不同开发者具备不同的编码习惯和爱好，不同的爱好减少我的项目保护老本，每个我的项目或者团队须要明确对立的规范

哪些须要规范化规范

  • 代码，文档，甚至是提交日志，开发过程中人为编写的内容，代码标准化标准最为重要（对立关键词和操作符左右空格，对立代码的缩进形式，对立是否应用分号结尾，对立变量函数的命名标准）

施行规范化的办法

  • 编码前人为的规范约定
  • 通过工具实现 Lint（更谨严牢靠，同时能够配合自动化工具，主动查看）

常见的规范化实现形式

  • ESLint 工具应用
  • 定制 ESLint 校验规定
  • ESLint 对 Typescript 的反对
  • ESLint 联合自动化工具或者 Webpack
  • 基于 ESLint 的衍生工具
  • Stylelint 工具的应用 （对css进行校验操作）

ESLint

  • 最为支流的JavaScript Lint 工具， 监测 JS 代码品质
  • ESLint 很容易对立开发者的编码格调
  • ESLint 能够帮忙开发者晋升编码能力

初始化我的项目，装置 ESLint 模块为开发依赖

装置：yarn add eslint --dev

实现 eslint 应用配置，编写问题代码，应用 eslint 执行检测

应用 yarn eslint 文件.js 时，会报错说未找到eslint 配置文件

通过yarn eslint --init 进行命令行交互

  • 只查看语法
  • 查看语法发现问题
  • 查看语法发现问题并且对代码格调校验

装置过后生成 .eslintrc.js 文件

执行 yarn eslint ./文件.js，查看谬误

配置文件

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

env 设置运行环境，参数并不互斥

  1. extends 继承共享配置，能够同时继承多个共享配置，是个数组
  2. parserOptions 设置语法解析器的相干配置，6（es2015）— 12（es2021），只代表语法检测，不代表成员是否可用，成员是否可用通过env环境
  3. rules 设置每个校验规定的开启或敞开
  4. "off"或0-敞开规定
  5. "warn"或1-将该规定作为正告关上（不影响退出代码）
  6. "error"或2-将规定作为谬误关上（触发时退出代码为1）

rules：{
外部的校验规定：off
}
参考文章

  1. globals配置全局成员，新版曾经没了，参考node_modules/eslint-config-standard/eslintrc.json/globals

    jQuery("#abc") // 应用globals:{  "jQuery":"readonly" // 配置}

    配置正文

    给校验的某行增加

    // eslint-disable-line no-template-curly-in-string(禁用的规定)

    配置正文文档地址

联合自动化工具

基于gulp我的项目

装置:

  • yarn add eslint gulp-eslint --dev 装置eslint
  • yarn eslint --init 初始化 .eslintrc配置

  • 装置过后有个报错
    Error: .eslintrc.js » eslint-config-standard: Environment key "es2021" is unknown

    装置：yarn add eslint-config-standard@14.1.1 eslint-plugin-standard --dev.eslintrc.js 中的 env:es2021 改为 env:es2020

    尽管eslint在代码中显示了报错起因，然而在控制台中能够失常运行，并不会报错。

增加plugins.eslint.format() plugins.eslint.failAfterError() 工作流解决

# gulpfile.jsconst 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 }))  // yarn add gulp-babel @babel/core @babel/preset-env --dev}

解决全局变量 $

# eslintrc.jsmodule.exports = {  env: {    browser: true  },  extends: [    'standard'  ],  parserOptions: {    ecmaVersion: 8  },  rules: {  },  globals: {    $: 'readonly' // 增加  }}

此时再运行就能够失常运行了

ESlint 联合 Webpack

通过loader进行eslint校验

步骤

  • 在webpack构建的我的项目中增加eslint-loader yarn add eslint eslint-loader --dev
  • 初始化 .eslintrc.js 配置文件 yarn eslint --init

  • 批改webpack.config.js

    module: {  rules: [    {      test: /\.js$/,      use: [        {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        },        'eslint-loader'  // 增加eslint-loader      ]    }  ]},

    当咱们在js文件预留一个谬误时，执行yarn webpack打包后查看控制台

备注：基于react 增加 eslint-plugin-react

# .eslintrc.jsmodule.exports = {  rules:{    'react/jsx-uses-react':2, // 2就是不校验    'react/jsx-uses-vars':2  // App is defined but never-unsed-vars  },  plugins:[    'react' // eslint-plugin-react  ]}

现代化开发基于脚手架，增加eslint

  • yarn add @vue/cli 装置
  • yarn vue create mc-app 创立vue框架并配置
  • yarn serve 运行

eslint 对 ts检测

  • yarn add typescript --dev
  • yarn add eslint --dev
  • yarn eslint --init

初始化实现后，会主动给配置文件增加parser解析器，解析ts语法

# .eslintrc.jsmodule.exports = {  env: {    browser: true,    es2020: true  },  extends: [    'standard'  ],  parser: '@typescript-eslint/parser',  parserOptions: {    ecmaVersion: 11  },  plugins: [    '@typescript-eslint'  ],  rules: {  }}

执行yarn eslint ./index.ts 执行某个ts文件

Stylelint

款式代码查看规定

提供了cli工具疾速调用，能够应用（Sass，Less，PostCss），反对Gulp，Webpack集成

装置：yarn add stylelint --dev

手动配置: .stylelintrc.js，

校验css装置配置模块：yarn add stylelint-config-standard --dev

# .stylelintrc.jsmodule.exports={  extends:"stylelint-config-standard" // 配置继承模块}

执行：yarn stylelint xx.css ，就能够看到语法校验报错了

校验sass：yarn add stylelint-config-sass-guidelines --dev

# .stylelintrc.jsmodule.exports={  extends: [    "stylelint-config-standard",    "stylelint-config-sass-guidelines"  ]}

执行：yarn stylelint xx.sass ，就能够看到stylelint报错了

Prettier应用

装置：yarn add prettier --dev
执行：yarn prettier ./文件 --write 会将所有文件格式化

git hooks

代码在提交至近程仓库之前未执行lint工作，通过git hooks在代码提交前强制lint

git hooks也称钩子，每个钩子都对应一个工作，通过脚本编写钩子工作触发具体执行内容,查看.git/hooks下钩子文件

Husky包能够实现Git Hooks的应用需要,在不编写shell的前提下应用hooks的性能

装置：yarn add husky --dev
配置 package.json

"husky":{  "hooks":{    "pre-commit":"yarn eslint ./文件名"   // 给.git/hook文件内的 pre-commit钩子增加执行  }}

配置后在提交git commit -m "xx"时会触发pre-commit钩子并执行yarn eslint

解决commit时查看后的代码配合lint-staged

配置装置: yarn add lint-staged --dev
配置 package.json

"husky":{  "hooks":{    "pre-commit": "yarn lint-staged" // 提交后执行lint-staged内的工作  }},"lint-staged":{  "*.js":[  // 增加后续工作    "eslint",    "git add"  ]}