ESLint介绍 ----安装配置

规范化介绍

• 为什么要有规范标准
  软件开发需要多人协同，不同程序员具有不同的编码习惯和喜好，不同的喜好增加项目维护成本，因此，每个项目或者团队需要明确统一的标准
• 哪里需要规范化标准
  代码：符合web开发的基本原则、文件命名规范、HTML规范、CSS规范、JS书写规范、图片规范、其他未考虑到规范；
  开发过程中人为编写的成果物，如接口文档、测试用例、日志（请求日志、错误日志~）
• 实施规范化的方法
  编码前人为的标准约定、 通过工具实现 Lint

EsLint 介绍

ESLint中文网：http://eslint.cn/

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

规范是程序员的根本，入门第一步，从规范代码开始，而ESLint就是一款专门用于Javascript/ESscript代码一致性的“插件”，基于node.js,或者你可以看做是项目构建系统的一部分。它的根本目的是统一项目的代码风格规范，养成规范的写代码习惯，减少不必要的错误和隐患。

ESLint 安装

确保你的电脑安装了 node 和 npm 环境

了解ESLint常见的语法规则
详细的ESLint语法规则，请参考官方文档： https://eslint.org/docs/rules/

配置VSCode

1. 安装插件

2. vscode设置里面的配置文件json

// setting.json文件内容
{
    //ESLint 插件的配置
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },


    // prettier 配置路径
    "prettier.configPath": "C:\\Users\\24107\\.prettierrc",
    "eslint.alwaysShowStatus": true,
    "prettier.trailingComma": "none",
    "prettier.semi": false,
    // 每行文字个数超出此限制将会被迫换行
    "prettier.printWidth": 300,
    // 使用单引号替换双引号
    "prettier.singleQuote": true,
    "prettier.arrowParens": "avoid",
    // 设置 .vue 文件中，HTML代码的格式化插件
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.ignoreProjectWarning": true,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": false
        },
        "prettier": {
            "printWidth": 300,
            "trailingComma": "none",
            "semi": false,
            "singleQuote": true,
            "arrowParens": "avoid"
        }
    },

    "workbench.colorTheme": "Default Dark+",
    "editor.linkedEditing": true,
    "workbench.iconTheme": "material-icon-theme",
    "window.zoomLevel": 2,
    "security.workspace.trust.untrustedFiles": "open",
    "editor.tabSize": 2,
    // 自动加逗号的，回到setting文件，注释掉"editor.formatOnSave": true,
    // "editor.formatOnSave": true,
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

ESLint 附带有大量的规则，修改规则应遵循如下要求：

• “off” 或 0 - 关闭规则
• “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

3. 在"prettier.configPath": "C:\Users\自己用户名\.prettierrc"新建一个.prettierrc文件，写入内容：

{"semi": false, "singleQuote": true, "printWidth": 300}

.prettierrc文件地址如下：

4. 格式化文档选择： prettierrc 设置为默认

遇到不熟悉的规则，建议直接去官方中文查找，官方文档： https://eslint.org/docs/rules/