在入坑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>
不說了，繼續去學習了。