VSCode 中使用 ESlint 和 prettier 的正确姿势
最新回答
战皆罪
2024-11-30 12:50:50
ESlint是一款专门针对JavaScript语法规则进行验证的工具。由于JavaScript是一门灵活的动态语言，存在多种写法。为了便于他人理解，快速上手代码，一些大型公司制定了代码编写规范，而ESlint正是用于验证这些人为设定的语法规则是否得到遵守。例如，对于JavaScript代码，虽然以下两种写法均符合规范，但第二种更为规范：
第一种写法: `let x = 'abc'`
第二种写法: `let x = 'abc'`
使用ESlint插件后，VSCode会提供友好的提示，以便更好地理解规则。更多详细的规则说明，请参考ESlint的文档。
prettier则是一个专注于代码格式化的插件。它不关心代码的语法是否正确，而是专注于代码的格式。例如，是否使用单引号、语句结尾是否使用分号等。
项目中的配置涉及两个关键方面：项目本身依赖的包以及VSCode插件的支持。以一个使用create-react-app搭建的新项目为例。项目启动后，通过`npm run start`命令运行的开发环境已启用了ESlint的验证，错误提示会出现在终端中。为使错误在VSCode中高亮显示，需要在VSCode中开启相应的插件。
深入VSCode配置时，通常需要对VSCode的相关参数进行进一步调整。例如，`eslint.probe`参数用于指定ESlint插件需要验证的语言类型。添加相应的语言后，VSCode会在代码编辑器中正确地高亮错误语法，并在窗口中输出错误信息。对于Vue项目，需要添加`"html", "vue"`以在.vue单文件中启用ESlint检测。这两个选项需要`eslint-plugin-vue`和`eslint-plugin-html`两个包的支持，建议将它们添加到VSCode中项目的`workspace settings`中，以避免在非Vue项目中出现错误。
另一个参数`eslint.validate`用于定义验证类型，而`editor.codeActionOnSave`则用于提供常见语法问题的修复方案，如保存代码时自动修复错误。
开启prettier格式化后，VSCode已能正确显示ESlint的报错信息。接下来，要开启prettier的格式化。ESlint已集成了prettier的校验规则，因此在VSCode中不需要单独安装prettier插件。只需在`package.json`中添加相应的插件，并定义校验等级（如设置为`error`），以使ESlint窗口直接输出prettier的报错信息。为了自动格式化prettier的错误，还需要添加相应的规则。
完成上述配置后，VSCode将能够正确展示ESlint和prettier的错误提示。
总体而言，要在VSCode中实现代码校验和格式化，需要确保项目依赖包的正确配置，并在VSCode中安装ESlint插件，同时调整相关设置以实现错误的高亮显示和代码的自动修复。这样，开发人员可以更高效地优化代码质量和开发体验。
热门标签
