React+Ts配置Eslint+Prettier代码检测与格式化

最新推荐文章于 2026-04-07 08:30:00 发布

原创

最新推荐文章于 2026-04-07 08:30:00 发布 · 1.9k 阅读

标签

#react.js #前端 #前端框架

收录于

React18配置Eslint+Prettier

1. 创建react项目

这里推荐使用create-react-app创建，因为使用了typescript,我在创建项目时选择了ts模板，使用请参考create-react-app。

npx create-react-app 项目名 --template typescript

2.安装Prettier依赖

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

执行npx eslint --init生成eslint配置文件

在这里插入图片描述
在进行到最后一步，提示是否安装依赖时，我选择了否，因为create-react-app默认创建时就已下载了eslint所有的依赖，重复安装会产生不必要的错误。

执行完上述命令，在src下会生成一个.eslintrc.js，这

3. 添加.eslintignore并修改.eslintrc.js

// .eslintrc.js  
module.exports = {
   
   
    "env": {
   
   
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "settings": {
   
   
        "react": {
   
   
            "version"