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

最新推荐文章于 2024-08-25 16:11:14 发布
原创 最新推荐文章于 2024-08-25 16:11:14 发布 · 1.7k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#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"
最低0.47元/天 解锁文章

200万优质内容无限畅学
前端初始化项目规范React+TS+Eslint+Prettier+Husky+Commitlint+Gitmoji
weixin_44043132的博客
04-22 1755
前端初始化项目规范React+TS+Eslint+Prettier+Husky+Commitlint+Gitmoji
TypeScript + Prettier：完美搭配的前端开发组合
最新发布
小白菜的博客
06-14 858
本文旨在帮助前端开发者理解TypeScript与Prettier的核心价值，掌握二者的协同使用方法，并通过实战案例展示它们如何共同提升代码质量与团队协作效率。内容覆盖基础概念、配置技巧、常见问题及未来趋势，适合从初级到中级的前端开发者阅读。本文将按照"概念理解→原理分析→实战配置→场景应用"的逻辑展开，先通过生活化案例解释TypeScript与Prettier的作用，再拆解二者的协作原理，最后通过完整的项目实战演示配置过程，并总结实际开发中的常见问题与解决方案。
react typescript项目配置eslint+prettier
好巧的博客
07-20 4649
eslint-plugin-prettier 插件会调用prettier对你的代码风格进行检查，其原理是先使用 prettier 对你的代码进行格式化，然后与格式化之前的代码进行对比，如果出现了不一致，这个地方就会被 prettier 进行标记。当运行 ESLint 的时候检查一个文件的时候，它会首先尝试读取该文件的目录下的配置文件，然后再一级一级往上查找，将所找到的配置合并起来，作为当前被检查文件的配置。由于是 react 项目，所以还需要插件 eslint-plugin-react 来支持 .tsx。
react+ts配置eslint+prettier
qq_44883318的博客
01-05 1151
react
第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格
Etc.End的博客
11-29 3343
项目中使用prettier和eslint以后，Prettier可以根据配置的规则自动格式化代码，使代码看起来更整洁、易读、易于维护。由于代码格式化可以自动完成，开发者可以专注于编写代码，减少因代码格式问题而分散注意力。Prettier可以轻松集成到编辑器、构建工具和CI/CD流程中，使代码格式化更加方便。Prettier的配置非常灵活，可以根据项目需求定制化配置规则，比如控制代码的宽度、空格长度、是否使用分号结尾等。
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
m0_37873510的博客
01-15 6692
Vue3+Vite+TS目集成ESlint +Prettier实现代码规范检查和代码格式化
手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目
zayyo的博客
08-25 1594
通过这篇文章你可以学到。
react项目eslint和ts配置
张印的博客
01-11 1827
如何在 React 项目中整合 Eslint 和 Prettier .eslintrc.js module.exports = { "env": { "browser": true, "es6": true }, "extends": [ "airbnb" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly", "_": true
React-Eslint-Prettier
02-15
react-webpack-样板 这是使用Webpack的样板应用程序 指示： cd到文件夹。 运行npm install 。 输入npm run dev:server来启动服务器。 打开浏览器，然后键入http://localhost:3000以运行该应用程序。 您应该My First Component in React消息中看到“ My First Component in React 。
react项目配置eslint规则校验
Cool.R的博客
12-18 3025
react项目配置eslint规则校验## 为什么要配置 ESLint 的核心可能就是其中包含的各种规则，这些规则大多为众多开发者经验的结晶： • 有的可以帮我们避免错误； • 有的可以帮我们写出最佳实践的代码； • 有的可以帮我们规范变量的使用方式； • 有的可以帮我们规范代码格式； • 有的可以帮我们更合适的使用新的语法； 还有个问题，仅仅依赖编辑器的eslint插件进行校验自定义能力不高，可移植性也不高。 配置步骤 1、首先检查是是否装了 eslint和babel-eslint 全局安装： npm
react-eslint-prettier:ESLint和Prettier可帮助您保持代码质量。 本教程将通过多种方式进行设置
05-06
React-Eslint-Prettier ESLint和Prettier可帮助您保持代码质量。 将通过多种设置方法中的一种进行运行。 我们将使用引导该项目，并使用非常流行的Airbnb样式指南和Prettier配置ESLint。
react-ts-eslint：使用启用了TS和ESLint的create-react-app创建的React应用
02-10
与TS + ESlint互动 如何将ESLint添加到项目 安装仅开发包： npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin 创建初始eslint配置文件 eslint --init （可选）将linting命令添加到package.json " scripts " : { " lint " : " eslint -c .eslintrc.js --ext .js,.jsx,.ts,.tsx ./src " , } F5经验 npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 np
【工程化】react工程起步工作，我是如何配置eslint、prettier、git提交钩子、环境区分的
庞囧的博客
05-21 1164
由于使用ACR的方式创建react工程时，并不会像vue一样有每一步的安装提示，需要我们在创建工程后自己手动添加需要的基础库，例如我们今天要使用的eslint、prettier等。所以写个博客记录下如何添加。记得vscode该装的插件都要装上。【工程化】记录在vue工程中eslint、prettier等formatter以及git提交等规范的知识点。
React18入门（第二篇）——React18+Ts项目配置husky、eslint、pretttier、commitLint
做笔记/记录遇到的前端bug
10-01 2787
手摸手教你在React18项目中配置husky、commitlint、prettier 完成git代码提交校验
【前端工程化】配置React+ts企业级代码规范及样式格式和git提交规范
2301_79226238的博客
10-10 1311
在前端项目工程日益复杂的今天，一套完善的开发环境配置可以极大的提升开发效率，提高代码质量，方便多人合作，以及后期的项目迭代和维护，项目规范分项目目录结构规范，代码格式规范和git提交规范，本文主要讲后两种// 可选类型，和上面commitlint.config.js配置的规则一一对应types: [{ value: 'feat', name: 'feat: 新功能' },{ value: 'fix', name: 'fix: 修复' },
eslint配置项(react项目)-eslint报错
DDAD9527的博客
11-17 1517
这是我自用的配置项,有需要的可以按需复制 1.当前根路径下 .vscode setting.json文件配置 { "eslint.run": "onType", "eslint.options": { "extensions": [".js", ".vue", ".jsx", ".tsx"] }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 编辑器设置 - ...
react+eslint+Prettier+escode配置（react编码风格统一）
黄彪博客
05-25 1426
参考 Setup ESLint for React with Prettier, pre-commit and VSCode vscode中eslint不生效原因 在 React-CRA 应用中配合 VSCode 使用 ESLint 实践前端代码规范 react eslint自动修复_ESlint+Prettier+EditorConfig+VScode 问题描述 最近做了一个react项目，起初忙于开发，也没有考虑到eslint和pretty的代码规范，代码比较随意，后面回头看自己的代码，相当不舒
react项目搭建 （eslint+prettier）
weixin_43989275的博客
08-27 1374
1、安装nodejs 安装git 安装vscode 安装yarn 2、npm install create-react-app yarn -g 在yarn中安装react脚手架 3、在系统资源中配置path，在指定目录下create-react-app react_test 创建项目 4、yarn start启动项目 5、安装eslint和prettier yarn add eslint babel-eslint eslint-plugin-react eslint-config-airbnb eslint
react+vite配置eslint的rules
03-23
<think>好的，我现在需要在React和Vite项目中配置ESLint规则，但我不太清楚具体步骤。首先，我得回想一下之前学过的相关知识。记得ESLint是用来检查代码规范的，而Vite是一个构建工具，React项目的话需要用到JSX和TypeScript，可能还需要一些特定的插件。 根据用户提供的引用内容，引用[4]提到要安装eslint和@babel/eslint-parser，然后初始化配置。步骤包括安装vite-plugin-eslint，配置vite.config.js，然后修改ESLint的默认配置。那具体该怎么做呢？ 首先，安装依赖。用户说要用npm安装eslint和@babel/eslint-parser，作为开发依赖。可能还需要其他插件，比如eslint-plugin-react，用于React的规则，还有@typescript-eslint/eslint-plugin和@typescript-eslint/parser，如果项目用TypeScript的话。引用[3]中提到了在vite.config.js里添加eslintPlugin的配置，包含需要检查的文件类型，比如.js、.jsx等。 然后，初始化ESLint配置。使用npx eslint --init命令，这里可能会有交互式的问题，比如选择框架（React）、语言（TypeScript）、环境等。生成的.eslintrc文件可能还需要手动调整，比如扩展推荐的规则，添加插件。 接下来，配置vite.config.js。需要导入eslintPlugin，并在plugins数组里添加它，设置include选项来指定检查的文件。这样在开发时，Vite会实时反馈ESLint的错误。 然后，修改ESLint的规则。可能在.eslintrc文件的rules部分添加或覆盖规则，比如关闭某些默认规则，或者启用一些社区的最佳实践。比如，引用[3]里的例子可能配置了react/jsx-uses-react来防止未使用的React导入。 还需要注意，如果是TypeScript项目，可能需要配置parserOptions，指定project为tsconfig.json，这样ESLint可以正确解析TS语法。同时，确保已安装@typescript-eslint的相关包。 可能遇到的问题包括：ESLint无法识别JSX语法，这时候需要检查是否安装了正确的解析器（如@babel/eslint-parser或@typescript-eslint/parser），并且在配置中设置了正确的parser。或者在Vite中配置了eslint插件，但运行时没有错误提示，可能需要检查include的路径是否正确，或者Vite的配置是否正确加载了插件。 另外，引用[4]提到要配置prettier，可能需要处理ESLint和Prettier的冲突，安装eslint-config-prettier来关闭冲突的规则。不过用户的问题主要是ESLint的rules配置，所以可能暂时不需要涉及Prettier。 现在需要把这些步骤整理成一个清晰的流程，确保用户能按步骤操作，并且给出具体的配置示例，比如.eslintrc.cjs的内容和vite.config.js的修改部分。同时，要提到常见的规则配置例子，比如关闭分号、引号设置等。 最后，生成相关问题，可能涉及如何集成Prettier，如何处理特定规则错误，或者如何优化ESLint的配置性能等。</think>### 如何在 React 和 Vite 项目中配置 ESLint 规则？ 以下是分步配置指南，结合引用内容与实际操作经验整理： --- #### **1. 安装依赖** ```bash # 基础 ESLint 和解析器 npm install -D eslint @babel/eslint-parser # React 相关规则支持 npm install -D eslint-plugin-react # TypeScript 支持（如项目使用 TS） npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser # Vite 插件集成 ESLint npm install -D vite-plugin-eslint ``` 引用[4]提到基础安装流程，需根据项目技术栈选择插件[^4]。 --- #### **2. 初始化 ESLint 配置** 运行命令生成 `.eslintrc.cjs` 文件： ```bash npx eslint --init ``` 按提示选择配置： - 检查语法和问题 - 使用 ES Modules - 框架选择 **React** - 是否使用 TypeScript？根据项目选择 - 运行环境选择 **Browser** - 配置格式选择 **JavaScript**（生成 `.eslintrc.cjs` 避免 ESM 冲突） 生成后完善配置： ```javascript // .eslintrc.cjs module.exports = { env: { browser: true, es2021: true }, extends: [ "eslint:recommended", "plugin:react/recommended", // 若使用 TS 添加以下配置 "plugin:@typescript-eslint/recommended" ], parser: "@babel/eslint-parser", // 或 "@typescript-eslint/parser"（TS 项目） parserOptions: { ecmaVersion: "latest", sourceType: "module", // TS 项目需指定 tsconfig.json 路径 project: "./tsconfig.json" }, plugins: ["react", "@typescript-eslint"], rules: { // 自定义规则示例 "semi": ["error", "always"], "quotes": ["error", "single"], "react/jsx-uses-react": "error", // 防止未使用的 React 导入 "react/react-in-jsx-scope": "off" // 关闭旧版 React 全局引入检查 } }; ``` 引用[3]提到需根据实际情况调整规则[^3]。 --- #### **3. 配置 Vite 集成** 在 `vite.config.js` 中添加 ESLint 插件： ```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import eslintPlugin from 'vite-plugin-eslint'; export default defineConfig({ plugins: [ react(), eslintPlugin({ include: [ 'src/**/*.js', 'src/**/*.jsx', 'src/**/*.ts', 'src/**/*.tsx' ], fix: true // 自动修复简单问题 }) ] }); ``` 引用[3]中配置了插件包含的文件类型[^3]。 --- #### **4. 常见规则配置示例** 在 `.eslintrc.cjs` 的 `rules` 字段中添加： ```javascript rules: { // 代码风格 "indent": ["error", 2], "comma-dangle": ["error", "never"], // React 规范 "react/prop-types": "off", // TS 项目可关闭 "react/self-closing-comp": "error", // 错误预防 "no-unused-vars": "warn", "@typescript-eslint/no-explicit-any": "warn" } ``` --- #### **5. 运行验证** - 命令行手动检查：`npx eslint src/**/*.js` - 启动 Vite 开发服务器时，控制台会实时显示 ESLint 错误 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Ric_h

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值