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

规范化规范

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

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

为什么有标准规范

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

哪些须要规范化规范

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

施行规范化的办法

• 编码前人为的规范约定
• 通过工具实现 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
}
参考文章

4. 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"
  ]
}