eslint+prettier统一管理前端代码规范-基础篇

两者的区别

1. eslint：代码格式和代码质量都支持检查，但最擅长的是代码质量处理，不擅长代码格式处理。
2. prettier：是一个代码格式化工具，只做代码格式化处理，比如是否使用单引号，语句结尾是否使用分号等等。

• 结论：我们一般采用eslint来做代码质量约束，用prettier来做代码风格约束。

使用

1. 安装vscode插件：eslint 和 Prettier - Code formatter
2. 安装依赖包：yarn add [email protected] -D
3. settings.json配置：
   • 开启保存触发自动格式化功能： “editor.formatOnSave”: true
   • 设置默认格式化工具：“editor.defaultFormatter”: “esbenp.prettier-vscode”
   • 新建配置文件.eslintrc.js：配置参考vue3案例
   • 新建配置文件.prettierrc.js：文件保存时就会按这个配置格式化文件

   // .prettierrc.js
   module.exports = {
     semi: true,
     singleQuote: true
   }
   

创建.prettierignore文件

将不需要格式化的文件或目录名称写在该文件中

dist
node_modules
.eslintignore
.prettierignore