步驟：

使用 create-react-app 創建項目 + typescript

安裝eslint – airbnb

修改 .eslintrc.json配置

// 1.使用 create-react-app 創建項目 + typescript // (npx create-react-app my-app --typescript 已廢棄 -- 中文文檔更新不及時) // 參照英文文檔 https://create-react-app.dev/docs/adding-typescript npx create-react-app my-app --template typescript// 2.安裝eslint -- airbnb // 全局安裝eslint yarn global add eslint // 本地安裝 eslint yarn add eslint --dev // 初始化 eslint --init

// 3.修改 .eslintrc.json配置 //.eslintrc.json {"env": {"browser": true,"es2021": true,"node": true},"extends": ["plugin:react/recommended","airbnb"],"settings": {"import/parsers": {"@typescript-eslint/parser": [".ts",".tsx"]},"import/resolver": {"node": {"extensions": [".js",".jsx",".ts",".tsx"],"moduleDirectory": ["node_modules","src/"]}},"import/extensions": 0},"parser": "@typescript-eslint/parser","parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 12,"sourceType": "module"},"plugins": ["react","@typescript-eslint"],"rules": {"linebreak-style":0,"react/jsx-filename-extension": [2,{"extensions": [".js",".jsx",".ts",".tsx"]}],"semi": ["error","never"],"react/jsx-uses-react": 2,"no-use-before-define": "off","@typescript-eslint/no-use-before-define": ["error"],"import/extensions": "off"} }

可能出現報錯：

解決方法：可以刪除依賴包node_modules重新安裝依賴 ~ yarn

總結

以上是生活随笔為你收集整理的搭建react + typescript + airbnb eslint 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。