乐趣区

关于规范化:规范化个人笔记

规范化规范

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

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

为什么有标准规范

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

哪些须要规范化规范

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

施行规范化的办法

  • 编码前人为的规范约定
  • 通过工具实现 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.js

module.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.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}))

  // yarn add gulp-babel @babel/core @babel/preset-env --dev
}

解决全局变量 $

# eslintrc.js

module.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.js

module.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.js

module.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.js

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

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

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

# .stylelintrc.js

module.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"
  ]
}
退出移动版