vscode中,如何正确的使用eslint和prettier?

1、eslint和prettier是什么?

eslint是代码的规范性检查工具,只针对js/jsx等文件
prettier是代码的格式化工具,可以格式化js/html/css/less/sass...等代码

从定位可以看出二者还是有区别的,一个用来检查规范性,一个格式化。
eslint也可以通过--fix进行针对不符合规范的少量代码格式化修复,对代码的可读性没有改变,只是统一了如使用单引号、多引号等问题。而prettier意为使...美观,可以将代码格式化代码成看起来比较舒服的形式。

2、如何使用

二者配合使用最佳,同时,安装vscode插件:Prettier ESLint。该插件是集合了prettier插件及eslint插件之长,可与eslint和prettier安装包配合使用。

vscode中,如何正确的使用eslint和prettier?

如上图,该插件说了,需安装eslint及prettier包。同时配合.eslintrc.js及.prettierrc.js文件。

该插件Prettier ESLint快捷格式化按键为:ctrl+shift+p,可通过设置 Format on Save,在保存时自动格式化。

vscode中,如何正确的使用eslint和prettier?

以上,如有问题,欢迎交流!