【React】使用Vite+React & TypeScript & ESLint, Prettier设置

2 年 ago

雅, 悟

2 minutes

首先

我将介绍如何设置React。

接下来，我们将进行 TypeScript、Eslint 和 Prettier 的设置。

在React项目创建中，我们将使用速度极快且闻名的Vite进行设置。

構築環境

toolsversionVite3.2.0React18.2.0ESLint8.0.1Prettier2.7.1

索引

引入husky

使用Vite创建React项目。

Vite非常快速。

Hot Module Replacementが修正分だけを適応するので動作が早い。

在想要创建项目的目录中，运行以下命令。

$ yarn create vite

我們將輸入或選擇專案設定。

当项目创建完成后，请移至项目目录中。确保创建了node_modules并确认服务器已启动。

$ cd sample-app

$ yarn

$ yarn dev

顺带一提，Vite使用的本地服务器（localhost）默认端口为5173。

Eslint的初始配置

我們將進行Eslint的初始設定。

$ npx eslint --init

有人問及設定問題，我們會進行選擇設置。

这次选择了JavaScript，但您可以选择您喜欢的任何一种语言。

请确认在完成设置后是否已创建.eslintrc.cjs文件。

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
+ └── .eslintrc.cjs

我将编辑.eslintrc.cjs文件。

通过指定React的版本，Eslint会相应地适应其规则。

本次我们将 React 版本设置为 18.2.0。

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
    },
+   settings: {
+     react: {
+       version: '18.2.0',
+     },
+   },
  };

接下来，创建一个 .eslintignore 文件。

$ touch .eslintignore

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
+ └── .eslintignore

完成后，我们将编辑 .eslintignore 文件。

由于编辑内容根据您自己的项目而变化，这里只是作为参考，我会提供一个例子。

node_modules
yarn.lock
public

更漂亮的设置

我们将开始引入Prettier。

请在开发环境中输入以下命令以安装Prettier。

$ yarn add --dev prettier

完成導入後，請建立.prettierrc檔案。

$ touch .prettierrc

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
  ├── .eslintignore
+ └── .prettierrc

完成後，將繼續編輯 .prettierrc 檔案。

由於編輯的內容會根據您自己的項目而有所不同，因此這次我將舉個例子作為參考。

{
  "endOfLine": "lf",
  "printWidth": 80,
  "tabWidth": 2,
  "trailingComma": "es5",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true
}

接下来，我们将创建一个.prettierignore文件。

$ touch .prettierignore

sample-app
  ├── node_modules
  ├── public
  ├── src
  ~
  ├── .eslintrc.cjs
  ├── .eslintignore
  ├── .prettierrc
+ └── .prettierignore

制作完成后，我们将继续编辑.prettierignore文件。

.prettierignore的内容与.eslintignore相同。

请根据您自己的项目进行编辑。

node_modules
yarn.lock
public

eslint-config-prettier的配置

请键入以下命令，开始安装eslint-config-prettier。

尽管 Eslint 已经有代码格式化功能了，但为了避免冲突，我们选择将代码格式化任务交给 Prettier。因此需要使用 eslint-config-prettier。

$ yarn add --dev eslint-config-prettier

在安装完成后，我们将编辑.eslintrc.cjs文件。

我在 extends 中添加了 prettier。

请注意，只有在extends内的最后添加prettier配置才不会被覆盖。

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended', 
      'standard-with-typescript', 
+     'prettier'
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['react'],
    rules: {
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

以上完成了TypeScript、Eslint和Prettier的设置。

让我们先检查一下package.json文件的内容吧。

{
  "name": "sample-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.31.10",
    "prettier": "^2.7.1",
    "typescript": "*",
    "vite": "^3.2.0"
  }
}

让我们试一试运行一次Eslint。

用Eslint检查

请键入以下命令以运行Eslint。

$ ./node_modules/.bin/eslint src/App.tsx

$ ~
$ ~
$ Oops! Something went wrong! :(

$ ESLint: 8.26.0

$ Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.
$ ~

请在 parserOptions.project 中放入属性。

我会逐步编辑.eslintrc.cjs文件。

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
      'prettier',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
+     project: ['./tsconfig.json'],
    },
    plugins: ['react'],
    rules: {
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

只要按照tsconfig.json文件中的规则进行，Eslint将会自动运行，并解决错误。

我将再次运行Eslint。

由于仍然存在代码规范方面的错误，让我们解决它。

  module.exports = {
    env: {
      browser: true,
      es2021: true,
    },
    extends: [
      'plugin:react/recommended',
      'standard-with-typescript',
      'prettier',
    ],
    overrides: [],
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      project: ['./tsconfig.json'],
    },
    plugins: ['react'],
    rules: {
+     'react/react-in-jsx-scope': 'off',
    },
    settings: {
      react: {
        version: '18.2.0',
      },
    },
  };

如果有其他错误，请您尝试自行解决。

此外，请根据您自己的项目需求，编辑和添加Eslint规则。

最后

除了上述的React环境搭建，我还介绍了TypeScript、Eslint和Prettier的引入。

由于前端技术日新月异，所以如果发现使用方法陈旧或错误，请留下评论。

感谢您读到最后。

请参考

Prettier reference