一、eslint简介
ESLint 是一个用于识别和报告 JavaScript 代码中潜在问题的静态代码分析工具。它可以帮助开发人员和团队维护一致的代码风格，减少错误，并确保代码质量。以下是 ESLint 的一些关键特点和功能：
1.静态代码分析：ESLint 通过扫描 JavaScript 代码并应用一组配置的规则来进行静态代码分析。它可以检测代码中的潜在问题，例如语法错误、不一致的代码风格和常见的错误模式。
2.可配置性：ESLint 允许开发人员根据其项目需求和偏好定制规则集。开发人员可以通过配置文件指定使用哪些规则、规则的严格程度以及需要忽略哪些规则。
3.插件化：ESLint 支持插件系统，允许开发人员编写自定义规则或使用社区编写的插件来扩展其功能。这使得开发人员可以根据需要扩展 ESLint 的功能。
4.集成性：ESLint 可以与许多常见的代码编辑器和集成开发环境（IDE）集成，如 Visual Studio Code、Sublime Text 和 Atom。这样可以在开发过程中实时检测并显示代码问题。
5.自动化：ESLint 可以作为构建工具的一部分运行，也可以与持续集成（CI）工具集成，以确保团队成员提交的代码符合规范。
6.广泛的规则集：ESLint 提供了许多内置规则，涵盖了从代码风格到最佳实践的各种方面。开发人员可以根据自己的需求选择启用或禁用这些规则。
二、prettier简介
Prettier 是一个流行的代码格式化工具，旨在帮助开发人员轻松地维护一致的代码风格。与 ESLint 不同，Prettier 的重点不是在于发现和报告代码中的问题，而是专注于统一整个项目中的代码样式，确保代码具有一致的格式。以下是 Prettier 的一些关键特点和功能：
1.一致的代码格式：Prettier 会自动重新格式化代码，确保整个项目的代码风格保持一致。这包括缩进、换行、空格、引号风格等方面。
2.零配置：Prettier 提倡零配置原则，意味着你无需花时间配置各种规则。它有一个固定的代码风格，你只需安装并运行它，它会自动处理代码格式化。
3.支持多种语言：除了 JavaScript，Prettier 还支持格式化许多其他语言的代码，如 TypeScript、CSS、HTML、JSON、Markdown 等。
4.易于集成：Prettier 可以与许多编辑器和 IDE 集成，包括 Visual Studio Code、Sublime Text、Atom 等。它也可以作为构建流程的一部分自动运行。
5.自动格式化：Prettier 可以在保存文件时或在提交代码之前自动格式化代码，确保代码始终保持一致的风格。
6.忽略特定部分：虽然 Prettier 旨在提供一致的代码格式，但你可以使用特定的注释来告诉 Prettier 忽略某些部分，以保留特定的格式。
三、配置eslint、prettier
1.安装依赖
yarn add eslint eslint-plugin-vue eslint-plugin-import eslint-import-resolver-alias -D 或者使用 npm init @eslint/config 按照提示安装
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
yarn add vue-eslint-parser -D
2.根目录新建.eslintrc.config.cjs，import/order中pathGroups会根据路径分组如果路径别名配置是@/可不用安装eslint-import-resolver-alias，如果是@需要安装eslint-import-resolver-alias解析路径别名
import vuePlugin from "eslint-plugin-vue";
import prettierPlugin from "eslint-plugin-prettier";
import vueParser from "vue-eslint-parser";
import importPlugin from "eslint-plugin-import";
export default {
files: ['**/*.{js,ts,jsx,tsx,html,vue}'],
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: vueParser,
parserOptions: {
extraFileExtensions: ['.vue'],
ecmaFeatures: {
jsx: true
}
},
globals: {
browser: true,
es2021: true,
node: true
}
},
plugins: {
vue: vuePlugin,
import: importPlugin,
prettier: prettierPlugin
},
ignores: ['src/assets/'],
settings: {
'import/resolver': {
'alias': {
'map': [
['@components', './src/components'],
['@hooks', './src/hooks'],
['@utility', './src/utility'],
['@store', './src/store'],
['@common', './src/common'],
['@lang', './src/lang'],
['@pages', './src/pages']
]
}
}
},
rules: {
'vue/v-on-style': 'error', //禁止使用 v-on 指令的风格
'vue/no-v-text': 'error', //禁止使用 v-text 指令
'vue/multi-word-component-names': 'off', //强制 Vue.js 组件的名称采用多个单词的命名约定
'vue/require-v-for-key': 'error', //使用v-for，必须带key
'vue/v-bind-style': 'error', //禁止使用 v-bind 指令的风格
'vue/no-empty-component-block': 'error', //禁止在组件中出现空的 <template>、<script> 或 <style> 块
'vue/no-use-v-if-with-v-for': 'error', //不允许在同一元素上同时使用 v-if 和 v-for
'vue/mustache-interpolation-spacing': 'error', //强制插值表达式周围的空格
'vue/require-default-prop': 'off', //要求 prop 定义了默认值
'vue/no-reserved-component-names': 'off', //防止 Vue 组件与标准 HTML 元素和内置组件之间的名称冲突
'vue/space-infix-ops': 'error', //操作符周围有空格
'vue/space-unary-ops': 'error', //要求一元操作符周围有空格
'vue/require-valid-default-prop': 'off', //不合法的默认值
'vue/no-dupe-keys': 'error', //检测和防止重复的 key 属性
'vue/require-prop-comment': 'error', //要求在 prop 上有注释
'vue/no-useless-template-attributes': 'error', //防止标<template>出现任何无用的属性。
'vue/valid-attribute-name': 'error', //校验无效的属性
'vue/no-spaces-around-equal-signs-in-attribute': 'error', //不允许属性中的等号周围有空格
'vue/attribute-hyphenation': ['error', 'never'], //标签属性使用驼峰
'vue/script-indent': ['error', 4], //保持script缩进样式一致
'vue/html-indent': ['error', 4, { //保持标签缩进样式一致
'alignAttributesVertically': true,
}],
'vue/v-on-event-hyphenation': ['error', 'never', { //事件名不使用带连字符的名称，如：custom-event报错，customEvent正确
'autofix': true,
}],
'vue/block-order': ['error', { //在单文件组件中 <template>、<script> 和 <style> 的顺序正确
'order': ['template', 'script[setup]', 'style[scoped]', 'style:not([scoped])']
}],
'vue/html-quotes': ['error', 'double', { //强制HTML 属性值为双引号
'avoidEscape': false
}],
'vue/html-self-closing': ['error', { //无内容元素自闭合标签样式
'html': {
'void': 'never',
'normal': 'never',
'component': 'never'
}
}],
'vue/html-closing-bracket-newline': ['error', { //闭合标签的右括号之前不使用换行符
'singleline': 'never',
'multiline': 'never'
}],
'vue/html-closing-bracket-spacing': ['error', { //标签闭合是否有空格
'startTag': 'never',
'endTag': 'never',
}],
'vue/first-attribute-linebreak': ['error', { //Vue模板中第一个属性之前不使用换行符
'singleline': 'beside',
'multiline': 'beside'
}],
"vue/max-attributes-per-line": ["error", { //Vue模板中每行属性最大数量
"singleline": 3,
"multiline": 3
}],
'vue/attributes-order': ['error', { //标签内属性顺序
'order': [
'GLOBAL', //id
'LIST_RENDERING', //v-for
'UNIQUE', //key、ref
'OTHER_ATTR', //prop、v-bind
'SLOT', //v-slot
'DEFINITION', //v-is
'CONDITIONALS', //v-if、v-else-if、v-else、v-show、v-cloak
'TWO_WAY_BINDING', //v-model
'EVENTS', //@click、v-on
'OTHER_DIRECTIVES', //自定义指令
'CONTENT', // v-text、v-html
'RENDER_MODIFIERS', //v-once、v-pre
],
'alphabetical': true //是否安装字母排序
}],
'vue/block-lang': ['error', { //单文件组件中指定 <template>、<script> 和 <style> 的语言类型
'style': {
'lang': 'scss'
}
}],
'vue/v-slot-style': ['error', { //使用 v-slot 指令的风格
'atComponent': 'longform',
'named': 'longform',
'default': 'longform',
}],
'vue/no-duplicate-attributes': ['error', {//不允许重复的attributes，除了class、style
'allowCoexistClass': true,
'allowCoexistStyle': true
}],
'import/first': 'error', //确保所有导入出现在其他语句之前
'import/order': ['error', {
'groups': ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], //按组排序
'pathGroups': [{ //按照路径分组
'pattern': '@common/**',
'group': 'internal',
'position': 'after'
}, {
'pattern': '@utility/**',
'group': 'internal',
'position': 'after'
}, {
'pattern': '@hooks/**',
'group': 'internal',
'position': 'after'
}, {
'pattern': '@lang/**',
'group': 'internal',
'position': 'after'
}, {
'pattern': '@store/**',
'group': 'internal',
'position': 'after'
}, {
'pattern': '@components/**',
'group': 'internal',
'position': 'after'
}, {
'pattern': '@pages/**',
'group': 'internal',
'position': 'after'
}, {
'pattern': '@/**',
'group': 'internal',
'position': 'after'
}],
'newlines-between': 'never', //不允许在整个导入部分中换行
}],
'default-param-last': 'error', //默认参数在最后
'default-case-last': 'error', //switch的default在最后
'eqeqeq': 'error',//要求使用 === 和 !==
'no-var': 'error', //禁止使用var，强制使用const、let
'no-unused-vars': 'error', //禁止未使用的变量
'no-nested-ternary': 'error',//禁止嵌套的三元表达
'no-multiple-empty-lines': 'error', //不允许多个空行
'no-multi-spaces': 'error', //不允许多个空格
'no-trailing-spaces': 'error', //不允许行尾空格
'no-whitespace-before-property': 'error', //不允许属性前有空格
'no-useless-constructor': 'error', //不允许没有必要的构造函数
'no-useless-rename': 'error', //不允许没有必要的重命名
'no-useless-return': 'error', //不允许没有必要的return
'no-void': 'error', //不允许使用void
'no-with': 'error', //不允许使用with
// 'no-undef': 'error', //不允许使用未定义的变量
'no-underscore-dangle': 'error', //不允许使用下划线
'no-empty': 'error', //不允许空块
'no-empty-function': 'error', //不允许空函数
'no-redeclare': 'error', //不允许重复声明
'space-infix-ops': 'error',//操作符周围有空格
'space-unary-ops': 'error',//要求一元操作符周围有空格
'prettier/prettier': 'error'
}
};
3.根目录新建.prettierrc.js
export default {
requirePragma: true,//指定是否需要在文件顶部添加特定的注释来启用 Prettier。
insertPragma: true,//指定是否在文件顶部插入一个特定的注释来标记文件已经被 Prettier 格式化过。
printWidth: 500, //指定代码行的最大打印宽度
tabWidth: 4, //指定一个制表符等于多少空格
useTabs: true, //使用制表符而不是空格缩进
semi: true, //在语句末尾使用分号
singleQuote: true, //是否使用单引号
quoteProps: "as-needed", //仅在需要时在对象属性周围添加引号
jsxSingleQuote: false, //在JSX中使用单引号还是双引号
trailingComma: "none", //在多行对象字面量和数组字面量的最后一个元素后加逗号
bracketSpacing: true, //在大括号内部是否加空格
bracketSameLine: false, //将大括号放在控制语句的同一行
jsxBracketSameLine: false, //在JSX中的大括号内部是否加空格。
arrowParens: "always", //箭头函数参数周围的括号不能省略
proseWrap: "preserve",//指定Markdown保留原始代码的格式
htmlWhitespaceSensitivity: "strict", //指定HTML标签的空格敏感度
vueIndentScriptAndStyle: false, //指定Vue文件中script和style标签的缩进。
endOfLine: "lf", //指定文件末尾使用的换行符类型
embeddedLanguageFormatting: "auto", //指定是否格式化嵌入式语言
singleAttributePerLine: false, //强制每行使用单个属性
};
四、eslint-plugin-vue
slint-plugin-vue 插件提供了一系列用于检测和规范 Vue.js 代码的规则。这些规则涵盖了 Vue.js 组件、指令、模板等方面，帮助开发者编写更加规范和高质量的 Vue.js 代码。官网地址：https://eslint.vuejs.org/user-guide/
1.vue3扩展配置
- plugin:vue/base：基本配置。它包含了一些基本的 Vue 规则，可以帮助你检测一些常见的问题，但并不涵盖所有的最佳实践。
- plugin:vue/vue3-essential：基本推荐配置。它包含了一组必要的规则，旨在帮助你编写符合 Vue 3 最佳实践的代码。
- plugin:vue/vue3-strongly-recommended：强烈推荐配置。它比 vue3-essential 更严格，包含了更多的规则，以确保代码质量更高。
- plugin:vue/vue3-recommended：推荐配置。它是最为全面和严格的配置，包含了一系列规则，旨在帮助你遵循 Vue 3 的最佳实践和规范
2.通用规则配置 - vue/comment-directive：禁用或启用特定的注释指令。
- vue/jsx-uses-vars：检查未使用的 JSX 变量。
- vue/multi-word-component-names：强制组件名使用多个单词。
- vue/no-arrow-functions-in-watch：不允许在 watch 中使用箭头函数。
- vue/no-async-in-computed-properties：不允许在计算属性中使用异步操作。
- vue/no-child-content：不允许在单文件组件的根元素中有子内容。
- vue/no-computed-properties-in-data：不允许在 data 中定义计算属性。
- vue/no-dupe-keys：不允许在对象字面量中出现重复的键名。
- vue/no-dupe-v-else-if：允许在 v-else-if 指令中出现重复的条件。
- vue/no-duplicate-attributes：不允许在标签中出现重复的属性。
- vue/no-export-in-script-setup：不允许在
五、eslint-plugin-import
eslint-plugin-import 是一个用于ESLint的插件，旨在提供一组规则来帮助检测和维护JavaScript模块导入语句的正确性。它可以帮助你确保在项目中正确地导入和使用模块，避免常见的错误和问题。git地址：https://github.com/import-js/eslint-plugin-import
1.export：禁止任何无效的导出，即相同名称的重新导出。
2.no-deprecated：禁止导入使用了 @deprecated 文档标记的名称。
3.no-empty-named-blocks：禁止空的命名导入块。
4.no-extraneous-dependencies：禁止使用多余的包。
5.no-mutable-exports：禁止使用 var 或 let 进行可变导出。
6.no-named-as-default：禁止将导出的名称用作默认导出的标识符。
7.no-named-as-default-member：禁止将导出的名称用作默认导出的属性。
8.no-unused-modules：禁止没有导出的模块，或者没有匹配导入的导出在另一个模块中。
9.no-amd：禁止 AMD 的 require 和 define 调用。
10.no-commonjs：禁止 CommonJS 的 require 调用和 module.exports 或 exports.。
11.no-import-module-exports：禁止使用带有 CommonJS module.exports 的 import 语句。
12.no-nodejs-modules：禁止 Node.js 内置模块。
13.unambiguous：禁止潜在模糊的解析目标（脚本 vs. 模块）。
14.default：确保存在默认导出，给定默认导入。
15.named：确保命名导入与远程文件中的命名导出对应。
16.namespace：确保导入的命名空间包含解引用的属性，因为它们被解引用。
17.no-absolute-path：禁止使用绝对路径导入模块。
18.no-cycle：禁止模块导入具有依赖路径返回到自身的模块。
19.no-dynamic-require：禁止使用表达式的 require() 调用。
20.no-internal-modules：禁止导入其他模块的子模块。
21.no-relative-packages:禁止通过相对路径导入包。
22.no-relative-parent-imports：禁止从父目录导入模块。
23.no-restricted-paths：强制执行给定文件夹中可以导入的文件。
24.no-self-import：禁止模块导入自身。
25.no-unresolved：确保导入指向可以解析的文件/模块。
26.no-useless-path-segments：禁止在导入和 require 语句中使用不必要的路径段。
27.no-webpack-loader-syntax：禁止在导入中使用 webpack loader 语法。
28.consistent-type-specifier-style：强制或禁止使用命名导入的内联类型标记。
29.dynamic-import-chunkname：强制使用 webpackChunkName 的前导注释来动态导入。
30.exports-last：确保所有导出出现在其他语句之后。
31.extensions：确保在导入路径中一致使用文件扩展名。
32.first：确保所有导入出现在其他语句之前。
33.group-exports：更喜欢将命名导出分组在单个导出声明中。
34.max-dependencies：强制模块可以具有的最大依赖关系数。
35.newline-after-import：强制在导入语句后使用换行符。
36.no-anonymous-default-export：禁止匿名值作为默认导出。
37.no-default-export：禁止默认导出。
38.no-duplicates：禁止在多个位置重复导入相同模块。
39.no-named-default：禁止命名默认导出。
40.no-named-export：禁止命名导出。
41.no-namespace：禁止命名空间（也称为“通配符”）导入。
42.no-unassigned-import：禁止未分配的导入。
43.order：强制模块导入顺序中的约定。
44.prefer-default-export：如果模块导出，请更喜欢默认导出。
六、eslint-plugin-unicorn
eslint-plugin-unicorn 是一个流行的 ESLint 插件，旨在提供一组有用的规则，帮助开发人员编写更加健壮和优质的 JavaScript 代码。这个插件包含了一系列规则，涵盖了各种代码质量和最佳实践方面的建议。git地址：https://github.com/sindresorhus/eslint-plugin-unicorn/blob/231529aee793251f30416b93dc3d5f9bfa27ee47/readme.md
1.better-regex：改善正则表达式，使其更短、一致和更安全。
2.catch-error-name：强制在 catch 子句中使用特定的参数名称。
3.consistent-destructuring：使用解构变量而不是属性。
4.consistent-function-scoping：将函数定义移动到可能的最高作用域。
5.custom-error-definition：强制正确的 Error 子类化。
6.empty-brace-spaces：强制大括号之间没有空格。
7.error-message：在创建内置错误时强制传递消息值。
8.escape-case：要求转义序列使用大写值。
9.expiring-todo-comments：在 TODO 注释中添加过期条件。
10.explicit-length-check：强制显式比较值的长度或大小属性。
11.filename-case：强制文件名使用特定大小写风格。
12.import-style：根据模块强制特定的导入风格。
13.new-for-builtins：强制对所有内建对象使用 new，除了 String、Number、Boolean、Symbol 和 BigInt。
14.no-abusive-eslint-disable：强制在 eslint-disable 注释中指定要禁用的规则。
15.no-anonymous-default-export：不允许匿名函数和类作为默认导出。
16.no-array-callback-reference：防止直接将函数引用传递给迭代器方法。
17.no-array-for-each：优先使用 for…of 而不是 forEach 方法。
18.no-array-method-this-argument：不允许在数组方法中使用 this 参数。
19.no-array-push-push：强制将多个 Array#push() 合并为一次调用。
20.no-array-reduce：不允许使用 Array#reduce() 和 Array#reduceRight()。
21.no-await-expression-member：不允许从 await 表达式访问成员。
22.no-await-in-promise-methods：不允许在 Promise 方法参数中使用 await。
23.no-console-spaces：不允许在 console.log 参数之间使用前导/尾随空格。
24.no-document-cookie：不允许直接使用 document.cookie。
25.no-empty-file：不允许空文件。
26.no-for-loop：不允许使用可以替换为 for-of 循环的 for 循环。
27.no-hex-escape：强制使用 Unicode 转义而不是十六进制转义。
28.no-instanceof-array：要求使用 Array.isArray() 而不是 instanceof Array。
29.no-invalid-remove-event-listener：防止使用表达式的结果调用 EventTarget#removeEventListener()。
30.no-keyword-prefix：不允许以 new 或 class 开头的标识符。
31.no-lonely-if：不允许 if 语句作为 if 块中唯一的语句而没有 else。
32.no-negated-condition：不允许否定条件。
33.no-nested-ternary：不允许嵌套的三元表达式。
34.no-new-array：不允许 new Array()。
35.no-new-buffer：强制使用 Buffer.from() 和 Buffer.alloc() 替代已弃用的 new Buffer()。
36.no-null：不允许使用 null 字面量。
37.no-object-as-default-parameter：不允许将对象用作默认参数。
38.no-process-exit：不允许使用 process.exit()。
39.no-single-promise-in-promise-methods：不允许将单个元素数组传递给 Promise 方法。
40.no-static-only-class：不允许只有静态成员的类。
41.no-thenable：不允许 then 属性。
42.no-this-assignment：不允许将 this 赋值给变量。
43.no-typeof-undefined：不允许使用 typeof 比较 undefined。
44.no-unnecessary-await：不允许等待非 Promise 值。
45.no-unnecessary-polyfills：强制使用内置方法而不是不必要的 polyfills。
46.no-unreadable-array-destructuring：不允许难以阅读的数组解构。
47.no-unreadable-iife：不允许难以阅读的 IIFEs。
48.no-unused-properties：不允许未使用的对象属性。
49.no-useless-fallback-in-spread：不允许在对象字面量中的 spread 操作中使用无用的回退。
50.no-useless-length-check：不允许无用的数组长度检查。
51.no-useless-promise-resolve-reject：不允许在异步函数或 promise 回调中返回/产生 Promise.resolve/reject()。
52.no-useless-spread：不允许不必要的 spread。
53.no-useless-switch-case：不允许在 switch 语句中使用无用的 case。
54.no-useless-undefined：不允许无用的 undefined。
55.no-zero-fractions：不允许具有零分数或悬空点的数字文字。
56.number-literal-case：强制数值文字使用正确的大小写。
57.numeric-separators-style：强制数字分隔符的风格，正确地分组数字。
58.prefer-add-event-listener：优先使用 .addEventListener() 和 .removeEventListener() 而不是 on-函数。
59.prefer-array-find：优先使用 .find(…) 和 .findLast(…) 而不是从 .filter(…) 中获取第一个或最后一个元素。
60.prefer-array-flat：优先使用 Array#flat() 而不是传统的展平数组技术。
61.prefer-array-flat-map：优先使用 .flatMap(…) 而不是 .map(…).flat()。
62.prefer-array-index-of：在查找项的索引时，优先使用 Array#{indexOf,lastIndexOf}() 而不是 Array#{findIndex,findLastIndex}()。
63.prefer-array-some：在检查存在或不存在时，优先使用 .some(…) 而不是 .filter(…).length 检查和 .{find,findLast}(…)。
64.prefer-at：对于索引访问和 String#charAt()，优先使用 .at() 方法。
65.prefer-blob-reading-methods：优先使用 Blob#arrayBuffer() 而不是 FileReader#readAsArrayBuffer(…) 和 Blob#text() 而不是 FileReader#readAsText(…)。
66.prefer-code-point：优先使用 String#codePointAt(…) 而不是 String#charCodeAt(…) 和 String.fromCodePoint(…) 而不是 String.fromCharCode(…)。
67.prefer-date-now：优先使用 Date.now() 来获取自 Unix Epoch 以来的毫秒数。
68.prefer-default-parameters：优先使用默认参数而不是重新分配。
69.prefer-dom-node-append：优先使用 Node#append() 而不是 Node#appendChild()。
70.prefer-dom-node-dataset：优先在 DOM 元素上使用 .dataset 而不是调用属性方法。
71.prefer-dom-node-remove：优先使用 childNode.remove() 而不是 parentNode.removeChild(childNode)。
72.prefer-dom-node-text-content：优先使用 .textContent 而不是 .innerText。
73.prefer-event-target：优先使用 EventTarget 而不是 EventEmitter。
74.prefer-export-from：在重新导出时，优先使用 export…from。
75.prefer-includes：在检查存在或不存在时，优先使用 .includes() 而不是 .indexOf() 和 Array#some()。
76.prefer-json-parse-buffer：优先将 JSON 文件作为缓冲区读取。
77.prefer-keyboard-event-key：优先使用 KeyboardEvent#key 而不是 KeyboardEvent#keyCode。
78.prefer-logical-operator-over-ternary：优先使用逻辑运算符而不是三元运算符。
79.prefer-math-trunc：强制使用 Math.trunc 而不是位运算符。
80.prefer-modern-dom-apis：优先使用 .before() 而不是 .insertBefore()，.replaceWith() 而不是 .replaceChild()，在 insertAdjacentText() 和 insertAdjacentElement() 中优先使用 .before()、.after()、.append() 或 .prepend()。
81.prefer-modern-math-apis：优先使用现代 Math API 而不是传统模式。
82.prefer-module：优先使用 JavaScript 模块（ESM）而不是 CommonJS。
83.prefer-native-coercion-functions：优先直接使用 String、Number、BigInt、Boolean 和 Symbol。
84.prefer-negative-index：在可能的情况下，优先使用负索引而不是 .length - 索引。
85.prefer-node-protocol：在导入 Node.js 内置模块时，优先使用 node：协议。
86.prefer-number-properties：优先使用 Number 静态属性而不是全局属性。
87.prefer-object-from-entries：优先使用 Object.fromEntries(…) 将键值对列表转换为对象。
88.prefer-optional-catch-binding：优先省略 catch 绑定参数。
89.prefer-prototype-methods：优先从原型中借用方法而不是实例。
90.prefer-query-selector：优先使用 .querySelector() 而不是 .getElementById()，.querySelectorAll() 而不是 .getElementsByClassName() 和 .getElementsByTagName()。
91.prefer-reflect-apply：优先使用 Reflect.apply() 而不是 Function#apply()。
92.prefer-regexp-test：优先使用 RegExp#test() 而不是 String#match() 和 RegExp#exec()。
93.prefer-set-has：在检查存在或不存在时，优先使用 Set#has() 而不是 Array#includes()。
94.prefer-set-size：优先使用 Set#size 而不是 Array#length。
95.prefer-spread：优先使用扩展运算符而不是 Array.from(…)、Array#concat(…)、Array#{slice,toSpliced}() 和 String#split(‘’)。
96.prefer-string-replace-all：优先使用 String#replaceAll() 而不是具有全局标志的正则搜索。
97.prefer-string-slice：优先使用 String#slice() 而不是 String#substr() 和 String#substring()。
98.prefer-string-starts-ends-with：优先使用 String#startsWith() 和 String#endsWith() 而不是 RegExp#test()。
99.prefer-string-trim-start-end：优先使用 String#trimStart() / String#trimEnd() 而不是 String#trimLeft() / String#trimRight()。
100.prefer-switch：优先使用 switch 而不是多个 else-if。
101.prefer-ternary：优先使用三元表达式而不是简单的 if-else 语句。
102.prefer-top-level-await：优先在顶层使用 await 而不是顶层 promises 和异步函数调用。
103.prefer-type-error：在类型检查条件中强制抛出 TypeError。
104.prevent-abbreviations：防止缩写。
105.relative-url-style：强制一致的相对 URL 样式。
106.require-array-join-separator：强制使用 Array#join() 的分隔符参数。
107.require-number-to-fixed-digits-argument：强制使用 Number#toFixed() 的 digits 参数。
108.require-post-message-target-origin：强制使用 window.postMessage() 的 targetOrigin 参数。
109.string-content：强制更好的字符串内容。
110.switch-case-braces：强制 case 子句的一致括号样式。
111.template-indent：修复对空格不敏感的模板缩进。
112.text-encoding-identifier-case：强制文本编码标识符的一致大小写。
113.throw-new-error：在抛出错误时要求使用 new
七、eslint自带的规则
1.array-callback-return：强制在数组方法的回调函数中使用 return 语句
2.constructor-super：要求在构造函数中调用 super()
3.for-direction：强制“for”循环更新子句中计数器朝正确方向移动
4.getter-return：强制在 getter 函数中使用 return 语句
5.no-async-promise-executor：禁止使用异步函数作为 Promise 执行函数
6.no-await-in-loop：禁止在循环中使用 await
7.no-class-assign：禁止重新分配类成员
8.no-compare-neg-zero：禁止与 -0 进行比较
9.no-cond-assign：禁止在条件表达式中使用赋值运算符
10.no-const-assign：禁止重新分配 const 变量
11.no-constant-binary-expression：禁止表达式中操作不影响值的情况
12.no-constant-condition：禁止在条件语句中使用常量表达式
13.no-constructor-return：禁止从构造函数中返回值
14.no-control-regex：禁止在正则表达式中使用控制字符
15.no-debugger：禁用 debugger 语句
16.no-dupe-args：禁止在函数定义中重复的参数
17.no-dupe-class-members：禁止重复的类成员
18.no-dupe-else-if：禁止在 if-else-if 链中重复的条件
19.no-dupe-keys：禁止对象字面量中重复的键
20.no-duplicate-case：禁止重复的 case 标签
21.no-duplicate-imports：禁止重复的模块导入
22.no-empty-character-class：禁止在正则表达式中使用空字符类
23.no-empty-pattern：禁止空的解构模式
24.no-ex-assign：禁止在 catch 子句中重新分配异常
25.no-fallthrough：禁止 case 语句的穿透
26.no-func-assign：禁止重新分配函数声明
27.no-import-assign：禁止对导入的绑定进行赋值
28.no-inner-declarations：禁止在嵌套块中声明变量或函数
29.no-invalid-regexp：禁止在 RegExp 构造函数中使用无效的正则表达式字符串
30.no-irregular-whitespace：禁止不规则的空白
31.no-loss-of-precision：禁止失去精度的字面数值
32.no-misleading-character-class：禁止在字符类语法中使用由多个代码点组成的字符
33.no-new-native-nonconstructor：禁止使用 new 操作符与全局非构造函数
34.no-new-symbol：禁止使用 new 操作符与 Symbol 对象
35.no-obj-calls：禁止将全局对象属性作为函数调用
36.no-promise-executor-return：禁止从 Promise 执行函数中返回值
37.no-prototype-builtins：禁止直接在对象上调用某些 Object.prototype 方法
38.no-self-assign：禁止赋值两个相同的值
39.no-self-compare：禁止比较两个完全相同的值
40.no-setter-return：禁止从 setter 中返回值
41.no-sparse-arrays：禁止稀疏数组
42.no-template-curly-in-string：禁止在普通字符串中使用模板文字占位符语法
43.no-this-before-super：在构造函数中禁止在调用 super() 之前使用 this/super
44.no-undef：禁止使用未声明的变量，除非在 /global / 注释中提到
45.no-unexpected-multiline：禁止令人困惑的多行表达式
46.no-unmodified-loop-condition：禁止未修改的循环条件
47.no-unreachable：禁止在 return、throw、continue 和 break 语句之后出现不可达代码
48.no-unreachable-loop：禁止循环体只允许一次迭代的循环
49.no-unsafe-finally：禁止在 finally 块中出现控制流语句
50.no-unsafe-negation：禁止对关系运算符左操作数取反
51.no-unsafe-optional-chaining：在不允许 undefined 值的情况下禁止使用可选链
52.no-unused-private-class-members：禁止未使用的私有类成员
53.no-unused-vars：禁止未使用的变量
54.no-use-before-define：禁止在变量定义之前使用变量
55.no-useless-backreference：禁止在正则表达式中使用无用的反向引用
56.require-atomic-updates：禁止由于使用 await 或 yield 导致竞态条件的赋值
57.use-isnan：在检查 NaN 时要求调用 isNaN()
58.valid-typeof：用于检查 typeof 操作符的结果是否是有效的字符串
59.accessor-pairs：强制对象和类中的 getter 和 setter 成对出现
60.arrow-body-style：要求箭头函数体周围使用大括号
61.block-scoped-var：强制在变量作用域内使用变量
62.camelcase：强制使用驼峰命名约定
63.capitalized-comments：强制或禁止注释的首字母大写
64.class-methods-use-this：强制类方法中使用 this
65.complexity：强制程序中允许的最大圈复杂度
66.consistent-return：要求 return 语句始终指定值或永不指定值
67.consistent-this：捕获当前执行上下文时强制一致的命名
68.curly：强制所有控制语句使用一致的括号风格
69.default-case：要求 switch 语句中有 default 分支
70.default-case-last：强制 switch 语句中 default 分支在最后
71.default-param-last：强制默认参数在参数列表的最后
72.dot-notation：尽可能强制使用点号访问属性
73.eqeqeq：要求使用 === 和 !==
74.func-name-matching：要求函数名称与分配给其的变量或属性名称匹配
75.func-names：要求或禁止具名函数表达式
76.func-style：强制一致地使用函数声明或表达式
77.grouped-accessor-pairs：要求对象字面量和类中的分组访问器对
78.guard-for-in：要求 for-in 循环包含一个 if 语句
79.id-denylist：禁止特定的标识符
80.id-length：强制标识符的最小和最大长度
81.id-match：要求标识符匹配指定的正则表达式
82.init-declarations：要求或禁止在变量声明中进行初始化
83.logical-assignment-operators：要求或禁止逻辑赋值运算符简写
84.max-classes-per-file：强制每个文件中的最大类数
85.max-depth：强制块嵌套的最大深度
86.max-lines：强制每个文件的最大行数
87.max-lines-per-function：强制函数中的最大代码行数
88.max-nested-callbacks：强制回调函数的最大嵌套深度
89.max-params：强制函数定义中的最大参数数目
90.max-statements：强制函数块中的最大语句数目
91.multiline-comment-style：强制多行注释的特定风格
92.new-cap：要求构造函数名称以大写字母开头
93.no-alert：禁用 alert、confirm 和 prompt
94.no-array-constructor：禁止使用 Array 构造函数
95.no-bitwise：禁用位运算符
96.no-caller：禁用 arguments.caller 或 arguments.callee
97.no-case-declarations：禁止在 case 子句中使用词法声明
98.no-console：禁用 console
99.no-continue：禁用 continue 语句
100.no-delete-var：禁止删除变量
101.no-div-regex：禁止在正则表达式开头使用等号
102.no-else-return：在 if 语句中禁止 else 块后的 return 语句
103.no-empty：禁止空块语句
104.no-empty-function：禁止空函数
105.no-empty-static-block：禁止空静态块
106.no-eq-null：禁止对 null 进行比较而不使用类型检查运算符
107.no-eval：禁用 eval()
108.no-extend-native：禁止扩展原生类型
109.no-extra-bind：禁止不必要的 .bind() 调用
110.no-extra-boolean-cast：禁止不必要的布尔类型转换
111.no-extra-label：禁止不必要的标签
112.no-global-assign：禁止对原生对象或只读全局变量进行赋值
113.no-implicit-coercion：禁止隐式类型转换
114.no-implicit-globals：禁止在全局范围内进行声明
115.no-implied-eval：禁止使用类似 eval() 的方法
116.no-inline-comments：禁止代码后的内联注释
117.no-invalid-this：禁止在 this 的值为未定义的情况下使用 this
118.no-iterator：禁止使用 iterator 属性
119.no-label-var：禁止标签与变量同名
120.no-labels：禁用标签语句
121.no-lone-blocks：禁止不必要的嵌套块
122.no-lonely-if：禁止 if 语句作为 else 块中的唯一语句
123.no-loop-func：禁止在循环语句中包含具有不安全引用的函数声明
124.no-magic-numbers：禁止使用魔术数
125.no-multi-assign：禁止使用链式赋值表达式
126.no-multi-str：禁止多行字符串
127.no-negated-condition：禁止否定条件
128.no-nested-ternary：禁止嵌套的三元表达式
129.no-new：禁止在赋值或比较之外使用 new 操作符
130.no-new-func：禁止使用 Function 对象的 new 操作符
131.no-new-wrappers：禁止使用 String、Number 和 Boolean 对象的 new 操作符
132.no-nonoctal-decimal-escape：禁止在字符串字面量中使用 \8 和 \9 转义序列
133.no-object-constructor：禁止调用没有参数的 Object 构造函数
134.no-octal：禁用八进制字面量
135.no-octal-escape：禁止在字符串字面量中使用八进制转义序列
136.no-param-reassign：禁止重新分配函数参数
137.no-plusplus：禁用一元操作符 ++ 和 –
138.no-proto：禁用 proto 属性
139.no-redeclare：禁止变量重复声明
140.no-regex-spaces：禁止正则表达式中的多个空格
141.no-restricted-exports：禁止指定的导出名称
142.no-restricted-globals：禁止指定的全局变量
143.no-restricted-imports：禁止通过 import 加载指定的模块
144.no-restricted-properties：禁止在特定对象上使用特定属性
145.no-restricted-syntax：禁止特定的语法
146.no-return-assign：禁止在 return 语句中使用赋值运算符
147.no-script-url：禁止 javascript：URL
148.no-sequences：禁用逗号操作符
149.no-shadow：禁止变量声明与外部作用域的变量同名
150.no-shadow-restricted-names：禁止标识符与受限制的名称同名
151.no-ternary：禁用三元操作符
152.no-throw-literal：禁止抛出字面量异常
153.no-undef-init：禁止将变量初始化为 undefined
154.no-undefined：禁止将 undefined 作为标识符
155.no-underscore-dangle：禁止标识符中的悬空下划线
156.no-unneeded-ternary：禁止存在更简单的替代方案时使用三元操作符
157.no-unused-expressions：禁止未使用的表达式
158.no-unused-labels：禁用未使用的标签
159.no-useless-call：禁止不必要的 .call() 和 .apply() 调用
160.no-useless-catch：禁止不必要的 catch 子句
161.no-useless-computed-key：禁止在对象和类中使用不必要的计算属性键
162.no-useless-concat：禁止不必要的字符串连接
163.no-useless-constructor：禁止不必要的构造函数
164.no-useless-escape：禁止不必要的转义字符
165.no-useless-rename：禁止将导入、导出和解构赋值重命名为相同名称
166.no-useless-return：禁止冗余的 return 语句
167.no-var：要求使用 let 或 const 而不是 var
168.no-void：禁用 void 操作符
169.no-warning-comments：禁止在注释中使用指定的警告术语
170.no-with：禁用 with 语句
171.object-shorthand：要求或禁止对象字面量方法和属性使用简写语法
172.one-var：要求在函数中将变量声明为一起或分开
173.operator-assignment：要求或禁止尽可能使用赋值运算符简写
174.prefer-arrow-callback：要求回调函数使用箭头函数
175.prefer-const：要求永远不会重新分配的变量使用 const 声明
176.prefer-destructuring：要求从数组和/或对象中进行解构
177.prefer-exponentiation-operator：禁止使用 Math.pow，而是使用 ** 运算符
178.prefer-named-capture-group：强制在正则表达式中使用命名捕获组
179.prefer-numeric-literals：禁止使用 parseInt() 和 Number.parseInt()，而是使用二进制、八进制和十六进制字面量
180.prefer-object-has-own：禁止使用 Object.prototype.hasOwnProperty.call()，而是使用 Object.hasOwn()
181.prefer-object-spread：禁止将对象字面量作为第一个参数使用 Object.assign，而是使用对象展开操作符
182.prefer-promise-reject-errors：要求使用 Error 对象作为 Promise 拒绝原因
183.prefer-regex-literals：禁止使用 RegExp 构造函数，而是使用正则表达式字面量
184.prefer-rest-params：要求使用剩余参数而不是 arguments
185.prefer-spread：要求使用展开操作符而不是 .apply()
186.prefer-template：要求使用模板文字而不是字符串连接
187.radix：强制使用 parseInt() 时使用基数参数
188.require-await：禁止没有 await 表达式的 async 函数
189.require-unicode-regexp：强制在正则表达式中使用 u 或 v 标志
190.require-yield：要求生成器函数包含 yield
191.sort-imports：强制模块内的 import 声明排序
192.sort-keys：要求对象键排序
193.sort-vars：要求在同一声明块内排序变量
194.strict：要求或禁止使用严格模式指令
195.symbol-description：要求符号描述
196.vars-on-top：要求将 var 声明放在其包含作用域的顶部
197.yoda：要求或禁止尤达条件
198.line-comment-position：强制规定行注释的位置
199.unicode-bom：强制规定或禁止 Unicode 字节顺序标记 (BOM)
八、eslint命令行，npx eslint [options] [file|dir|glob]
1.–no-eslintrc：禁用使用 .eslintrc. 文件中的配置。
2.-c, --config path::String：使用指定的配置文件，覆盖 .eslintrc. 文件中的配置选项。
3.–env [String]：指定要使用的环境。
4.–ext [String]：指定 JavaScript 文件的扩展名。
5.–global [String]：定义全局变量。
6.–parser String：指定要使用的解析器。
7.–parser-options Object：指定解析器选项。
8.–resolve-plugins-relative-to path::String：指定插件解析的相对路径，默认为当前工作目录。
9.–plugin [String]：指定要使用的插件。
10.–rule Object：指定规则。
11.–rulesdir [path::String]：从指定目录加载额外的规则（已弃用，请使用插件中的规则）。
12.–fix：自动修复问题。
13.–fix-dry-run：自动修复问题，但不保存更改到文件系统。
14.–fix-type Array：指定要应用的修复类型（指令、问题、建议、布局）。
15.–ignore-path path::String：指定忽略文件的路径。
16.–no-ignore：禁用使用忽略文件和模式。
17.–ignore-pattern [String]：要忽略的文件模式（除了 .eslintignore 中的文件）。
18.–stdin：对提供代码进行 lint 检查，默认为 false。
19.–stdin-filename String：指定要处理的 STDIN 的文件名。
20.–quiet：仅报告错误，默认为 false。
21.–max-warnings Int：触发非零退出码的警告数，默认为 -1。
22.-o, --output-file path::String：指定要写入报告的文件。
23.-f, --format String：使用特定的输出格式，默认为 stylish。
24.–color, --no-color：强制启用/禁用颜色。
25.–no-inline-config：防止注释更改配置或规则。
26.–report-unused-disable-directives：报告未使用的 eslint-disable 和 eslint-enable 指令。
27.–report-unused-disable-directives-severity String：选择报告未使用的 eslint-disable 和 eslint-enable 指令的严重程度。
28.–cache：仅检查更改的文件，默认为 false。
29.–cache-file path::String：缓存文件的路径（已弃用，请使用 --cache-location，默认为 .eslintcache）。
30.–cache-location path::String：缓存文件或目录的路径。
31.–cache-strategy String：用于检测缓存中更改的文件的策略（元数据或内容，默认为元数据）。
32.–init：运行配置初始化向导，默认为 false。
33.–env-info：输出执行环境信息，默认为 false。
34.–no-error-on-unmatched-pattern：在模式不匹配时防止错误。
35.–exit-on-fatal-error：在发生致命错误时以退出码 2 退出，默认为 false。
36.–no-warn-ignored：在文件列表包含被忽略的文件时抑制警告（仅适用于平面配置模式）。
37.–debug：输出调试信息。
38.-h, --help：显示帮助。
39.-v, --version：输出版本号。
40.–print-config path::String：打印给定文件的配置信息。
九、prettier配置
1.printWidth：指定代码行的最大打印宽度。
2.tabWidth：指定一个制表符等于多少空格。
3.useTabs：使用制表符而不是空格缩进。
4.semi：在语句末尾使用分号。
5.singleQuote：是否使用单引号。
6.quoteProps：只有在必要时在对象属性周围添加引号。
7.jsxSingleQuote：在JSX中使用单引号还是双引号。
8.trailingComma：在多行对象字面量和数组字面量的最后一个元素后加逗号。
9.bracketSpacing：在大括号内部是否加空格。
10.bracketSameLine：将大括号放在控制语句的同一行。
11.jsxBracketSameLine：在JSX中的大括号内部是否加空格。
12.arrowParens：控制单参数箭头函数省略参数周围的括号。
13.rangeStart、rangeEnd：限制单行中的语句数量。
14.filepath：指定配置文件的路径。
15.requirePragma：指定是否需要在文件顶部添加特定的注释来启用 Prettier。
16.insertPragma：指定是否在文件顶部插入一个特定的注释来标记文件已经被 Prettier 格式化过。
17.proseWrap：指定Markdown保留原始代码的格式。
18.htmlWhitespaceSensitivity：指定HTML标签的空格敏感度。
19.vueIndentScriptAndStyle：指定Vue文件中script和style标签的缩进。
20.endOfLine：指定文件末尾使用的换行符类型。
21.embeddedLanguageFormatting：指定是否格式化嵌入式语言。
22.singleAttributePerLine:：每个JSX属性是否单独放在一行。
23.Parser：指定要使用的解析器。