ESLint规范

一、ESLint规范

1、 gitlub地址

2、它被设计的容易拓展、拥有大量的自定义规则、容易的通过插件来安装。它给出准确的输出，而且包括规则名，这样可以知道哪个规则造成了错误。

3、 ESLint文档多少有些混乱。规则容易查找，以及被分为逻辑组，但是配置指南在有些地方容易弄混。然而它可以在一个地方提供链接去编辑集成、插件和样例。

4、 ESLint是JavaScript的linting实用程序。

5、 ESLint不依赖于特定的编码约定，用户也可以自由地启用或禁用各个编码约定。从这个意义上讲，它的一个主要特点是其高度可定制性。

6、用户可以通过定义原始规则来灵活地设置编码标准，这些规则是ESLint中默认可用的编码规则。此外，第三方共享的着名编码约定，例如“Google JavaScript Style Guide”或“Airbnb JavaScript Style Guide”也可以重复使用。

7、您甚至可以在遵循这些编码约定的同时启用/禁用特定文件的特定规则。

8、如果您不知道要开始的设置，可以参考ESLint官方提供的“入门”指南，以使用建议的编码约定。

9、该文件导出一个对象，对象包含属性 env、 extends、 parserOptions、 plugins、 rules五个属性：

10、可以在项目根目录创建，告诉ESLint忽略某些文件或者目录。相当于.gitignore都是纯文本文件。

11、 Standard:

12、 Airbnb:

13、打开"editor.formatOnSave": true并且要打开 eslint.validate如上面的配置，或者在UI界面里面设置。

14、 [图片上传失败...(image-4d8bb7-1591250318526)]

15、 Configure ESLint, Prettier, and Flow in VS Code for React Development

二、如何在vue3项目中使用eslint方法

1、在Vue3项目中使用ESLint方法，首先需利用npm或yarn进行安装，具体命令如下：

2、创建项目根目录下的`.eslintrc.js`文件，配置ESLint规则，通过以下命令创建文件并添加基本配置。

3、执行安装命令后，系统将呈现一些配置选项，根据实际需求选择并进行配置。对于Vue3项目，建议选择以下配置选项。

4、完成配置后，系统会自动生成`.eslintrc.js`文件，按照所选配置进行自动设置。

5、使用以下命令可对整个项目执行ESLint检查，若需单独检查特定文件或文件夹，可指定文件路径。

6、在`package.json`文件的`scripts`字段添加以下命令，便于快捷执行检查功能：

7、其中`lint`命令用于代码检查，`lint:fix`命令用于自动修复部分可修复的错误。通过运行`npm run lint`或`yarn run lint`命令即可执行检查。

三、Eslint和Prettier的配置与冲突处理

在提升前端开发质量和团队协作效率方面，Eslint和Prettier的协同作用不可忽视。它们的结合旨在实现代码风格的统一。

尽管Eslint已经提供基础的代码规范，但Prettier在格式化方面更为全面。因此，我们需要配置Prettier增强Eslint的效果，它支持多种文件格式的格式化，通过.prettierrc.json进行定制。

在实际操作中，可能会遇到Eslint和Prettier的冲突，如代码保存后风格不一致和eslint报错。此时，可以借助eslint-config-prettier规则集来解决，通过在.eslintrc.json中添加Prettier的规则集和eslint-plugin-prettier插件来整合配置。

官方推荐的配置是将上述步骤整合，利用plugin:prettier/recommended插件来自动化处理大部分冲突。这个插件负责执行Prettier的规则，简化了配置过程。

值得注意的是，从ESLint v8.53.0开始，官方计划弃用代码风格相关规则，因此项目根目录应同时包含.eslintrc.js和.prettierrc文件，以适应这一变化。