解析错误：<CCol> 应有相应的 JSX 结束标记答案

【问题标题】：Parsing error: Expected corresponding JSX closing tag for <CCol>解析错误：<CCol> 应有相应的 JSX 结束标记
【发布时间】：2022-01-17 12:31:39
【问题描述】：

我在 vscode 中遇到了奇怪的错误...我正在使用 react.js 创建一个应用程序。当我在 js 文件中编写代码时，标记是正确编写的，但是当我保存代码更改的格式时，所以我遇到了这个错误在运行时...例如我写这段代码：

const renderForeigner = (foreigner) => {
            if (foreigner) {
                return <CFormGroup row >
                     <CCol xs = "12" md = "3" >
                    
                    <CSelect custom name = "IDBirthPlace" id = "IDBirthPlace" >
                         { /* <option value="0">Please select</option> */ }
                          <option value = "0" > country</option> 
                           </CSelect >
                            </CCol >
                             <CCol xs = "12" md = "4" >
                                 <CInput type = "number"  id = "CertificateNo" name = "CertificateNo"  autoComplete = "off" />
                    </CCol> <CCol xs = "12" md = "2" >
                    <DatePicker

                value = { passExpireDate }
                onChange = { setPassExpireDate }
                inputPlaceholder = "expiration date"
                shouldHighlightWeekends

                locale = "fa"
                 />
                    </CCol>
                     </CFormGroup >

            }

当我保存我的代码更改时：

const renderForeigner = (foreigner) => {
            if (foreigner) {
                return <CFormGroup row >
                    <
                    CCol xs = "12"
                md = "3" >


                    <
                    CSelect custom name = "IDBirthPlace"
                id = "IDBirthPlace" > { /* <option value="0">Please select</option> */ } <
                    option value = "0" > country< /option>  <
                    /CSelect > <
                    /CCol > <
                    CCol xs = "12"
                md = "4" >
                    <
                    CInput type = "number"
                id = "CertificateNo"
                name = "CertificateNo"
                autoComplete = "off" / >
                    <
                    /CCol> <CCol xs = "12" md = "2" > <
                    DatePicker

                value = { passExpireDate }
                onChange = { setPassExpireDate }
                inputPlaceholder = "expiration date"
                shouldHighlightWeekends

                locale = "fa" /
                    >
                    <
                    /CCol> <
                    /CFormGroup >

            }
````

I don't know what snippet makes these changes or what snippet should I install to solve this problem?

【问题讨论】：

确保您的文件名具有.jsx 扩展名
结尾处似乎缺少一个花括号}，以正确关闭函数定义和if 语句。

标签： javascript html reactjs visual-studio-code

【解决方案1】：

VS Code 提供 Format on save 功能。如果您禁用该功能，您的代码将不会更改。

解决方法是按 Ctrl Shift + P 并搜索“打开设置 UI”。在打开的设置 UI 中搜索“保存时格式化”，现在您只需取消选中该复选框，您的问题就会解决。

【讨论】：