DEV Community
·
在React中使用Typescript进行代码标准化的Typescript-eslint与prettier配置
💡
原文英文，约1300词，阅读约需5分钟。
📝
内容提要
本文介绍了如何配置typescript-eslint与prettier，包括安装依赖、生成配置文件、设置React和prettier规则、定制规则及忽略特定文件，最后在package.json中添加eslint运行脚本，为后续组件库配置奠定基础。
🎯
关键要点
- 介绍了如何配置typescript-eslint与prettier。
- typescript-eslint负责分析代码以识别和解决问题。
- prettier负责代码格式化。
- 通过yarn安装typescript-eslint及其依赖。
- 生成项目根目录下的eslint配置文件。
- 添加React和prettier规则的插件。
- 在eslint配置文件中添加插件。
- 定制prettier和eslint规则。
- 可以忽略特定文件不运行typescript-eslint。
- 为特定类型的文件定义特定规则。
- 在package.json中添加eslint运行脚本。
- 目前无法将eslint-plugin-react-hooks插件添加到typescript-eslint中。
- 本文为后续组件库配置奠定基础。
❓
延伸问答
如何在React项目中配置typescript-eslint和prettier？
可以通过yarn安装typescript-eslint及其依赖，生成eslint配置文件，并添加React和prettier规则的插件来配置。
typescript-eslint和prettier各自的功能是什么？
typescript-eslint负责分析代码以识别和解决问题，而prettier负责代码格式化。
如何定制prettier和eslint的规则？
可以在eslint配置文件中通过定义'rules'对象来定制prettier和eslint的规则。
如何在eslint配置中忽略特定文件？
可以在eslint配置文件中添加'ignores'选项，指定不运行typescript-eslint的文件类型。
如何在package.json中添加eslint运行脚本？
在package.json的'scripts'部分添加相应的lint命令，如'lint': 'eslint .'和'lint-fix': 'eslint . --fix'。
目前typescript-eslint中无法添加eslint-plugin-react-hooks的原因是什么？
由于缺少类型声明，目前无法将eslint-plugin-react-hooks插件添加到typescript-eslint中。
➡️
