如何使用 TypeScript、ESLint 和 Prettier 设置 React.js 项目
在软件开发过程中，保持代码的良好组织性和可读性至关重要，遵循开发质量标准将有助于未来的维护。然而，手动进行这种格式化，甚至标准化旧代码，都可能非常繁琐。
因此，本文旨在介绍如何使用 eslint 和 prettir 对 React.js 项目和 typescript 进行配置，以规范源代码。
项目创建
yarn create react-app todo_list
项目的核心：
TypeScript 依赖项
yarn add typescript @types/node @types/react @types/react-dom @types/jest -D
ESLint 和 Prettier 安装
- eslint 包会在代码不符合开发模式时通知我们。
-
更美观的包会应用该模式。
-
yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier -D
安装完成后，运行以下命令：yarn eslint --init并按照以下步骤操作：
- 检查语法、查找问题并强制执行代码风格
- JavaScript 模块（导入/导出）
- React
- 你的项目使用 TypeScript 吗？是
- 浏览器
- 使用公认的风格指南。
- Airbnb：https://github.com/airbnb/javascript
- JSON
- 是
由于我使用 yarn 作为包管理器，因此我将删除 package-lock.json 并运行：yarn在项目根目录下更新 yarn 缓存。
因此，当我们安装 ESLint 时，它自带了一个名为espree 的解析器，该解析器会根据标准 JavaScript 的规则创建数据结构。所以，我们需要一个名为typescript-eslint的解析器，它能够为 TypeScript（JavaScript 的超集）创建数据结构。我们按照依赖项步骤安装了该解析器所需的软件包（@typescript-eslint/parser 和 @typescript-eslint/eslint-plugin）。
配置项目
编辑器配置
在项目根目录下创建 .editorconfig 文件，内容如下：
root = true
[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
eslint 配置
在项目根目录下，将 .eslintrc.json 文件的内容更改为：
{
"env": {
"browser": true,
"es6": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
"prettier/prettier": "error",
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unused-vars": "off",
"react/jsx-filename-extension": [
1,
{ "extensions": [".js", ".jsx", ".ts", ".tsx"] }
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
更美观的配置
在项目根目录下创建 .prettierrc 文件，并添加以下内容：
{
"singleQuote": true,
"trailingComma": "es5"
}
在 App.tsx 中加载 svg 徽标
在 App.tsx 中导入 SVG 徽标时初始化失败。要解决此问题，请创建包含以下内容的 custom.d.ts 文件：
declare module '*.svg' {
import React = require('react');
export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
const src: string;
export default src;
}
现在在 tsconfig.json 中像这样引用该文件：
"include": ["src", "custom.d.ts"]
编辑 VS Code 配置（settings.json）
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"[javascriptreact]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
}
},
"editor.formatOnSave": true,
"[typescript]": {
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
}
},
"[typescriptreact]": {
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
}
}
最后，将所有文件重命名为 TypeScript 文件（将 index.js 重命名为 index.tsx，将 App.js 重命名为 App.tsx），然后重启服务器。
文章来源：https://dev.to/renatobentorocha/how-to-setup-a-react-js-project-with-typcript-eslint-and-prettier-8mn