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

最新推荐文章于 2025-10-14 06:17:29 发布
原创 最新推荐文章于 2025-10-14 06:17:29 发布 · 1.8k 阅读 · 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元/天 解锁文章
react+ts配置eslint+prettier
baidu_38027860的博客
06-09 1780
webpack的eslint插件，在webpack.config.js中注入该插件扩展，可以在webpack进行编译前，先进行eslint语法检查，将eslint的错误输出到终端，不会影响到webpack编译结果。eslint配置的ts解析器，需要先配置上解析器，eslint才能正确对ts语法进行检查，需要先按照上解析器，@typescript-eslint/eslint-plugin才能使用。因为项目是ts + react，所以需要额外安装ts和react的扩展，依赖的npm包如下。
React 项目配置代码提交规范 ESLint、Pretttier、Husky、CommitLint
大白菜的博客
04-07 2177
团队开发的成员越来越多，项目都是由多个人进行开发和维护，每个人的代码书写习惯和风格又不尽相同，commit 的提交log 也是乱七八糟，为以后的开发和维护增添了很多困难，所以规范和约束在多人协作下，就显得尤为重要。本文将以React 项目为例，在项目中配置 eslint + pretttier + husky + commitLint 代码提交规范。
5分钟搞定react-dates代码风格统一：Prettier集成实战指南
gitblog_00893的博客
10-14 439
团队协作中，你是否常遇到因代码格式不一致导致的PR反复修改？react-dates作为React生态中最受欢迎的日期选择器组件（下载量超100万/周），其复杂的组件结构更需要严格的代码风格约束。本文将通过3个步骤，教你如何无缝集成Prettier到react-dates项目中，实现代码自动格式化，减少90%的格式相关沟通成本。 ## 为什么选择Prettier？ react-dates项目已在...
React 的 12 条基本 ESLint 规则
分享身边生活经验blog
10-15 1864
ESLint 有一套全面的 JavaScript 代码规则，涵盖风格选择并防止常见错误。单独使用 ESLint 可以提升你的项目，但是有一些 ESLint 插件可用于添加特定于 React 的规则，这将帮助你编写可靠的 React 应用程序。在这篇文章中，我们将讨论这些 ESLint 规则和插件，包括它们适用于 Hooks 的情况。这里有一些快速链接供您跳转：React Hooks 规则 ( eslint-plugin-react-hooks)反应规则 ( eslint-plugin-react)
react typescript项目配置eslint+prettier
好巧的博客
07-20 4739
eslint-plugin-prettier 插件会调用prettier对你的代码风格进行检查，其原理是先使用 prettier 对你的代码进行格式化，然后与格式化之前的代码进行对比，如果出现了不一致，这个地方就会被 prettier 进行标记。当运行 ESLint 的时候检查一个文件的时候，它会首先尝试读取该文件的目录下的配置文件，然后再一级一级往上查找，将所找到的配置合并起来，作为当前被检查文件的配置。由于是 react 项目，所以还需要插件 eslint-plugin-react 来支持 .tsx。
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
m0_37873510的博客
01-15 6824
Vue3+Vite+TS目集成ESlint +Prettier实现代码规范检查和代码格式化
Vite6+TypeScript+React+ESlint9+Prettier前端项目搭建教程
qq_48617322的博客
05-12 1752
很多小伙伴苦于无法搭建一个规范的前端项目，导致后续开发不规范，今天给大家带来一个基于Vite6+TypeScript+React+ESlint9+Prettier的搭建教程
手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目
zayyo的博客
08-25 1774
通过这篇文章你可以学到。
前端初始化项目规范React+TS+Eslint+Prettier+Husky+Commitlint+Gitmoji
weixin_44043132的博客
04-22 1798
前端初始化项目规范React+TS+Eslint+Prettier+Husky+Commitlint+Gitmoji
第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格
Etc.End的博客
11-29 3483
项目中使用prettier和eslint以后，Prettier可以根据配置的规则自动格式化代码，使代码看起来更整洁、易读、易于维护。由于代码格式化可以自动完成，开发者可以专注于编写代码，减少因代码格式问题而分散注意力。Prettier可以轻松集成到编辑器、构建工具和CI/CD流程中，使代码格式化更加方便。Prettier的配置非常灵活，可以根据项目需求定制化配置规则，比如控制代码的宽度、空格长度、是否使用分号结尾等。
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-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和ts配置
张印的博客
01-11 1859
如何在 React 项目中整合 Eslint 和 Prettier .eslintrc.js module.exports = { "env": { "browser": true, "es6": true }, "extends": [ "airbnb" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly", "_": true
react项目配置eslint规则校验
Cool.R的博客
12-18 3101
react项目配置eslint规则校验## 为什么要配置 ESLint 的核心可能就是其中包含的各种规则，这些规则大多为众多开发者经验的结晶： • 有的可以帮我们避免错误； • 有的可以帮我们写出最佳实践的代码； • 有的可以帮我们规范变量的使用方式； • 有的可以帮我们规范代码格式； • 有的可以帮我们更合适的使用新的语法； 还有个问题，仅仅依赖编辑器的eslint插件进行校验自定义能力不高，可移植性也不高。 配置步骤 1、首先检查是是否装了 eslint和babel-eslint 全局安装： npm
【工程化】react工程起步工作，我是如何配置eslint、prettier、git提交钩子、环境区分的
庞囧的博客
05-21 1205
由于使用ACR的方式创建react工程时，并不会像vue一样有每一步的安装提示，需要我们在创建工程后自己手动添加需要的基础库，例如我们今天要使用的eslint、prettier等。所以写个博客记录下如何添加。记得vscode该装的插件都要装上。【工程化】记录在vue工程中eslint、prettier等formatter以及git提交等规范的知识点。
React18入门（第二篇）——React18+Ts项目配置husky、eslint、pretttier、commitLint
做笔记/记录遇到的前端bug
10-01 2851
手摸手教你在React18项目中配置husky、commitlint、prettier 完成git代码提交校验
【前端工程化】配置React+ts企业级代码规范及样式格式和git提交规范
2301_79226238的博客
10-10 1445
在前端项目工程日益复杂的今天，一套完善的开发环境配置可以极大的提升开发效率，提高代码质量，方便多人合作，以及后期的项目迭代和维护，项目规范分项目目录结构规范，代码格式规范和git提交规范，本文主要讲后两种// 可选类型，和上面commitlint.config.js配置的规则一一对应types: [{ value: 'feat', name: 'feat: 新功能' },{ value: 'fix', name: 'fix: 修复' },
vite + vue3 + ts + eslint + prettier
最新发布
10-23
### 安装依赖 在项目根目录下运行以下命令，安装 ESLint、Prettier 和相关插件： ```bash pnpm i eslint@^8.57.0 eslint-plugin-vue @vue/eslint-config-prettier prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-import @typescript-eslint/parser @typescript-eslint/eslint-plugin -D ``` 若使用 npm 安装，可参考以下命令： ```bash npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier @babel/eslint-parser ``` 同时，为了在 vite 运行时自动检测 eslint 规范，还需安装以下依赖： ```bash npm install --save-dev vite-plugin-eslint eslint-parser @babel/core @babel/eslint-parser ``` ### ESLint 配置 在项目根目录下创建 `.eslintrc.cjs` 文件，示例配置如下： ```javascript module.exports = { // 使 eslint 支持 node 与 ES6 env: { browser: true, es2021: true, node: true }, // 引入推荐的语法校验规则 extends: [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended' // 解决ESlint和Prettier冲突 ], overrides: [], /* 这里一定要配置对 先使用vue-eslint-parser 再使用@typescript-eslint/parser 先解析 <template> 标签中的内容 然后再解析 vue <script> 标签中的 TS 代码 */ // 选择使用的解析器 parser: 'vue-eslint-parser', // 解析器的详细配置 parserOptions: { // 使用最新版 ES 语法 ecmaVersion: 'latest', // 使用 ESLint TS 解析器 parser: '@typescript-eslint/parser', // 使用 ES 模块化规范 sourceType: 'module' }, // 使用的插件 plugins: ['vue', '@typescript-eslint'], // 自定义规则 rules: {} }; ``` 也可以初始化 ESLint 配置，使用命令 `npx eslint --init`，并选择 eslint 的校验模式 [^1][^3]。 ### Prettier 配置 在项目根目录下创建 `.prettierrc` 文件，简单配置示例如下： ```json { "singleQuote": true, "trailingComma": "es5", "printWidth": 80 } ``` ### Vite 配置 在 `vite.config.js` 或 `vite.config.ts` 中增加 eslint 配置： ```javascript import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import { resolve } from "path"; import eslint from "vite-plugin-eslint"; export default defineConfig({ plugins: [ vue(), eslint({ include: ["src/**/*.js", "src/**/*.vue", "src/*.js", "src/*.vue"] }) ], resolve: { alias: { "@": resolve(__dirname, "./src"), "@components": resolve(__dirname, "./src/components"), "@views": resolve(__dirname, "./src/views") }, extensions: [".js", ".ts", ".json", ".vue"] } }); ``` ### VSCode 配置 在 `.vscode/settings.json` 文件中添加以下配置： ```json { "editor.detectIndentation": false, "editor.tabSize": 2, "editor.formatOnSave": true, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], "prettier.eslintIntegration": true } ``` ### 使用指南 - 手动检查和修复：可以使用命令 `npx eslint src --fix` 对 `src` 目录下的代码进行检查和自动修复。 - 保存自动格式化：按照上述 VSCode 配置，在保存文件时会自动进行 ESLint 检查和修复，同时依据 Prettier 进行格式化。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Ric_h

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

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

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

打赏作者

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

抵扣说明：

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

余额充值