Parsing error: Expected corresponding JSX closing tag for <CCol>-CodePudding

I faced strange bug in vscode...I'm creating an app with react.js.When I write code in js file , the tages are written correctly but when I save the format of code changes so I face this error in run time...For example I write this code :

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 >

            }

when I save my code changes to this :

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?

CodePudding user response：

VS Code provides Format on save feature. If you disable that feature your code will not change.

The solution is to press Ctrl Shift P and search "Open Setting UI". In the open setting UI Search "Format On Save" now you have to just uncheck the checkbox and your problem will solve.