两者的区别
eslint
:代码格式
和代码质量
都支持检查,但最擅长的是代码质量处理,不擅长代码格式处理。prettier
:是一个代码格式
化工具,只做代码格式化处理,比如是否使用单引号,语句结尾是否使用分号等等。
- 结论:我们一般采用eslint来做代码质量约束,用prettier来做代码风格约束。
使用
- 安装vscode插件:
eslint
和Prettier - Code formatter
- 安装依赖包:
yarn add eslint@7.32.0 -D
settings.json
配置:- 开启保存触发自动格式化功能: “editor.formatOnSave”: true
- 设置默认格式化工具:“editor.defaultFormatter”: “esbenp.prettier-vscode”
- 新建配置文件
.eslintrc.js
:配置参考vue3案例 - 新建配置文件
.prettierrc.js
:文件保存时就会按这个配置格式化文件
// .pretti