规范化标准及ESLint使用

为什么需要规范标准

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

哪里需要规范化标准

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

实施规范化的方法

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

ESLint使用

ESlint是最为主流的 JavaScript Lint 工具，用于监测JS代码质量，通过ESLint很容易统一开发者的编码风格，例如缩进、换行、分号等等，并且ESLint可以避免代码中存在的潜在问题，如变量声明未使用等，从而提高代码质量；并且ESLint可以帮助开发者提升编码能力

安装

• yarn init --yes初始化项目
• 安装ESLint模块 yarn add eslint --dev，node-modules/.bin目录生成eslint的cli程序
• 使用yarn eslint --version查看eslint的版本

使用

• 首先使用yarn eslint --init初始化.eslintrc.js文件，选择相应配置后会自动生成.eslintrc.js

image-20210124172343450.png

• 接着使用yarn eslint ./index.js，当代码中出现语法错误时，eslint无法检查问题代码和代码风格

  
  image-20210124172527664.png

• 使用命令yarn eslint .\index.js --fix，自动修正风格代码

• 其余代码，自己手动修改

ESLint配置文件解析

module.exports = {
  // 标记代码最终的运行环境，eslint根据环境信息判断成员是否可用
  env: {
    browser: true, // 修改为false，使用document时代码依旧没报错，因为eslint-config-standard下的eslintrc.json文件将document等都设置为全局只读成员，而这里的配置继承了standard，所以这里的设置不会影响，而像alert这种就会收到影响
    es2021: true,
  },
  extends: ['standard'], // 继承共享配置
  parserOptions: {
    // 设置语法解析器，控制是否使用某一个es版本的语法 只是检测语法，而不是检测某个成员是否可用
    ecmaVersion: 12,
  },
  rules: {
    'no-alert': "error"
  }, // 配置eslint规则
  globals: {
    // 额外声明项目中可以使用的全局成员
    'jQuery': 'readonly'
  }
}

ESLint配置注释

如果代码中有用的代码违反了ESLint的检查规范，那么需要通过注释的方式解决，更多解决办法

const str1 = '${name} is a coder' // eslint-disable-line no-template-curly-in-string
console.log(str1)
// 不直接使用eslint-disable-line 因为会屏蔽掉此行中的所有ESLint错误

ESLint结合自动化工具

1. 首先添加插件gulp-eslint

2. 修改js文件的操作如下，先进行eslint的检查，在执行babel转换等

   const script = () => {
     return src("src/assets/scripts/*.js", { base: "src" })
       // 在babel处理之前进行ESLint的操作
       .pipe(plugins.eslint())
       .pipe(plugins.eslint().format()) // format（）将lint结果输出到控制台 使进程退出时具有错误代码
       .pipe(plugins.eslint().failAfterError()) // lint错误，终止任务
       .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
       .pipe(dest("temp"))
       .pipe(bs.reload({ stream: true }));
   };
   

3. 初始化eslint配置文件

4. yarn gulp script直接运行打包，eslint报错详情

ESLint结合Webpack

1. 安装eslint和eslint-loader

2. 在rules中实现eslint检查

   module.exports = {
     ...
     module: {
       rules: [
         {
           test: /\.js$/,
           use: [
             'babel-loader',
             'eslint-loader' // eslint需放在babel之前
           ]
         },
         {
           test: /\.js$/,
           use: 'eslint-loader',
           enforce: 'pre' // 或使用enforce属性指定eslint-loader的执行顺序
         }
       ]
     },
     ...
   }
   

3. 执行yarn webpack打包过程会执行eslint检验

现代化项目集成ESLint

像Vue和React主流框架，都已经在CLI工具中集成了ESLint，不需要单独配置

创建项目时根据提示选择lint检验即可

ESLint检查TypeScript

在yarn eslint --init的过程中，是否使用Typecript时，选择yes后，会自动安装typeSctipt需要的模块

// .eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "standard"
    ],
    "parser": "@typescript-eslint/parser", // 使用typescript解析器
    "parserOptions": {
        "ecmaVersion": 11
    },
    "plugins": [
        "@typescript-eslint" // 加载typescript规则，等待被配置后使用
    ],
    "rules": {
    }
}

StyleLint

CSS代码的lint操作，一般使用Stylelint工具

• 提供默认的代码检查规则，可以在配置中选择性的开启或关闭某项规则
• 提供CLI工具，可以在终端中执行校验命令
• 通过插件支持 Sass Less PostCSS 这些CSS衍生语法的代码检查
• 支持 Gulp 或 Webpack 集成

使用步骤

1. 安装stylelint模块，yarn add stylelint -D

2. Stylelint没有提供像ESLint一样的--init初始化配置文件的命令，手动创建.stylelintrc.js文件，文件格式和eslintrc.js相同

3. 通过npm安装stylelint-config-standard和stylelint-config-sass-guidelines模块，注意这里的extends需要使用完整名称

   module.exports = {
     extends: [
       'stylelint-config-standard', // stylelint的推荐配置
       'stylelint-config-sass-guidelines', // sass代码进行stylelint
     ],
   }
   

4. yarn stylelint src/.css --fix或yarn stylelint src/.scss --fixs检验css代码，需要注意用/而不是\，否则会报以下错误
   

   image-20210125103503997.png

Prettier的使用

Prettier是近几年使用频率特别高的通用的前端代码格式化工具，几乎可以完成所有类型代码的格式化工作

安装使用：

1. 安装prettier，yarn add prettier --dev，会在node_module/.bin目录生成cli程序
2. 通过yarn prettier xxx --write，不加--write会将格式化的代码输出到控制台，--write会覆盖修改源文件

ESLint结合GIt Hooks

Hook 就是在执行某个事件之前或之后进行一些其他额外的操作

通过lint工具确保代码规范的落地，但是也会有遗漏。比如有人未使用lint工具，就将代码提交到远程仓库

相比约定，通过Git Hooks在代码提交前强制lint会更好一些

• Git Hooks

  Git钩子，每个钩子都对应一个任务或具体的Git操作，比如push、commit等，通过编写shell脚本，可以编写钩子具体执行的任务

• Git Hooks使用

  1. git init创建git仓库

  2. 在.git/hooks目录中，每个.sample既是一个钩子

  3. 修改commit提交使用到的钩子pre-commit.sample（只有去掉.sample后缀才能生效,并且不能全局配置，只能在配置的项中生效），当执行commit时就会触发这个钩子所定义的任务

     #!/bin/sh
     echo "before commit"
     

  4. 执行git add .，git commit -m "xxx"后，可以看到控制台的输出

     
     image-20210126110335477.png

• Husky配置

  本地配置好的Git Hooks，不能上传到远程仓库。此时就需要使用Hysky，Husky是一个让配置Git钩子变得更简单的工具，像webpack、babel等，Husky原理是在项目根目录下一个配置文件（或package.json），它会自动在.git/目录下增加相应的钩子，这样就可以在团队中使用Git Hook了

  1. 安装husky，yarn add husky --dev，此时在.git/hooks目录下会多一些Husky自定义的钩子

     image-20210126114111692.png

yarn remove husky 卸载Husky后会同步删除Husky创建的 Git hooks 钩子

2. 在项目根目录创建.huskyrc或在package.json中添加配置

   // package.json
   "husky": {
       "scripts": {
           "lint": "eslint ."
         },
       "hooks": {
           "pre-commit": "npm run lint"
       }
   },
   // 或创建.huskyrc文件
   {
       "hooks": {
           "pre-commit": "npm run lint"
       }
   }
   

3. 执行提交操作，会先进行eslint校验

• lint-staged

  husky可以实现在代码提交前执行lint校验，但是校验的是项目全部文件，而不是当前提交文件。lint-staged就是解决这个问题，其中staged指的是Git的暂存区

  使用步骤：

  1. 安装lint-staged，yarn add --dev lint-staged

  2. 在package.json配置任务，并添加执行lint-staged命令的脚本，配合husky使用

     {
       "scripts": {
         "precommit": "lint-staged"
       },
       "husky": {
         "hooks": {
           "pre-commit": "npm run precommit"
         }
       },
       "lint-staged": {
        // 多任务使用数组
         "*.js": "eslint"
       }
     }
     

     也可以使用多任务，或者使用prettier的校验

     "lint-staged": {
       "*.js": [
           // "prettier --write", // prettier校验
           "eslint --fix",
           "git add"
       ]
     }