用CRA3创建一个React和TypeScript项目

xcvxvxc
151 阅读3分钟

创建一个带有提示和自动代码格式化的React和TypeScript项目从未如此简单。在这篇文章中，我们将用Create React App 3来做这件事。

创建项目

让我们运行以下命令来创建项目：

npx create-react-app app --template typescript
  • npx 工具会临时安装create-react-app npm包，并使用它来创建我们的项目
  • 我们将我们的项目称为app
  • 我们还指定了--typescript ，这就是告诉工具用TypeScript来设置项目的部分。

该工具将花一分钟左右的时间来创建该项目。

CRA3中的提示

ESLint是React社区中最流行的linter，它被自动安装到CRA项目中。CRA3还配置了ESLint来检查TypeScript代码--很好!

请注意，TSLint一直是ESLint的一个流行的替代品，用于对TypeScript代码进行检查，但现在已被废弃。更多信息可以在这里找到。

配置Visual Studio Code对TypeScript代码进行润色

CRA已经安装了ESLint并为我们配置了它，但我们需要告诉VS Code对TypeScript代码进行检查。我们可以在我们的项目中做到这一点，在一个名为.vscode 的文件夹中进行以下设置：settings.json 。

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]
}

VS Code中最流行的提示扩展是ESLint，由Dirk Baeumer发布：

eslint 提示错误现在将以下划线显示，同时也会出现在问题列表中：

eslint error

如果我们想配置提示规则，我们首先在项目根目录下添加一个名为.eslintrc.json 的文件，内容如下：

{
  "extends": "react-app"
}

这个文件定义了ESLint执行的规则，这只是配置ESLint执行所有在CRA中配置的规则。我们可以在rules 字段中添加我们想要运行的额外规则：

{
  "extends": "react-app",
  "rules": {
    "no-debugger": "warn"
  }
}

所有可用的ESLint规则都可以在这里找到。

添加自动代码格式化

一些处理我们的代码格式（比如语句末尾的分号）的linting规则可以由Prettier这样的工具自动处理。

我们可以通过在终端执行以下命令来安装Prettier：

npm install prettier --save-dev

Prettier可以通过使用eslint-config-prettier 和eslint-plugin-prettier ESLint插件来承担ESLint的风格规则：

  • eslint-config-prettier 禁用与Prettier冲突的ESLint规则。
  • eslint-plugin-prettier 是一个使用Prettier格式化代码的ESLint规则。

这些可以用下面的命令来安装：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

下面的prettier设置也需要被添加到.eslintrc.json ：

{
  "extends": ["react-app", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

格式化规则可以在项目根目录下的.prettierrc 文件中指定。这里有一个prettier配置的例子：

{
  "printWidth": 80,
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

更多关于prettier配置的信息可以在这里找到。

我们可以通过在我们的settings.json 文件中添加editor.formatOnSave 标志，让VS Code在保存文件时自动格式化代码：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ],
  "editor.formatOnSave": true
}

最流行的VS Code prettier扩展是Prettier - Code formatter，由Esben Petersen发布。

vscode prettier cra3

就这样--我们现在有了一个带有提示和自动代码格式化的React和TypeScript项目

avatar
文章
阅读
粉丝