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