react 项目统一代码风格的相关配置

react 项目统一代码风格的相关配置

1. 相关自动化工具简介

1.1 Prettier

Prettier 这个工具能够格式化，规范化代码，使其更加工整。它一般不会检查我们代码具体的写法，而是在"可读性"上做文章。目前支持包括 JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS(Less、SCSS)、HTML、JSON 等多种语言。

总的来说，它能够将原始代码风格移除，并替换为团队统一配置的代码风格。使用它的优点如下：

• 构建并统一代码风格

• 帮助团队新成员快速融入团队

• 开发者可以完全聚焦业务开发，不必在代码整理上花费过多心思

• 方便，低成本灵活接入，并快速发挥作用

• 清理并规范已有代码

• 减少潜在 Bug

• 丰富强大的社区支持

试一试： https://prettier.io/playground/

1.2 ESLint

下面来看一下以 ESLint 为代表的 Linter。Code Linting 表示基于静态分析代码原理，找出代码反模式的过程。多数编程语言都有 Linter，它们往往被集成在编译阶段，完成 Coding Linting 的任务。

对于 JavaScript 这种动态、宽松类型的语言来说，开发者更容易犯错。由于 JavaScript 不具备先天编译流程，往往会在运行时暴露错误，而 Linter，尤其最具代表性的 ESLint 的出现，允许开发者在执行前发现代码错误或不合理的写法。

ESLint 最重要的几点哲学思想：

• 所有规则都插件化

• 所有规则都可插拔（随时开关）

• 所有设计都透明化

• 使用 Espree 进行 JavaScript 解析

• 使用 AST 分析语法

配置文件.eslintrc.js 主要由六个字段组成：

module.exports = {
   
  env: {
   },

  extends: {
   },

  plugins: {
   },

  parser: {
   },

  parserOptions: {
   },