安装相关的依赖
npm i eslint@7.23.0 eslint-plugin-vue -D
npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
eslint: ESLint 的核心代码。必须首先安装这个依赖包，因为其他的依赖包建立在它之上。
eslint-plugin-vue：Vue.js 的官方 ESLint 插件，它允许我们使用 ESLint 检查文件中的 Vue 代码。
@typescript-eslint/parser：ESLint 的解析器，用于解析 typescript，从而检查和规范 Typescript 代码。
@typescript-eslint/eslint-plugin：包含了各类定义好的检测 Typescript 代码的规范。
npm i -D eslint-define-config vue-eslint-parser
eslint-define-config：为 .eslintrc.js 文件提供 defineConfig 功能。
vue-eslint-parser：文件的 ESLint 自定义解析器.vue。
npm i -D prettier eslint-plugin-prettier eslint-config-prettier
prettier：prettier插件的核心代码。
eslint-plugin-prettier：将prettier作为ESLint 范来使用。
eslint-config-prettier：关闭所有不必要或可能与Prettier冲突的规则，比如，解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效。
可选：
eslint-plugin-import：支持 ES2015+ (ES6+) import / export 语法的规则，并防止文件路径和导入名称拼写错误的问题。
eslint相关配置说明
defineConfig方法里的基本成员：
root：是否开启 eslint。
env：配置编译器宏环境。
parser：eslint-plugin-vue 依赖包规定了 parser 项的设定，详情请移步：如何使用自定义解析器？。
parserOptions：若使用 @typescript-eslint/parser 依赖包作为自定义的解析器，需要配置 parserOptions 属性来设置解析器选项。其详细配置下面会讲。
extends：在此处添加更多通用规则集。
rules：在此处覆盖或添加规则设置。
环境配置env
browser - 浏览器环境中的全局变量。
node - Node.js 全局变量和 Node.js 作用域。
commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
shared-node-browser - Node.js 和 Browser 通用全局变量。
es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
worker - Web Workers 全局变量。
amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
mocha - 添加所有的 Mocha 测试全局变量。
jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
jest - Jest 全局变量。
phantomjs - PhantomJS 全局变量。
protractor - Protractor 全局变量。
qunit - QUnit 全局变量。
jquery - jQuery 全局变量。
prototypejs - Prototype.js 全局变量。
shelljs - ShellJS 全局变量。
meteor - Meteor 全局变量。
mongo - MongoDB 全局变量。
applescript - AppleScript 全局变量。
nashorn - Java 8 Nashorn 全局变量。
parserOptions可用的选项有：
parser：可选的。自定义解析器。比如：@babel/eslint-parser或 @typescript-eslint/parser
ecmaVersion：
可设为 3、5（默认）、6……指定要使用的 ECMAScript 语法版本。
可设为 2015（同6）、2016（同7）、2017（同8）……基于年份的命名。
可设为 “latest”，以使用最新支持的版本。
sourceType：默认是 “script”。当代码在 ECMAScript 模块中时其值需设为 “module”。
allowReserved：可选的。布尔值。如果 ecmaVersion 是 3，就允许使用保留字作为标识符，否则不允许。
ecmaFeatures：可选的。一个对象，指示您想使用哪些附加语言功能：
globalReturn：允许 return 全局范围内的语句。
impliedStrict：布尔值。如果 ecmaVersion 是 5 或更大，就启用全局严格模式，否则无需启用。
jsx：是否启用 JSX。
异常等级配置
“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
.eslintrc.js文件
const { defineConfig } = require('eslint-define-config')
module.exports = defineConfig({
// 当前配置为根配置，将不再从上级文件夹查找配置
root: true,
env: { // 环境
browser: true, // 浏览器环境中的全局变量。
node: true, // Node.js 全局变量和 Node.js 作用域。
es6: true // 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
},
/* 指定如何解析语法。*/
parser: 'vue-eslint-parser',
/* 解析器配置 */
parserOptions: {
parser: '@typescript-eslint/parser', // 解析器
ecmaVersion: 'latest', // 5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用年份命名的版本号，你也可以用 latest 来指向最新的版本。
sourceType: 'module', // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
jsxPragma: 'React', // 支持 ReactJSX 语法
ecmaFeatures: { // 表示你想使用的额外的语言特性
jsx: true // 启用 JSX
}
},
// https://eslint.bootcss.com/docs/user-guide/configuring#specifying-globals
globals: {
Nullable: true,
},
extends: [
// 扩展使用 vue3 检查规则和eslint推荐规则
'plugin:vue/vue3-recommended',
'eslint:recommended',
// typescript-eslint推荐规则,
'plugin:@typescript-eslint/recommended',
// prettier推荐规则,
'prettier',
'plugin:prettier/recommended',
],
//http://eslint.cn/docs/rules/
rules: {
// 'no-undef': 'off',
// 禁止使用 var
'no-var': 'error',
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
// 禁止any类型,报错关闭
'@typescript-eslint/no-explicit-any': 'off',
// 需要导出函数和类的公共类方法的显式返回和参数类型,报错关闭
'@typescript-eslint/explicit-module-boundary-types': 'off',
// 禁止某些类型如String、Number,报错关闭
'@typescript-eslint/ban-types': 'off',
// 禁止未使用的变量,报错关闭
'@typescript-eslint/no-unused-vars': 'off',
// vue首行缩进两字符
'vue/html-indent': [
'error',
2,
{
// 属性缩进的乘数。默认为1。
attribute: 1,
// 顶级语句的缩进倍数。默认为1。
baseIndent: 1,
// 右括号缩进的乘数。默认为0。
closeBracket: 0,
// 属性是否应垂直对齐到多行情况下的第一个属性的条件。默认为true
alignAttributesVertically: true,
// 忽略节点的选择器。默认是[]
ignores: [],
},
],
// 每行最大属性数关闭
'vue/max-attributes-per-line': ['off'],
// 强制使用驼峰命名
'vue/component-name-in-template-casing': [
'error',
'PascalCase',
{
// 如果true，则仅检查已注册的组件（在 PascalCase 中）。如果false，检查所有。默认true
registeredComponentsOnly: false,
ignores: [],
},
],
// 编辑器里会给prettier错误进行报错
"prettier/prettier": "error",
},
})
配置 .eslintignore
eslint通过.eslintignore 文件或者在 package.json 文件中查找 eslintIgnore 键，来检查要忽略的文件
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
.eslintrc.js
.prettierrc
/src/mock/*
配置 .prettierrc
Print Width：打印宽度
Tab Width：标签宽度
Tabs：标签
Semicolons：分号
Quotes：引号
Quote Props：引用对象中的属性
JSX Quotes：在 JSX 中使用单引号而不是双引号
Trailing Commas：尾部逗号
Bracket Spacing：在对象文字中的括号之间打印空格。
Bracket Line：括号线
Arrow Function Parentheses：箭头函数括号
Range：格式化的范围
Parser：指定要使用的解析器。
File Path：文件路径
Require Pragma：需要编译指示
Insert Pragma：插入编译指示
Prose Wrap：散文包装
HTML Whitespace Sensitivity：HTML 空白敏感性
Vue files script and style tags indentation：Vue 文件脚本和样式标签缩进
End of Line：行结束
Embedded Language Formatting：嵌入式语言格式
{
printWidth: 100, // 最大行长规则通常设置为 100 或 120。
tabWidth: 2, // 指定每个标签缩进级别的空格数。
useTabs: false, // 使用制表符而不是空格缩进行。
semi: false, // true（默认）: 在每条语句的末尾添加一个分号。false：仅在可能导致 ASI 失败的行的开头添加分号。
vueIndentScriptAndStyle: true, // Vue 文件脚本和样式标签缩进
singleQuote: true, // 使用单引号而不是双引号
quoteProps: 'as-needed', // 引用对象中的属性时，仅在需要时在对象属性周围添加引号。
bracketSpacing: true, // 在对象文字中的括号之间打印空格。
trailingComma: 'none', // "none":没有尾随逗号。"es5": 在 ES5 中有效的尾随逗号（对象、数组等），TypeScript 中的类型参数中没有尾随逗号。"all"- 尽可能使用尾随逗号。
bracketSameLine: false, // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）。
jsxSingleQuote: false, // 在 JSX 中使用单引号而不是双引号。
arrowParens: 'always', // 在唯一的箭头函数参数周围始终包含括号。
insertPragma: false, // 插入编译指示
requirePragma: false, // 需要编译指示
proseWrap: 'never', // 如果散文超过打印宽度，则换行
htmlWhitespaceSensitivity: 'strict', // 所有标签周围的空格（或缺少空格）被认为是重要的。
endOfLine: 'lf', // 确保在文本文件中仅使用 ( \n)换行，常见于 Linux 和 macOS 以及 git repos 内部。
rangeStart: 0, // 格式化文件时，回到包含所选语句的第一行的开头。
}
配置 .prettierignore
如果存在不想被Prettier格式化的文件，可以忽略格式化。
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
规范查询地址：
eslint规范查询：https://cn.eslint.org/docs/rules/
vue的eslint规范查询：https://eslint.vuejs.org/rules/
typescript的eslint规范查询：https://typescript-eslint.io/rules/
