ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。ESLint 是一个开源的 JavaScript 代码检查工具，它是用来进行代码的校验，检测代码中潜在的问题，比如某个变量定义了未使用、函数定义的参数重复、变量名没有按规范命名等等。
中文官网：https://zh-hans.eslint.org/
英文官网：https://eslint.org/
规则
ESLint 附带有大量的规则，修改规则应遵循如下要求：
'off' 或 0 - 关闭规则
'warn' 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
'error' 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
打开VS Code 安装相对于的插件
一、安装ESLint
1、安装eslint
npm install eslint -D
yarn add eslint -D
pnpm install eslint -D
2、生成配置文件：.eslint.cjs
npx eslint --init
按要求运行完成后项目中会多出一个 .eslint.cjs 文件，跟src是同级关系，然后就可以根据 规则 自己按照项目来配置规则
3、修改.eslint.cjs配置文件
// @see https://eslint.bootcss.com/docs/rules/
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
parser: 'vue-eslint-parser',
/** 优先级低于 parse 的语法解析配置 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
/* 继承已有的规则 */
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['vue', '@typescript-eslint'],
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint（https://eslint.bootcss.com/docs/rules/）
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},
}这里配置了一小部分，想要完整的配置并且是根据自己习惯来配置的话 规则 这里有完整了
4、.eslintignore忽略文件
然后在同级目录下安装一个创建一个 .eslintignore忽略文件 ，目的是让 eslint 忽略某些文件中的配置，创建好后写入：
dist
node_modules5、运行脚本
package.json新增两个运行脚本
"scripts": {
"lint": "eslint src",
"fix": "eslint src --fix",
}二、配置prettier
有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；
而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持
包含js在内的多种语言。
总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。
来到VS Code安装其对应的插件
1、安装依赖包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
同样是在src同级目录下安装.prettierrc.json文件夹
2、.prettierrc.json添加规则
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"bracketSpacing": true,
"trailingComma": "all",
"jsxSingleQuote": false,
"arrowParens": "avoid",
"proseWrap": "preserve",
"htmlWhitespaceSensitivity": "strict",
"endOfLine": "auto"
}3、.prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*通过pnpm run lint去检测语法，如果出现不规范格式,通过pnpm run fix 修改
三、保存自动格式化
想要按 Ctrl+S 保证的自动按eslint规则格式化代码的话，找到 .vscode 文件，内部新建个 setting.json 文件夹
setting.json 写入代码
{
"editor.formatOnType": true,
"editor.formatOnSave": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": ["javascript", "javascriptreact", "html", "vue"]
}
