react 代碼自動格式化

咦寫了幾行代碼發現保存后沒有被格式化？

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

修改為JavaScript React

試試看…

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>
    )
  }
}

這樣是整潔多樂