prettier 与 SELint

千万注意： 配置完成后， 或者 添加修改 .prettierrc.js .prettierignore 后，需要重启项目！！！ 重启项目！！！

不然 会 好多地方闪红
原理应该在于： 编译器 打开时 读取配置文件， 修改配置后需要 重载 才能修改运行配置
重载前：

重载后：

vue中

使用 vue create 项目 时， 载入 eslint-config-airbnb 插件即可 npm install eslint-config-airbnb -D

1. 创建项目 选择的内容
   
2. 安装 插件 npm install eslint-config-airbnb -D
   
3. 添加 .prettierrc.js .prettierignore 两个文件
   
4. 重启 vscode
5. 项目 包文件说明
   

介绍环境

参考连接： https://ok25891wan.coding.net/share/km/733278ce-0f52-4147-823a-b25671e8f395

• 千万注意： 配置完成后， 重启项目！！！ 重启项目！！！(重新打开 vscode)

版本：

    "@vue/cli-plugin-eslint": "^5.0.8",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.14.0",
    "prettier": "^2.8.8",
    "prettier-eslint-cli": "^7.1.0"

1. 安装 插件 (必须指定 插件版本)

完整包 安装：npm i eslint@7 prettier@2 eslint-plugin-prettier@4 eslint-config-prettier prettier-eslint-cli babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb -D
vue 选择主要安装：npm i prettier eslint-plugin-prettier eslint-config-prettier babel-eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb -D
单个安装：
npm i eslint@7 prettier@2 -D
npm i eslint-plugin-prettier@4 eslint-config-prettier prettier-eslint-cli -D
npm install babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint -D
npm install eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb -D

• eslint 《主要》核心代码
• prettier《主要》插件的核心代码
• eslint-plugin-prettier 《主要》将prettier作为ESLint规范来使用
• eslint-config-prettier 《主要》解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
• prettier-eslint-cli :prettier-eslint-cli 允许你对多个文件用prettier-eslint进行格式化。
  那么 prettier-eslint 是怎么让结果变得正确了呢？昨天我去它的 github 看了看，原来它是先把代码用 prettier 格式化，然后再用 ESLint fix。
• babel-eslint《主要》:eslint 与 babel 整合包
• eslint-plugin-vue @vue/cli-plugin-eslint eslint 与 vue 整合包
• eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-airbnb 《主要》
  引入Airbnb规则
  为了避免我们自己按照 Eslint 的规则一个一个来个性化定制规则，可以引用可以使用GitHub - airbnb/javascript: JavaScript Style Guide规范来定义规则。Airbnb 的这份编码规范是互联网上最受欢迎的 JavaScript 编码规范之一。 它几乎涵盖了 JavaScript 的各个方面

2. 初始化 eslint， 获得 .eslitrc.js 配置文件

`npx eslint --init ` (键盘控制 左右选择)

3. 在 .eslintrc.js 中 修改属性

```纯文本
{
        "extends":[
            "...",
            prettier
        ]
    }

```

4. 上面 将部分 "ESLint" 的规则禁用了， 避免 Prettier 格式化之后的代码 导致 ESLint 报错而已

5. 下面 将两者结合

6. 下载插件

`npm install eslint-plugin-prettier -D`

7. 在 .eslintrc.js 中 修改属性

```纯文本
{
        "plugins":["prettier"],
        "rules":{
            "prettier/prettier":"error"
        }
    }  

```

简化后 可以直接 extend 一下 (将第三个 删除即可，不删除也要放在最后面，使其生效)

```null
    {
        "extends":[
            "..."，
            'airbnb',  // eslint 校验规则
            "plugin:prettier/recommended"  //格式化规则 
        ]
    }



```

上面这一行 相当于

```纯文本
{
        "extends": ["prettier"], // 使用eslinst-config-prettier中的配置项
        "plugins": ["prettier"], // 注册该prettier插件
        "rules": {
            "prettier/prettier": "error", // 在eslint中运行prettier，并启用该插件提供的规则
            "arrow-body-style": "off", // 关闭规则
            "prefer-arrow-callback": "off" // 关闭规则
        }
    }
```

8. 最后一步 很关键， 在 vscode的设置 中， setting.json 全部内容注释掉( 非小白可以不做)

添加 内容
{
"editor.formatOnSave": true, // 可选,启用保存后自动格式化
}

9. 其他文件格式：

• .eslintrc.js esline 的配置文件
• .prettierignore 排除文件 (默认没有内容)
• .prettierrc.js prettier 的配置文件 (默认有内容)

10. 测试， 新建一个 main.js 输入随便内容，保存自动会 格式化

11. 扩展：

• 此时会有一个默认的 .prettierrc 文件，在刚才下载的包里，
  默认应用的是 那个文件里的参数
  如果需要自定义 配置： 在根目录新建一个 .prettierrc 设置内容即可
  • 如果不希望 文件被 格式化，是跳过格式化的， 添加 文件 .prettierignore， 与.prettierrc.js 同目录下
    格式 请见：
    https://blog.csdn.net/weixin_43459866/article/details/124249172

12. 最终的 setting.json 文件

{
//#################################################################################
"editor.formatOnSave": true, // 可选,启用保存后自动格式化
"editor.defaultFormatter": "esbenp.prettier-vscode",
// "javascript.format.enable": false,    // 禁用VS Code自带的JS格式化程序
// "typescript.format.enable": false     // 禁用VS Code自带的TS格式化程序
}

13. 详细配置文件解析

eslint 配置文件详细介绍: 
[https://zhuanlan.zhihu.com/p/548306020?utm_id=0](https://zhuanlan.zhihu.com/p/548306020?utm_id=0)

partte 与 eslint 合并介绍：
[https://mp.weixin.qq.com/s/Q0Zbv-T3PTkqX8lqK-VWGA](https://mp.weixin.qq.com/s/Q0Zbv-T3PTkqX8lqK-VWGA)

安装介绍 ： 
[https://mp.weixin.qq.com/s/O9m40zo_j-waJGPGESC6WQ](https://mp.weixin.qq.com/s/O9m40zo_j-waJGPGESC6WQ)