前言

每次写React的时候html标签都要自己手动调整，实在是麻烦，所以总结了一下JSX在保存时自动格式化整个文件的方法

安装插件

Prettier - Code formatter

添加配置文件

ctrl+shift+p搜索settings.json 进入配置文件，找到files.associations(没有则自己在大括号中添加)，添加"*.jsx": "javascriptreact"

1
2
3
4
5
6
{
    "liveServer.settings.port": 5501,
    "files.associations": {
        "*.jsx": "javascriptreact",
    },
}

设置自动格式化

左下角齿轮打开设置，搜索format onsave，设置为file或打上勾

设置Tab宽度

ctrl+，打开设置搜索prettier，找到Prettier: Tab width，修改为4即可

问题

  1. 上述方式设置之后，原来的html，css等无法自动格式化
  2. Tab宽度默认为2

解决

  1. 禁用Prettier - Code formatter

shift Alt F：选择格式化方式，使用默认的即可。对于jsx代码，选择js格式化方法即可

  1. vscode编辑窗口下方点击空格->更改制表符显示大小