我们在开发工作中，经常会进行代码分析和代码格式化，ESlint和Prettier几乎是当前最流行的工具了，极大的提高了我们的开发效率。
两者的区别在于ESlint通常负责查找和报告代码内部的不同模式，旨在处理JavaScript文件，确保代码没有明显错误的问题。
Prettier是一种代码格式化程序，于ESlint不同，它支持多种语言，如JavaScript、HTML、Css、GarphQL、Markdown等。这两种工具在开发社区中都有很好的支持，并且在大多数的编辑器中都可以使用它们的扩展。
Visual Studio Code 插件
站点
为什么要使用 linter 和代码格式化程序
Linting是一种在应用程序准备好投入测试之前仍处于开发模式时修复代码问题的方法。许多这样的修复可以自动完成，使用Prettier时，可以自动格式化文件中的代码，从而节省大量的时间和精力。
这也是在代码审查中最常见的问题，保证每一个人的代码都是一样的风格。在整个团队中强制执行相同样式和代码质量。因此不会出现不同开发人员出现不同的代码风格。
Visual Studio Code代码设置
首先你需要安装ESLint和Prettier扩展。
然后转到代码->首选项->设置
您可以使用搜索框搜索您安装的 ESLint 和 Prettier 扩展。保留默认的 ESLint 设置应该没问题，但您可以根据需要更改它们。Prettier 可能需要一些全局设置更改，但可以根据需要进行自定义。
就像.gitignore一样，ESLint和Prettier应该也有类似的文件.eslintignore``.eslintrc.json``.prettierignore``.prettierrc.json
常用的prettier属性：
{
"arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"bracketSameLine": false, // 将>多行 HTML（HTML、JSX、Vue、Angular）元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭合元素）
"bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
"embeddedLanguageFormatting": "auto", //嵌入式语言格式
"htmlWhitespaceSensitivity": "css", // 尊重 CSSdisplay属性的默认值。对于与处理相同的车把strict。
"insertPragma": false, // 插入编译指示
"jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
"printWidth": 80, // 超过最大值换行
"proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
"quoteProps": "as-needed", // 引用对象中的属性时更改 "as-needed"- 仅在需要时在对象属性周围添加引号
"requirePragma": false, // 需要编译指示
"semi": true, // 句尾添加分号
"singleQuote": false, // 使用单引号代替双引号
"tabWidth": 2, // 缩进字节数
"trailingComma": "es5", // 末尾逗号 none - 末尾无逗号，es5 - es5有效保留， all - 在可能的地方都加上逗号
"useTabs": false, // 缩进不使用tab，使用空格
"vueIndentScriptAndStyle": false // Vue 文件脚本和样式标签缩进
}
接下来在设置页面上搜索format，设置保存时格式化
设置默认格式化程序->prettier-代码格式化程序。
纯JavaScript/Nodejs设置
打开命令行，然后转到桌面之类的目录。运行以下命令来设置您的项目。
mkdir backend cd backend npm init -y npm install eslint eslint-config-prettier eslint-plugin-prettier --save-dev
现在在同一文件夹中运行以下代码并完成设置。
npm init @eslint/config
然后根据需要选择eslint配置
接下来运行下面代码块中的命令为 Prettier 创建文件。
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
打开您的.eslintrc.json文件并添加这些配置设置。Prettier 需要排在数组的最后，否则将无法正常工作。
"extends": ["airbnb-base", "plugin:prettier/recommended"],
"plugins": ["prettier"],
接下来打开.prettierrc.json文件并复制并粘贴这些设置。您可以在Prettier Options文档中了解这些配置。这只是我的设置，您可以根据自己的喜好创建自己的设置。
{
"printWidth": 100,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"useTabs": false,
"trailingComma": "none",
"endOfLine": "auto"
}
最后运行下面的代码为 ESLint 和 Prettier 创建一些忽略文件。它们就像.gitignore文件一样工作，因此您在其中的任何条目都将被忽略，因此它们不会被删除或格式化。
touch .prettierignore .eslintignore
只需将相同的代码复制并粘贴到.prettierignoreand.eslintignore文件中即可。
node_modules
package.lock.json
build
使用 ESLint 和 Prettier
touch index.js
将此 JavaScript 代码添加到文件中。
const x = 100;
console.log(x);
const test = (a, b) => {
return a + b;
};
在您的代码编辑器中，您应该在底部的问题选项卡中看到一些错误和警告。如果您通过在整个位置添加间距或制表符来降低代码的可读性，然后保存文件。Prettier 应该清理并修复一切。
在 console.log 和测试函数名称下应该有一条波浪线。如果您将鼠标光标悬停在它们上，您可以看到分配给它们的 ESLint 规则。转到.eslintrc.json文件并在底部添加这些规则。
"rules": {
"no-console": "off",
"no-unused-vars": "off"
}
现在，如果您返回index.js文件，警告应该消失了！您可以在ESLint 规则文档中找到所有规则。也可以.prettierrc.json通过转到Prettier Options页面来更改文件中的规则/选项。
