背景
项目参与成员过多，代码风格不统一，导致代码片段五花八门，不方便预览和代码review。因此一个好的代码风格和格式化要求，在项目初期阶段至关重要。
🤡个人觉得代码能跑，格式化时别太多代码提交冲突，选一个用就行了。推荐Prettier吧，文章底部不是说Eslint妥协了么...
ESLint是用于检查和修复代码中的问题，如语法错误、潜在的错误、代码风格问题等。Prettier指定代码格式化的规则，例如缩进、换行符、引号样式等。会根据这些规则自动格式化代码，以确保整个项目中的代码风格一致。它不会执行静态代码分析或对代码进行修复，仅用于格式化代码。
ESLint+Prettier配合使用，才能达到真正意义上的代码格式化。但是往往有ESLint的情况下，代码规范会更加严格，所以可以根据自身项目要求去配置。
安装扩展
前提需要在vscode中下载 ESLint,Prettier-Code formatter扩展插件
配置ESLint
sql
npm install eslint --save-dev初始化eslint,选择你要生成的模板等初始化信息，然后会生成.eslintrc.js文件。其中的具体校验内容和信息可以根据自身项目要求进行配置。
.eslintrc.js：ESLint是一款静态代码分析工具，用于检查和修复代码中的问题，如语法错误、潜在的错误、代码风格问题等。.eslintrc是用于配置ESLint的配置文件。你可以在该文件中指定ESLint的规则、插件、解析器等。ESLint会根据这些规则对代码进行静态分析，并根据规则定义的修复进行代码修复。
sql
npx eslint --init你也可以配置.eslintignore用来忽略一些需要跳过校验的文件
bash
/build/
/config/
/dist/
# /*.js
**/router.js
/src/assets/配置Prettier
插件获取配置文件有一个优先级：
.prettierrc>.editorconfig>vscode默认配置
创建.prettierrc.json文件，内部可以自定义代码格式化样式风格。
json
{
"tabWidth": 2, // 缩进字节数
"endOfLine": "auto", // 结尾是 \n \r \n\r auto
"printWidth": 120, // 超过最大值换行
"proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"quoteProps": "as-needed", // 对象的 key 仅在必要时用引号
"semi": true, // 句尾添加分号
"singleQuote": true, // 使用单引号代替双引号
"trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"useTabs": false, // 缩进不使用tab，使用空格
"arrowParens": "always", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"eslintIntegration": true, // 使用eslint进行格式化校验
"vueIndentScriptAndStyle": true // 是否缩进Vue文件中<script>和<style>标记内的代码。
}配置vscode设置
通过在setting.json配置相关属性，来确定是否在保存时等情况下是否进行格式化或者eslint校验等，打开方式shift+ctrl+p。
json
{ "editor.formatOnSave": true //保存时自动格式化代码 }你可能会在一些项目中不想保存后对整个文件进行格式化，那你可以通过配置esbenp.prettier-vscode
json
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}