代码规范之使用eslint和prettier格式化项目代码

（一）前言
对于团队而言，不管谁都有自己的代码习惯，这时候如何统一团队习惯来，js当然是eslint，ts对应就是tslint。当然这时候也不可或缺可以将Prettier集成到项目中

（二）安装Prettier

npm install --global prettier

安装好后

1、打开webstorm设置 （file=>setting=>tools=>flie watchers）

window使用默认配置Prettier就可以来，直接点击apply。然后确定

在mac配置为

// 对应的配置，win默认，mac需要自己配置
$ProjectFileDir$/node_modules/.bin/prettier
--write $FilePathRelativeToProjectRoot$
$FilePathRelativeToProjectRoot$
$ProjectFileDir$

（三）安装Prettier

1. 安装依赖

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

2. 修改.eslint.js

module.exports = {
  // ... 其他配置
  extends: ['airbnb', 'eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['react', 'prettier'],
  // ...其他配置
  rules: {
    'prettier/prettier': 'error',
    // ...其他配置
  },
};

3. 增加prettier.config.js

module.exports = {
  // 单行最大长度
  printWidth: 100,
  // 设置编辑器每一个水平缩进的空格数
  tabWidth: 2,
  // 在句尾添加分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  jsxSingleQuote: true,
  // 在任何可能的多行中输入尾逗号。
  trailingComma: 'all',
  // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格
  bracketSpacing: true,
  // 在多行JSX元素最后一行的末尾添加 > 而使 > 单独一行（不适用于自闭和元素）
  jsxBracketSameLinte: false,
  // 为单行箭头函数的参数添加圆括号。
  alwaysParens: 'always',
  // 行结束
  endOfLine: 'lf',
};

通过这个文件覆盖与eslint冲突的选项，现在大功告成

参考链接
https://prettier.io/docs/en/integrating-with-linters.html#stylelint