代码规范优点

由于项目开发多成员协作问题，程序员开发习惯不同，项目的不断迭代会导致代码质量问题、代码维护问题、可读性问题的出现，所以好的校验工具可以确保一个项目遵循代码规范、避免一些常见的隐患出现

Prettier

配置文档地址: https://prettier.io/docs/en/options.html

1. 在项目根目录下添加prettier.config.js

module.exports = {
  printWidth: 80, // 一行最大多少字符
  tabWidth: 2, // tab占用的字符数
  semi: false, // 在语句末尾添加分号
  useTabs: false, // 是否使用tab代替空格
  singleQuote: true, // 是否使用单引号
  jsxSingleQuote: false, // jsx是否使用单引号
  jsxBracketSameLinte: true, // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
  trailingComma: 'none', // 在任何可能的多行中输入尾逗号
  bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
  jsxBracketSameLine: false, // 看官网
  arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号,
  /**
   * endOfLine: "<auto|lf|crlf|cr>"
   * "auto" - 维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）
   * "lf"- Line Feed only（\n），在Linux和macOS以及git repos内部很常见
   * "crlf"- 回车符+换行符（\r\n），在Windows上很常见
   * "cr"- 仅限回车符（\r），很少使用
   */
  endOfLine: 'auto' // 文件行结尾风格
}

Eslint

配置文档地址：https://cn.eslint.org/docs/rules/

1. 在项目跟目录下添加.eslintrc.json

module.exports = {
  parser: 'babel-eslint',
  env: {
    browser: true,
    node: true,
    commonjs: true,
    amd: true,
    es6: true,
    mocha: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'], // 使用Eslint官方规则推荐
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  rules: {
    semi: 0, // 要求或禁止使用分号代替 ASI
    'no-undef': 2, // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
    'jsx-quotes': 0, // 强制在 JSX 属性中一致地使用双引号或单引号
    quotes: [0, 'single', 'double'], // 强制使用一致的反勾号、双引号或单引号
    'no-multi-spaces': 2, // 禁止使用多个空格
    'comma-spacing': [2, { before: false, after: true }], // 强制在逗号前后使用一致的空格
    'comma-dangle': 2, // 要求或禁止末尾逗号
    'valid-jsdoc': 0, // 强制使用有效的 JSDoc 注释
    indent: ['error', 2], // 强制使用一致的缩进
    'arrow-parens': 0, // 要求箭头函数的参数使用圆括号
    'object-curly-spacing': 0, // 强制在大括号中使用一致的空格
    'spaced-comment': [2, 'always'], // 强制在注释中 // 或 /* 使用一致的空格
    'one-var-declaration-per-line': 2, // 要求或禁止在变量声明周围换行
    'default-case': 2, // 要求 switch 语句中有 default 分支
    'no-new-wrappers': 2, // 禁止对 String，Number 和 Boolean 使用 new 操作符
    eqeqeq: 1, // 要求使用 === 和 !==
    'no-alert': 1, // 禁用 alert、confirm 和 prompt
    'no-console': 1, // 禁用 alert、confirm 和 prompt
    'no-eval': 1, // 禁用 eval()
    'no-implied-eval': 1, // 禁止使用类似 eval() 的方法
    'eol-last': 2, // 要求或禁止文件末尾存在空行
    'no-multiple-empty-lines': 2, // 禁止出现多行空行
    'no-var': 2, // 要求使用 let 或 const 而不是 var
    'prefer-const': 2 // 要求使用 const 声明那些声明后不再被修改的变量
  }
}