统一代码风格eslint + prettier

在多人开发项目中，不同的开发人员有不同的开发习惯。如果不加约束，会导致代码混乱，降低代码的可读性，增加开发和拓展难度。

我采用eslint和prettier来约束代码风格，具体使用方法我做了一下总结。

这里主要使用的是普通的前端项目进行说明，Vue等许多前端框架已经将eslint融合其中，如果使用类似框架，可以直接跳过安装步骤。

当然关于规则等更详细的内容，大家可以参考官网。

安装

先初始化项目。

npm init -y

根目录出现package.json文件，接下来我们可以安装eslint和prettier了。

这里prettier是作为eslint的插件引入的，所以需要安装如下：

npm i eslint prettier eslint-plugin-prettier -D

配置

eslint的配置文件可以有很多格式，也可以配置在package.json里。不过我个人为了更好的管理，所以喜欢单独配置。

我这里使用的配置文件类型是.eslintrc.js。配置方案如下，大家可以根据项目需要进行增删。

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    // node: true,
    // jquery: true
  },
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

这样eslint就会按照prettier的默认设置对代码进行格式化了。

自定义

当然prettier也可以自定义配置。官网提供了详细的配置说明。

module.exports = {
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true, // 单引号
        trailingComma: 'none' // 末尾逗号
      }
    ]
  }
};

注：如需自定义的配置过多，建议在独立的.prettierrc.json文件中进行配置。