react 代码自动格式化

深碍√TFBOYSˉ_ 2023-01-01 15:56 322阅读 0赞

咦写了几行代码发现保存后没有被格式化？

import React from "react";
    import { Row,Col  } from "antd";
    
    export default class Header extends React.Component{ 
      render(){ 
        return (
            <div className="header">
              <Row className="header-top">
            <Col span={ 24}>
              <span>欢迎,***</span>
              <a href="#">退出</a>
            </Col>
                  </Row>
              <Row className="breadcrumb">
    <Col span={ 4} className="breadcrumb-titile">
      首页
     </Col>
     <Col span={ 20} className="weather">
      <span className="date">2021-01-03</span>
      <span className="weath-detail">晴转多云</span>
    
    </Col>
    
              </Row>
            </div>
        )
      }
    }

看这个代码乱的，头疼，如何在每次ctrl+s都变得整齐呢，虽说shift+Alt+f能完成代码格式化，可毕竟麻烦了写

其实简单 在setting.json增加如下一行代码即可搞定

"[javascriptreact]": { 
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },

同时需要将右下角JavaScript  
![在这里插入图片描述][2021010321105381.png]  
修改为JavaScript React  
![在这里插入图片描述][20210103211227491.png]

试试看…

import React from 'react'
    import {  Row, Col } from 'antd'
    
    export default class Header extends React.Component { 
      render() { 
        return (
          <div className="header">
            <Row className="header-top">
              <Col span={ 24}>
                <span>欢迎,***</span>
                <a href="#">退出</a>
              </Col>
            </Row>
            <Row className="breadcrumb">
              <Col span={ 4} className="breadcrumb-titile">
                首页
              </Col>
              <Col span={ 20} className="weather">
                <span className="date">2021-01-03</span>
                <span className="weath-detail">晴转多云</span>
              </Col>
            </Row>
          </div>
        )
      }
    }

这样是整洁多乐

[2021010321105381.png]: /images/20221120/7d4bb73e689641a985b6b39ba0a8ada9.png
[20210103211227491.png]: /images/20221120/33f3cff517cd493bba054327c0e55f74.png