代码规范eslint

eslint

ESLint 是一个 Javascript Linter，帮助我们规范代码质量，提高团队开发效率。

现在搭建项目一般都是使用现有的脚手架然后进行调整。

而且 typescript 的代码 lint 检查也转战为 eslint 了，tslint 已经是历史了。

eslint 带来的好处:

现在大家比较认可的代码规范:

ESLint 的规则已经完全插件化了。每一个规则都是一个插件并且你自由的添加修改规则。

eslint 虽然能帮助我们提高代码质量，但并不能完全统一编码风格，因为这些代码规范的重点并不在代码风格上，虽然有一定的限制。

prettier 是一个能够统一团队编码风格的工具，能够极大的提高团队执行效率，统一的编码风格能很好的保证代码的可读性。

而且我们能把 Prettier 集成到 eslint 里。

1	npx create-react-app eslint-demo --typescript

1	yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

1	npx eslint --init

根据需要选择需要的配置，然后安装初始需要的包，最后会生成一个.eslintrc.js，里面已经初始化好一些配置了。

我们把由Create React App团队提供的规则"react-app"添加进去。

module.exports = {
...
  extends: ["plugin:@typescript-eslint/recommended", "react-app"],
...
};

我们对 TypeScript 和 React 进行了规范，此时需要选择一种代码格式化程序。前面提到的 Prettier 将是首选工具，因为它在检测和修复样式错误方面做的很出色，并且和 ESLint 有很好的集成。

1	yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

module.exports = {
...
  extends: ["plugin:@typescript-eslint/recommended", "react-app","plugin:prettier/recommended"],
...
};

最后添加提交检测
具体操作查看

具体参考，可查看 GitHub 例子的配置
github 的 Demo 例子

由于这种方式是不是在开发热更新报错，若需要这方面的，需要另外设置