前端规范化标准

规范化标准是践行前端工程化的重要组成部分。

为什么需要规范化标准
软件开发通常需要多人协同，不同的开发者有不同的编码习惯和喜好，不同的习惯和喜好会增加项目维护成本，所以每个项目或团队需要明确统一的标准。

哪里需要规范化标准
开发过程中人为编写的一切。如代码、文档、纪要甚至是提交日志，其中代码的标准化规范尤为重要，因为代码的质量关于项目的质量以及项目后期的维护成本。

实施规范化的方法

1. 编码前人为约定
2. 通过工具实现Lint

ESLint

1. 基本介绍

   1. ESLint是当前最为主流的javascript Lint 工具，用于监测 js 代码质量
   2. ESLint 很容易统一开发者的编码风格

2. ESLint安装：直接使用yarn add eslint/npm install eslint 安装即可

3. ESLint使用

   1. 通过yarn或npx来运行eslint ，或者在package.json的scripts来配置命令，然后通过npm或yarn来运行。命令行格式为：eslint file ， file 可以是一个指定的文件，也可以是一个路径通配符。
      

   2. 运行eslint检查代码之前，需要先新建一个eslint的配置文件.eslintrc文件(可以通过eslint --init命令来生成配置文件)，文件后缀名可以是.js，.json亦或是没有后缀名。或者在package.json中添加 eslintConfig 配置来配置eslint。

      "scripts": {
             },
      "eslintConfig": {
             
        "env": {
              
          "browser": false, 
          "es2021": true
        },
        "extends": [
          "standard"
        ],
        "parserOptions": {
             
          "ecmaVersion": 12
        },
        "rules": {
             
        }
      },
      

   3. 运行eslint之后，首先会输出代码语法错误，需要手动将语法错误改正过来之后，再次运行eslint命令，才会去检查代码风格。
      

   4. 运行eslint file --fix可以修正一些代码风格，然后将一些仍未被修正的语法问题输出到控制台。需要开发人员手动一条一条修复。
      

4. eslint 配置文件配置值选项说明

   1. env：指定你想启用的环境，并设置它们为 true，可以同时开启多个环境。
      下面是eslint支持的环境表
      
      如果想在一个特定的插件中使用一种环境，确保提前在 plugins 数组里指定了插件名，然后在 env 配置中不带前缀的插件名后跟一个 /。

      module.exports = {
             
        env: {
              // 运行环境设置
          browser: false, // 如果设置为false，则不能使用除了globals中定义的全局变量，如window，alert，document等
          es2021: true,
          'example/custom': true
        },
        pugins: ['example'],
        extends: [// 继承的配置
          'standard'
        ],
        parserOptions: {
             
          ecmaVersion: 12
        },
        rules: {
             
        }
      }
      

   2. extends：指定继承某一些共享配置

   3. parserOptions：指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。该选项只是检测语法，支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型。对于 ES6 语法，使用 { "parserOptions": { "ecmaVersion": 6 } }；对于新的 ES6 全局变量，使用 { "env":{ "es6": true } }. { "env": { "es6": true } } 自动启用es6语法，但 { "parserOptions": { "ecmaVersion": 6 } } 不自动启用es6全局变量。

   4. rules：eslint规则设置。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

      1. off 或 0： 表示 关闭规则
      2. warn 或 1 ：开启规则，使用警告级别的错误：warn
      3. error 或 2 ： 开启规则，使用错误级别的错误：