关于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>

 

 不说了，继续去学习了。

 

posted @ 2021-06-01 16:46  小兜兜me  阅读(3585)  评论(2)  编辑  收藏  举报