代码样式自动规范，让项目从此井然有序

2023-12-19 19:04:14

自动化代码格式化的优势

代码统一
ESLint+Prettier能帮助团队统一代码风格，让每个人写出来的代码都遵循相同的规范，提高代码的可读性和可维护性。
自动检测问题
ESLint+Prettier能自动检测出编码风格的问题，并给出修复建议，帮助你快速发现并改正编码习惯中的问题。
提高效率
ESLint+Prettier可以自动格式化代码，帮你节省大量的时间和精力，让你可以更专注于开发本身。

ESLint与Prettier的协作

ESLint和Prettier的协作非常紧密，它们可以在同一个项目中使用，ESLint主要负责检查代码的语法和语义错误，而Prettier主要负责格式化代码。通常，ESLint会先检测代码中的问题，然后Prettier会根据ESLint的规则对代码进行格式化，确保代码既符合语义规则，又符合格式规范。

如何在项目中使用ESLint和Prettier

安装ESLint
在项目中安装ESLint，可以通过以下命令：

npm install eslint --save-dev

创建.eslintrc文件
在项目根目录下创建.eslintrc文件，该文件用来配置ESLint的规则。你可以根据自己的需要选择ESLint的规则，也可以使用一些预定义的规则集，如airbnb、standard等。
安装Prettier
在项目中安装Prettier，可以通过以下命令：

npm install prettier --save-dev

创建.prettierrc文件
在项目根目录下创建.prettierrc文件，该文件用来配置Prettier的规则。你可以根据自己的需要选择Prettier的规则，也可以使用一些预定义的规则集，如airbnb、standard等。
集成到webpack
在webpack配置文件中，添加ESLint和Prettier插件，并对代码进行检查和格式化。

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'eslint-loader',
            options: {
              configFile: '.eslintrc.js'
            }
          },
          {
            loader: 'prettier-loader',
            options: {
              configFile: '.prettierrc.js'
            }
          }
        ]
      }
    ]
  }
  // ...其他配置
};