关于前端:ESLint-介绍

ESLint 介绍

原文链接：https://note.noxussj.top/?source=sifo

ESLint 是一款插件，次要用来检测编写的（JavaScript）代码是否符合规范。当然在一个团队中也会自定义一些标准条件。另外失常状况下咱们不须要独自装置 ESLint 去应用，这里只是为了做演示。例如 vue-cli 脚手架搭建的我的项目个别都是帮你集成好了。

ESLint 官网文档

https://eslint.bootcss.com

装置

1. 搭建一个空我的项目，并且通过命令 npm init 初始化 package.json

2. 通过 yarn add eslint 命令装置 ESLint 插件。

3. 通过 npx eslint –init 命令初始化 ESLint 配置文件。

4. 配置文件初始化结束后，会在对应的目录下生成 ESLint 配置文件，前面能够在这里批改 ESLint 校验的规定。

5. 编写不符合规范的代码进行测试。

6. 通过 npx eslint main.js 命令执行 ESLint 校验代码。

代码中提醒变量定义了却没有应用。以及文件开端须要有一个换行符。

ESLint 配置文件初始化步骤剖析

How would you like to use ESLint（您想如何应用 ESLint）？● To check syntax only（只查看语法）● To check syntax and find problems（查看语法并发现问题）✔ To check syntax, find problems, and enforce code style（查看语法、发现问题并强制执行代码款式）

What type of modules does your project use（您的我的项目应用什么类型的模块化标准）？✔ JavaScript modules (import/export)（ESM 模块化标准）● CommonJS (require/exports)（Common JS 模块化标准）● None of these（这些都不是）

Which framework does your project use（您的我的项目应用哪个框架）？● React
  ● Vue.js
  ✔ None of these（这些都不是）

Does your project use TypeScript（您的我的项目应用 TypeScript 吗）？✔ No
  ● Yes

Where does your code run（您的代码运行在什么环境）？✔ Browser（浏览器环境）● Node（node 脚本环境）

How would you like to define a style for your project（您心愿如何定义我的项目的款式格调）？✔ Use a popular style guide（应用风行格调指南）● Answer questions about your style（依据答复相干问题制订格调）● Inspect your JavaScript file (s)（依据本地文件制订格调）

Which style guide do you want to follo（您想遵循哪种格调指南）？● Airbnb : https://github.com/airbnb/javascript
  ✔ Standard : https://github.com/standard/standard
  ● Google : https://github.com/google/eslint-config-google
  ● XO : https://github.com/xojs/eslint-config-xo

What format do you want your config file to be in（您心愿配置文件采纳什么格局）？● JavaScript
  ● YAML
  ✔ JSON

Would you like to install them now（是否当初装置这些依赖）？● No
  ✔ Yes

Which package manager do you want to use（您要应用哪个包管理器）？● npm
  ✔ yarn
  ● pnpm

配置规定

在继承支流标准的前提下，咱们还能够额定指定本人的 ESLint 配置，将会笼罩掉原有的 standard 规定。ESLint 的规定有很多，这边次要列举一些比拟常见的。

官网规定文档

https://eslint.bootcss.com/docs/rules

.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["standard"],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {"jsx-quotes": ["error", "prefer-double"], // 必须应用单引号
        "indent": ["error", 4], // 必须应用 4 个缩进的空格
        "semi": ["error", "always"], // 代码结尾必须应用分号
        "comma-dangle": ["error", "never"] // 对象 / 数组最初一个元素不能有逗号
    }
}

原文链接：https://note.noxussj.top/?source=sifo