1.eslint是一个js语法检查和格式化检查工具。通过.eslintrc/.eslintrc.js/.eslintrc.json来做一些配置
（1） npm init -y ，npm install eslint 。安装好eslint以后。我们新建一个.eslintrc文件。注意这里面几个核心的配置：
root: true,
env: {
node: true,
es6: true,//是否支持node环境
browser: true, //是否支持浏览器环境
},
plugins: ['html'], //扩展的插件
extends: ['eslint:recommended'],//eslint的检查交给谁来处理
parserOptions: {
// parser: 'babel-eslint'
ecmaVersion: 12, //ecscript版本
},
rules:{
}
注意这里的extends选项。我们默认让eslint推荐的配置来对js进行检查。此时我们可以不用填写rules里的选项；第二个要注意的就是plugins:[]，这里的html其实是eslint-plugin-html的缩写。eslint的相关插件完整写法是eslint-plugin-xxx,比如eslint-plugin-prettir,eslint-plugin-html。
（2）我们在项目根目录新建一个.vscode目录。在此目录下新建一个.settings.json文件。再里面做一点配置保存自动格式化
{
"editor.codeActionsOnSave": {
"source.fixAll": true, //这个是保存自动格式化的核心配置
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html", {
"language": "html",
"autoFix": true
}
],
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
}
（3）我们在项目根目录新建一个index.js文件。随便写入一些内容：（注意空格）
const arr = [1, 2, 3, 4, 455]
const str = 'china'
const test = (a, b) => {
console.log( a + b)
}
const obj = { a: 1, b: 2 }
编辑
此时会发现有一些提示，我们直接保存。就能正常去掉哪些空格。格式化。
至此。我们通过eslint+vscode/settings.json的配置就能正常对js文件格式化
注意：如果保存并未格式化。我们需要看看vscode有下角是否有这个提示：
编辑
我们点击配置：出现如下下拉选项。然后我们点击json语言功能，此时就能正常的保持自动格式化编辑
但是。如果我们项目有个index.html呢？
我们在根目录新建一个index.html。输入一些格式乱掉的代码（注意空格）
编辑
此时保存。发现js代码并没有自动格式化？原因在哪儿？
eslint无法检查html中的js。对。它只能检查完全的js文件。所以。此时我们需要一个插件，它就是eslint-plugin-html。
我们通过npm i eslint-plugin-html -D安装它以后再.eslintrc.js里做一点点的改动。
编辑
没错。就是把eslint-plugin-html添加到eslintrc.json的plugins列表里
此时我们再次保存index.html会发现script标签里的js代码已经去掉了空格，正常格式化了。
但是到这里就结束了吗？我们如果想要对整个html代码更加美观自动格式化呢？很显然。eslint已经无能为力了。
有一个东西。她可以对多语言支持。它就是prittier。用来格式化代码的。它配置很少。却支持广泛。我们让他配合eslint来做更好的格式化。
（1）npm i prettier eslint-config-prettier eslint-plugin-prettier -D
这里说一下eslint-plugin-prettier，它是用来扩展eslint的一个插件。让它的规则成了eslint的规范
而另一个依赖包，eslint-config-prettier 是用来干啥的？我们之前说过，eslint是用来做代码检测和格式化的。eslint本身有一些配置项可以做一些格式化的处理，比如单引号双引号，tab的缩进等但是prettier本身也有对这些规则的配置。如果他们一起难免冲突。这时候就需要eslint-config-prettier它了。它会屏蔽掉冲突的配置并以prettier为主
（2）我们需要更改eslint的相关配置了，主要是plugins和extends这两个选项
root: true,
env: {
node: true,
es6: true,
browser: true,
},
plugins: ['prettier'],
// extends: ['eslint:recommended'],
extends: ['plugin:prettier/recommended'],
parserOptions: {
// parser: 'babel-eslint'
ecmaVersion: 12,
},
一切以prettier为主。同时我们新建一个.prettierrc文件做一些基本的配置
{
"tabWidth": 2, //tab键为2个空格
printWidth:100, //100个字符就自动换行
"semi": false, //结尾不要分号
"singleQuote": true, //引号为单引号
"bracketSpacing":true, //对象前后需要空格
}
此时我们保存。发现js文件按prettier的格式来了。比如 printWidth:100, 因为原先的数组不管我们写多长它都不会换行
但是问题来了？我们对html文件依然无效。丑陋的html标签和css都没有被格式化？到底还差在哪一步？
这时候我们回到vscode/setttings.json里面，添加如下几个配置
编辑
没错。添加对html的支持。让它接收prettier的检查。同时打开"editor.formatOnSave": true,这个配置（非常重要），此时再保存，html页面也会自动格式化。
这里特别要注意一点。不要忘记对vscode的settings.json中不要html的配置，第二点：
.prettre中不要配置parse选项。否则无效。
编辑
prettier官网对parse有了说明：它会根据你文件的路径分析你到底是什么类型。如果你设置parser：“babel”,那么对于html的检查就是失效。也就无法格式化
特别说明：如果想要保存自动格式化，前提一定要在vscode中安装eslint和prettier插件
对于截图中一直报错的红色波浪线，我们通过给eslintrc设置enabled:false来关闭它
编辑
