VSCode 中 react项目格式化代码后，代码格式错乱

最新推荐文章于 2024-06-07 16:11:02 发布
最新推荐文章于 2024-06-07 16:11:02 发布
阅读量3k 收藏 5
点赞数 9
文章标签： react vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22713201/article/details/103461993
版权

因为我设置了保存自动格式化代码，在ctrl+s保存的时候，代码就格式化了，格式化后代码格式错乱，如下图

在vscode编辑器的右下角，选择javascript

然后在弹出的窗口中，输入选择 JavascriptReact  或者  TypescriptReact ，如图

这时候再进行保存操作，就不会错乱了，页面就很工整了

到这儿，就完成了

萧&萧
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vscode中react代码格式化问题解决方案
weixin_49094787的博客
04-22 2198
今天在学习的过程中遇到一个头疼的问题，react引入antd组件时代码被格式化的混乱，所以上网查了一些方法，并在此总结一下。 插件选择 这里我们使用prettier，如果安装过其它格式化插件建议卸载，个人感觉一个就够用了，好多插件会弄的有点混乱 配置设置 在设置中随便选一个对settings.json进行编辑 加入如下代码 "editor.formatOnSave": true, "edit...
vscode 中 react 代码保存后，代码格式乱了怎么办？react代码点击保存格式化错误代码错乱处理
qq_39695210的博客
04-28 3511
在用vscode写react项目中，点击保存代码，代码格式错乱了，解决方法如下： 一开始我以为是安装了ESLint的插件导致不兼容，结果卸载了也没用。各自找react格式化插件，最终没用找到。 最后百度找到了方法： 禁用vscode里面的JS-CSS-HTML Formatter的插件，然后重启vscode就不报错了 .........
vscode react 代码格式化
xigua3188的博客
04-18 3228
1. 安装vsocde插件：Prettier - Code formatter 2.设置- 文本编辑器 - 文件 Associations 加上两条关联 3. *.jsx文件保存时自动格式化代码，在设置settings.json里添加 "[javascriptreact]": { // "editor.defaultFormatter": "esbenp.prettier-vscode" "editor.formatOnSave": true, ...
如何使用vscode进行代码格式化设置.
最新发布
BradenHan的专栏
06-07 5086
TOC/TOC。
vscode格式化react代码
weixin_47353322的博客
07-15 1099
vscode格式化react代码
VSCode 自动格式化react代码
热门推荐
前端，请指教
04-29 2万+
点击右下角的javaScript， 在弹出的选择框中， 输入选择JavascriptReact或者TypescriptReact
vscode 使用Prettier插件格式化配置使用代码详解
10-14
在VSCode中使用Prettier插件可以实现代码的自动格式化，节省开发者的格式化代码时间，提高工作效率。安装Prettier插件后，开发者可以通过简单的配置来定义自己的代码格式化规则。 首先，要在VSCode中安装Prettier...
Vue-cli Eslint在vscode里代码自动格式化的方法
08-27
总的来说，通过集成 Eslint 和 Vetur，并正确配置 VS Code 的设置，我们可以实现 Vue CLI 项目在 VS Code 中的代码自动格式化。这不仅有助于保持代码整洁，也有利于团队成员之间的代码一致性，从而提升开发质量和...
详解如何在vue项目中使用eslint+prettier格式化代码
10-17
本文将详细讲解如何在Vue项目中集成`eslint`和`prettier`，以实现代码的自动格式化和规范检查。 `eslint`是一款强大的静态代码分析工具，它可以检查代码中的错误、潜在问题，并且支持自定义规则来符合特定的编码...
VSCode 配置React Native开发环境的方法
08-28
在本文中，我们将重点介绍如何使用 VSCode 配置 React Native 开发环境。该文章将指导您一步步地配置 VSCode，以便更好地开发 React Native 应用程序。 知识点一：安装 VSCode 和插件 要开始使用 VSCode 配置 ...
VSCode配置react开发环境的步骤
08-28
在 VSCode 中，需要安装 prettier-eslint 插件，以便按照 ESLint 规则保存文件时自动格式化 JSX 代码。可以通过 npm install prettier-eslint --save-dev 安装 prettier-eslint 插件。 五、配置 VSCode Workspace ...
配置 --- > vscode中react格式化解决方案
栗子好好吃的博客
10-31 2233
选择右下角的语言 在弹出框搜react选择 JavaScript React(或者根据需求选择 TypeScript React) 快捷键, windows下 Alt + SHIFT + F
【vscode】基于vscode配置prettier格式化工具，用于格式化React代码配置
我有满天星辰的博客
03-15 4176
①打开vscode，如果没有安装prettier插件，请先安装，安装方法是点击“Extension”图标，然后搜索 “prettier”，找到官方插件并安装。② 按下Ctrl+Shift+P，查找settings。基于vscode配置格式化工具，提高开发效率。④ 复制下面代码修改配置文件。③点击右上角【打开设置】图标。
React项目中：VS Code中保存自动格式化JavaScript/TypeScript代码
Haines
04-22 4096
前提 首先，安装插件：ESLint + Prettier 背景： eslint在校验出代码格式问题以后，我们每次需要手动执行npm run lint --fix,这样效率太慢了，我希望实现的效果是：我按下ctrl + s，就可以自动格式化代码。 这就是Prettier，尤其是Prettier - Code formatter的VS Code插件。 了解Prettier Prettier是一个代码格式化程序（可配置）。ESLint也可以格式化代码，但它主要是提醒我们哪里代码写的不符合规则。 P.
vsCode实现eslint,Prettier格式化（react框架,.umi.js架构）
qq_38359639的博客
03-28 921
在应用商店下载Prettier插件 npm i @umijs/lint -D 设置vscode配置文件settings.json { "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } 配置.eslintrc.js规则文件，复制下面内容 module.exports = { 'env': { browser: true, es2021: true, nod
基于vscode配置setting.json格式化文档，适合vue,react
张张张的博客
09-20 1127
【代码】基于vscode配置setting.json格式化文档，适合vue,react。
VSCode配合ESLint自动修复格式化（Vue3或React）
weixin_43343144的博客
01-11 8881
原文地址：https://www.jianshu.com/p/5df4ea081fcc   开发Vue或者React的项目的时候，我们经常用到ESLint进行代码的校验，当代码出现不符合规范的格式的时候，ESLint会在控制台提示相关的异常信息。 ESLint极大的提高了团队代码的一致性和规范性，接下来老马介绍一下我的VSCode的相关配置和插件实现保存代码的时候，根据ESLint的配置自动...
配置vscode格式化代码
m0_56590688的博客
10-08 891
在 VS Code 中，你需要安装 Prettier 插件，以便编辑器能够识别并应用项目中的 Prettier 配置。打开 VS Code，点击左侧侧边栏中的 "扩展" 图标，然后搜索并安装 "Prettier - Code formatter" 插件。首先，确保你已经创建了一个 React 项目，并在项目中安装了 Prettier 作为开发依赖。文件中，你可以定义 Prettier 的代码格式化规则。），然后点击右上角的 "打开设置 (JSON)" 链接，以打开。文件中保存你的设置。
ESlint + VSCode自动格式化代码(2020)
仗剑天涯，从摘要开始
05-07 1504
本文用 Vue 项目做示范。 利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。 安装插件 ESLint，然后 File -> Preference -> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 用户），搜索 eslint，点击 Edit in setting.json 将以下选项添加到配...
vscode react代码格式化插件
09-06
对于VSCode中的React代码格式化，有一些常用的插件可以使用。以下是一些常见的插件： 1. Prettier：Prettier是一个广泛使用的代码格式化工具，可以与VSCode集成。安装Prettier插件后，可以在VSCode的设置中配置Prettier的格式化规则，并且在保存文件时自动格式化代码。 2. ESLint：ESLint是一个JavaScript代码检查工具，可以帮助你遵循一致的代码风格和最佳实践。通过安装ESLint插件并配置相应的规则，你可以在编辑React代码时获得实时的代码检查和建议。 3. vscode-styled-components：如果你在React项目中使用了styled-components库来编写样式，那么安装vscode-styled-components插件可以提供对该库的语法高亮和智能感知支持。 4. Auto Close Tag：Auto Close Tag插件可以自动闭合HTML标签，减少手动输入的工作量。这对于编写React组件时，特别是使用JSX语法时非常有用。 5. Reactjs code snippets：这个插件提供了一系列React代码片段，可以帮助你更快速地编写React组件和常用代码块。 以上是一些常见的插件，你可以根据自己的需求选择适合的插件来提高React代码的开发效率和质量。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值