项目里面安装并配置eslint。
参考官网执行如下命令
npm init @eslint/config
等价于
npm install eslint -D //安装eslint
npx eslint --init //初始化配置eslint
执行后会有一些配置选项，按需选择。如下是按照个人当前项目需要进行的选择，可以作为参考。执行完后项目里面会多出一个.eslintrc.js文件，用于后面eslint的配置。
配置.eslintrc.js和.prettierrc文件
eslint提供两类规则：检查格式化的规则、检查代码质量的规则。说到底eslint是通过一条条规则限制代码规范，且规则的重点不在代码风格上，因此单凭eslint不能完全统一代码风格。
而prettier只负责代码格式化，不负责管理代码质量，采用prettier来统一代码风格优选。prettier支持配置的参数不多，且所有参数都有默认值，若需更改默认配置，新建.prettierrc.js文件配置具体值，参考prettier config。如下参数说明：
module.exports = {
printWidth: 80, //（默认值）单行代码超出 80 个字符自动换行
tabWidth: 2, //（默认值）一个 tab 键缩进相当于 2 个空格
useTabs: true, // 行缩进使用 tab 键代替空格
semi: false, //（默认值）语句的末尾加上分号
singleQuote: true, // 使用单引号
quoteProps: 'as-needed', //（默认值）仅仅当必须的时候才会加上双引号
jsxSingleQuote: true, // 在 JSX 中使用单引号
trailingComma: 'all', // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号
bracketSpacing: true, //（默认值）在括号和对象的文字之间加上一个空格
jsxBracketSameLine: true, // 把 > 符号放在多行的 JSX 元素的最后一行
arrowParens: 'avoid', // 当箭头函数中只有一个参数的时候可以忽略括弧
htmlWhitespaceSensitivity: 'ignore', // vue template 中的结束标签结尾尖括号掉到了下一行
vueIndentScriptAndStyle: false, //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容
embeddedLanguageFormatting: 'auto', //（默认值）允许自动格式化内嵌的代码块
};
问题1：eslint和prettier都可以管控代码风格，此时可能会出现冲突。目前已经有了非常成熟的解决方案，即 eslint-config-prettier + eslint-plugin-prettier。
在 .eslintrc.js中extends的最后添加一个配置，此时prettier和eslint便可以无冲突协作，保存时候也能自动修复并格式化代码了。
extends: [
'plugin:vue/vue3-recommended',
'airbnb-base',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended', // 增加的配置
],
问题2：eslint解析.vue 文件中的template无效。eslint-plugin-vue是对.vue 文件进行代码校验的插件,插件一些扩展如下。个人项目里面用的vue3，选用的plugin:vue/vue3-recommended。
plugin:vue/base：基础
plugin:vue/essential：预防错误的（用于 Vue 2.x）
plugin:vue/recommended：推荐的，最小化任意选择和认知开销（用于 Vue 2.x）；
plugin:vue/strongly-recommended：强烈推荐，提高可读性（用于 Vue 2.x）；
plugin:vue/vue3-essential：（用于 Vue 3.x）
plugin:vue/vue3-strongly-recommended：（用于 Vue 3.x）
plugin:vue/vue3-recommended：（用于 Vue 3.x）
配置eslint-plugin-vue插件和extends后，template校验还是会失效，此时需要再配置和eslint-plugin-vue插件对应的解析器vue-eslint-parser。vue-eslint-parser能解析 template的内容，但不会解析JS，因此需要再配置一个解析器@typescript-eslint/parser。
具体配置如下：
parser: 'vue-eslint-parser', // 解析<template>标签中的内容
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser', // 解析vue文件中<script>标签内容
sourceType: 'module',
},
问题3： 可以采用如下命令检测.eslintrc.js文件中是否有未安装的插件，确保插件全部安装后eslint才可起作用。
npx eslint 文件名
配置.editorconfig文件
.editorConfig专注于统一编辑器编码风格配置,对多种类型的单文件进行简单的格式化。它提供的配置参数很少，具体如下所示。
# 已经是顶层配置文件，不必继续向上搜索
root = true
[*]
# 编码字符集
charset = utf-8
# 缩进风格是空格
indent_style = space
# 一个缩进占用两个空格，因没有设置tab_with，一个Tab占用2列
indent_size = 2
# 换行符 lf
end_of_line = lf
# 文件以一个空白行结尾
insert_final_newline = true
# 去除行首的任意空白字符
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
可以看到 .editorConfig 和 .prettierrc会存在一些重复的配置，比如都提供缩进的配置参数。建议在实际应用中将二者参数设置为一致。一些注意事项如下：
