前端规范-ESLint&&Prettier前端规范-ESLint&&Prettier 在前端开发中，最常用的检测代码工具

前端规范-ESLint&&Prettier

在前端开发中，最常用的检测代码工具和格式化代码工具莫属他俩了，本文着重讲解他俩的 '爱恨情仇'

自己总结的小文章

Husky+Lint-Staged+Commitlint+ESLint+Prettier

ESLint

Prettier

ESLint 和 Prettier

ESLint 和 Prettier 他俩的主要工作是不同的，但又有一部分交集，所以在本文就详细说明一下。

ESLint 它可以检查代码并且可以根据配置的规则进行格式化代码，来形成统一的风格。但是又没有Prettier 格式化的功能好，所以在 ESLint 使用的同时配合 Prettier 一起使用.

Prettier 给出了两个库 eslint-plugin-prettier 和 eslint-config-prettier，这两个库官方说可以解决 ESLint 和 Prettier 之间的冲突的，下面就来了解一下他们做了什么？

eslint-config-prettier 的作用就是内置了很多规则，从源码中可以看到，就是暴露一个 rules 对象，它就是主打一个关闭与 ESLint 冲突的规则比如 semi （看图一）

eslint-plugin-prettier 的作用就是内置了 prettier 的 eslint 规则, 并且会根据 Prettier 的配置文件 .prettierrc 的配置内容来进行检查。也关闭了两项规则 arrow-body-style 和 prefer-arrow-callback,还开启了它自己的 'prettier/prettier': 'error'规则。

这边可能会遇到的问题 `(以 vscode 中碰到的问题来说)`

delete ␍ eslintprettier/prettier 在代码中可能会报这个错，解决方法1：过添加rules 覆盖 prettier/prettier 规则来，在数组中添加一个对象

{
 rules: {
    'prettier/prettier': [
        'error',
        {	
            "endOfLine": "auto",
        }
     ],
}

解决方法2：修改 .prettierrc 中的配置项 "endOfLine": "auto"

github 中还介绍了一个 options 有兴趣可以看以下

修改 .prettierrc 某些配置后不会生效，也有可能在不同文件有的生效，有的不生效，这里我重启编译器解决了此问题。

这里碰到第二点的问题，可以通过 eslint . 来检查一下代码是否存在问题，有时 eslint 可以检查出来，但是编辑器不提示，这种情况检查不出来可以尝试重启编辑器，

如果检查不出来比如在检测js和ts 时，发现js可以正确提示，ts 不可以，可以确定一下是否正确使用了 parser 解析器，如果解析器使用默认的，解析不出 ts 的问题是正常的，如果直观的看不到到解析器相关的配置，可以通过 eslint --print-config 文件名称 来查看 eslint 的配置项。检查配置项正常，但还是不提示，那还是按上面的方法尝试一下。

修改 eslint 和 prettier 的配置后，没有效果就重启编辑器

保存自动修复

在保存代码时，自动修复功能，在vscode 插件库中安装 ESLint 和 Prettier,然后打开根目录或者vscode全局文件settings.json 文件，写入一下代码

{
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化器 使用 Prettier 
    "editor.formatOnSave": true, // Prettier 是否保存时格式化
    "eslint.enable": true, // ESLint 启动检查
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit" // ESLint 修复错误代码
    }
}

参考链接

# Prettier Formatter for Visual Studio Code

# VS Code ESLint extension

前端规范-ESLint&&Prettier