关于vscode自动格式化的坑（Prettier - Code formatter）
在入坑vscode的时候在网上找了一些扩展包，其中有一款名为Prettier - Code formatter的代码格式化工具，其作用为当按下ctrl+s的时候自动进行格式化（当你进行格式化操作的时候就自动保存了，妈妈再也不用担心我敲代码突然断电了）
然而在今天，我被这个工具狠狠的坑了一回，因为他的括号加错位置了看图
原本是这样的
我原本想要的自动格式化的效果：
但是插件给我的效果：
再加上我眼睛可能有点不好使，一直以为是别的地方的bug，所以花了挺久时间的，而且中途一度怀疑我自己的智商，照着视频打都能打错？
下面是源码和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="../react.development.js"></script>
<script src="../react-dom.development.js"></script>
<script src="../react-babel.js"></script>
<script src="../react-prop-types.js"></script>
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
// 创建组件
/*
* 问题 数据保存在那个组件
* 看哪个组件需要就给谁
*/
class App extends React.Component {
constructor(props) {
super(props);
// 初始化状态
this.state = {
todos: ["吃饭", "睡觉", "打豆豆"],
};
}
render() {
return (
<div>
<h1>Simple TODO List</h1>
<Add todos={this.state.todos}></Add>
<List todos={this.state.todos}></List>
</div>
);
}
} class Add extends React.Component {
render() {
return (
<div>
<input type="text" />
<button>Add</button>
</div>
);
}
} class List extends React.Component {
render() {
return (
<div>
<ul>
{this.props.todos.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
</div>
);
}
}
List.propTypes = {
todos: PropTypes.array.isRequired,
};
// 挂载组件标签
ReactDOM.render(<App />, document.getElementById("test"));
</script>
</body>
</html>
不说了，继续去学习了。
关于vscode自动格式化的坑（Prettier - Code formatter）的更多相关文章
- Prettier - Code formatter使用
更多VSCode插件使用请访问:VSCode常用插件汇总 Prettier - Code formatter这是一款 格式化js.css代码插件,暂不解释. Prettier是什么? Prettier ...
- 对 vscode 自动格式化的结果不太满意，我们该如何自己调整直至自己满意为止
前提概述 采用vue-cli 3.0自动生成vue项目,选了ESlint+Prettier,在写request.js的时候,顺手用vscode右击格式化文件(Alt+Shift+F),一下子报了8个问 ...
- vs code 关闭保存自动格式化 formatonsave - [vscode] - [html]
有时候Ctrl+s保存,html代码哥格式会紊乱. 造成这个原因一般是我们基本都在用的一个插件:  command + shift + p 打开用户设置 // vscode默认启用了根据文件类型自动设置tab ...
- 固定代码格式化程序插件-Prettier JetBrains
基本使用 使用npm install prettier --save-dev为您的项目添加更漂亮或全局安装 使用Prettier选择要格式化的代码或文件 使用"Reformat with P ...
- prettier+ts+eslint+vscode配置代码保存自动格式化,自动remove unsed declaration,delete no-unused-imports
每天都要开心(▽)哇: 以这个项目为案例 下面是项目的基本情况 What would you like to build? › App with Quasar CLI, let's go! Proje ...
- vscode 使用ESLint 自动检查，保存时自动格式化
1:全局安装eslint `npm install -g eslint`2: 打开vscode 点击 “文件”----->“首选项”---->“设置”,在右侧“用户设置/settings. ...
- vs code配置vue自动格式化
vs code配置vue自动格式化 我他妈的要被这个vs code的格式化逼疯了.我在网上看了很多的文章,不是太老就是不好使,遇到太多坑了.在这贴出自己的配置,虽然有多余的代码,虽然可能在未来的更新 ...
- vsCode 设置vue 保存自动格式化代码
setting { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tab ...
- 解决VS Code保存时候自动格式化
VS code 保存会自动格式化.以前都是alt+shift+F格式化的,现在一保存就格式化 解决方式:找到你的VScode扩展,把JS-CS-HTML Formatter这个插件禁用就可以解决
随机推荐
- ZYNQ：使用PetaLinux打包 BOOT.BIN、image.ub
说明 个人还是比较喜欢灵活去管理各个部分的源码. 有关文章: ZYNQ:PetaLinux提取Linux和UBoot配置.源码 编译Linux 取得Linux源代码和配置后,可以在其中执行make,编 ...
- 创龙科技位居头版，2023深圳elexcon电子展为智能化赋能！
紧跟前沿技术应用及市场发展热点,elexcon2023聚焦三大展示板块:"嵌入式与AIoT展""电源与储能展""SiP与先进封装展",吸引了 ...
- P3749 题解
既然是求最大值而且有收益有代价,所以考虑建立一个最大权封闭子图模型. 收益 正的美味值是收益,所以假若 \(d_{i,j} \geq 0\) 则建边 \((s,pos_{i,j},d_{i,j})\) ...
- yb课堂实战之轮播图接口引入本地缓存 《二十一》
轮播图接口引入缓存 CacheKeyManager.java package net.ybclass.online_ybclass.config; /** * 缓存key管理类 */ public c ...
- Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
基于electron31+vite5+pinia2跨端仿微信Exe聊天应用ViteElectronChat. electron31-vite5-chat原创研发vite5+electron31+pin ...
- [Unity] Dreamteck Splines实现沿路径移动功能
Dreamteck Splines实现沿路径移动功能 最近有一个"让物体沿固定路径移动"的需求,因此接触到了Dreamteck Splines插件. Dreamteck Splin ...
- Nuxt.js 错误侦探：useError 组合函数
title: Nuxt.js 错误侦探:useError 组合函数 date: 2024/7/14 updated: 2024/7/14 author: cmdragon excerpt: 摘要:文章 ...
- [oeasy]python0031_挂起进程_恢复进程_进程切换
查看进程 回忆上次内容 上次修改了 $PATH 路径 把当前用户shiyanlou的宿主文件夹 ~ 添加到 $PATH 中 这样 sleep.py 就可以被找到 于是就可以被执行了 还可以把配置 ...
- 假期小结4hive学习beeline
学习Beeline是连接和管理Hive的一种有效方式.Beeline是一个用于与Hive交互的命令行工具,它支持通过JDBC连接到Hive服务器,并执行查询和管理Hive表等操作. 以下是一些关于Be ...
- Jax框架 —— 如何在没有GPU和TPU的设备上debug代码 —— 在CPU上使用GPU仿真设置 —— Jax框架在多卡设备上的自动并行特性的仿真体验
Jax计算框架是Google用来取代Tensorflow的新一代计算框架,这个框架使用类似pytorch的技术,但是在pytorch技术之上加入了更加强大的技术,但是这也导致该框架使用起来要比pyto ...