Eslint+Prettier 管理团队的代码风格，请看干货，附代码地址

规范团队代码风格

前端代码格式化社区 ESLint和Prettier，来帮助团队维护代码风格的一致性。

Eslint

具体用法和原理就自行查阅资料进行了解

作用

代码检查，自由配置规则，检查出不符合规则的语句，自动修复部分问题

vsode中启用

1. 扩展列表里下载 Eslint

   具体开启在用户级别的setting或者项目级别的settings.json中进行如下设置：

    "eslint.enable": true, // 开启eslint
   

2. 在当前项目或者全局安装 eslint （推荐项目里安装）看项目配置了

3. 项目根目录 看是否有对应配置文件 没有则添加 .eslintrc.js 或 .eslintrc.json 或 .eslintrc

4. 文件保存时自动修复 同settings.json 增加

   "eslint.enable": true, // 开启eslint检查
   "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
   

Prettier

作用

Prettier是一个强大的代码格式化工具，支持多种语言，包括JavaScript、TypeScript、HTML、CSS等。 它可以根据项目配置自动调整代码格式，使代码风格保持一致。 Prettier具有很好的可扩展性，可以与编辑器和其他工具集成

有了eslint 为啥还要使用 Prettier？

1. ESLint的配置太杂太多，而Prettier配置相对来说就少了很多。一般常用的就是 锁进，行宽，引号之类，使得团队代码在外观上保持一致
2. 功能互补，ESLint 主要解决代码中的逻辑错误和不规范的写法，例如未定义的变量、未使用的变量、不正确的函数调用等。Prettier 则负责统一代码的外观格式。
3. 使用 Prettier 可以自动格式化代码，使开发者无需手动调整代码格式，从而提高开发效率。
4. 团队协作，使用 Prettier 可以确保团队中每个成员的代码风格一致，不再因为格式问题产生 PR 的纠纷和讨论

vsode中启用

1. 扩展列表里下载 Prettier - Code formatter 在settings.json 启用

   "editor.defaultFormatter": "esbenp.prettier-vscode"
   

   也可以指定语言

   "[javascript]" {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
   

2. 开启代码保存时，自动格式化

   "editor.formatOnSave": true, // 开启格式化
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "prettier.requireConfig":true, // 只有在项目中存在 Prettier 配置文件时才会执行 Prettier 的格式化。
   

settings.json最后配置

  "eslint.enable": true, // 开启eslint检查
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.formatOnSave": true,  // 开启格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.requireConfig":true, // 只有在项目中存在 Prettier 配置文件时才会执行 Prettier 的格式化。

Prettier 配合 Eslint

两者互有重合和冲突的规则，怎么去解决呢？

主要运用以下插件

• eslint-config-prettier 是一个用于关闭 ESLint 中与 Prettier 冲突的规则的配置。
• eslint-plugin-prettier 是一个将 Prettier 集成到 ESLint 的插件

安装到项目使用

npm install eslint-config-prettier eslint-plugin-prettier -D

.eslintrc.js 写入

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended' //一定要放在其他扩展配置之后
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
    // 其他 ESLint 规则
  }
}

这个配置确保 ESLint 规则和 Prettier 规则能够和谐共存，并且通过 ESLint 一次性检查所有问题。

代码参考demo

码云地址