欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

统一代码风格eslint + prettier

程序员文章站 2022-05-31 20:15:36
...

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

我采用eslintprettier来约束代码风格,具体使用方法我做了一下总结。

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

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

安装

先初始化项目。

npm init -y

根目录出现package.json文件,接下来我们可以安装eslintprettier了。

这里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文件中进行配置。

相关标签: eslint 前端