eslint可以规范我们的编码，让项目中的代码风格一致，更容易阅读和维护，在我们的代码没有的时候可以使用prettier符合eslint规范。维修。eslint通过npminstalleslint-D安装eslint，然后执行npxeslint--init初始化配置文件。在执行init操作的时候，eslint会生成配置文件，问你一些关于如何使用eslint模块化的问题（Es模块，commonjs）选择哪个框架（React，Vue）是否需要TypeScript项目在浏览器中运行或者客户端指定什么代码规范（Airbnb、Standard、Google、XO）生成的配置文件类型（JavaScript、YAML、JSON）依次选择完成后，让它自动安装所需的依赖项。在这些问题中，我选择了使用eslint时检查代码，发现问题后提醒，模块化使用commonjs，不需要框架和TypeScript，项目运行在浏览器端，使用airbnb编码标准，生成配置文件为JavaScript，这样就生成了eslint配置文件.eslintrc.jsenv，它表示当前eslint代码运行的环境。extends表示继承的规则。parserOptions定义支持的ecmaScript版本。规则中可以自定义规则。这些规则之后，使用命令npxeslint./src/index.js验证文件，根据airbnb标准，五行代码检测出六个错误和一个警告。一个命令对一个文件的检测效率会比较低。可以直接在项目中配置loader处理eslint-loader，通过npminstalleslint-loader-D安装依赖，在webpack.config.js中配置eslint-loader统一处理js文件module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:['eslint-loader'],},],},执行npmrunbuild，当文件有错误时，将不会编译vs代码插件。既然eslint检测到这么多错误，我们就得解决问题，让代码符合规范。上面的错误和警告可以概括为引号：Stringsmustusesinglequote，表示必须使用单引号semi:Missingsemicolon，表示行尾缺少分号no-unused-vars，定义变量但是notusingno-console，不要期望使用console对于语句import/prefer-default-export，建议使用defaultexport。无论是eslint工具还是eslint-loader错误码，都有提示“4errorsand0warningspotentiallyfixablewiththe'--fix'option”。然后我们通过--fix处理这个文件，通过npxeslint--fix./src/index.js执行，发现只剩下一些工具可以帮助我们修复一些错误，包括行尾的分号和单引号在字符串中。像上面的代码，你在写的过程中可能不知道哪里出错了。如果平时写代码会有不符合规范的错误提示，一些不规范的代码可以自动修复，比如双引号转换单引号会给开发带来更大的方便。vscode中的插件可以实现这个效果，ESLint用于错误提醒，Prettier用于代码格式化。ESLint工具会读取本地的eslint配置，并将错误和警告报告到文件中。红色标记表示“错误”，黄色下划线表示“警告”。Prettier的自动格式化代码需要我们做一些配置。你可以通过vscode中的Settings来设置代码格式化规则。选择后会自动添加到setting.json中，比如用单引号代替双引号。prettier还可以在配置文件.prettierrc中指定项目的代码格式规范，比如宽度超过100自动换行。配置完成后可以通过快捷键自动格式化~修复无法修改的错误工具自动修复只能手动处理。我们可以通过三种方式修复错误，修改错误的源代码，关闭错误提醒或者设置为“warn”，将错误配置为项目中需要的格式。在.eslintrc.js的rules属性中配置自定义规则。规则有3个选项，“off”或0表示关闭验证，“warn”或1表示没有错误只警告，“error”或2表示错误，比如你不想有一个console语句，去掉console语句定义变量但不使用，不报错，只是warn'no-unused-vars':'warn'usedoublequotestoreportanerror，默认是single引号，但是我们修改指定项目中的字符串使用双引号quotes:[2,'double']通过--fix或prettier自动修复后，有2个错误和1个警告，警告不影响文件编译，其他两个错误可以设置关闭和警告规则：{'no-unused-vars':'warn','import/prefer-default-export':0,}，再次运行npmrunbuild，只有两个警告即可被编译，代码不再标红。eslint和prettier在前端工程方向上起到了很大的作用，可以减少开发错误，帮助团队形成更一致的编码风格。以上是eslint和prettier的总结。更多关于webpack的内容可以参考我的其他博文，正在更新中~
