关于vscode⾃动格式化的坑（Prettier-Codeformatter）
在⼊坑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={dos}></Add>
<List todos={dos}></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>
{dos.map((value, index) => (
html文件格式化<li key={index}>{value}</li>
))}
</ul>
</div>
);
}
}
List.propTypes = {
todos: PropTypes.array.isRequired,
};
/
/ 挂载组件标签
</body>
</html>
不说了，继续去学习了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。