VS Code - Cách sắp xếp kết thúc thẻ và mở thẻ khi định dạng? (JSX)

Question

Tôi không biết đây có phải là hành vi mặc định cho Mã VS hay không (Tôi có nhiều cấu hình tùy chỉnh ở trên mặc định)

Nhưng khi tôi định dạng mã, nó sẽ chuyển đổi mã đó:

const simpleInput = (
    <Input 
     {...input} 
     {...others} 
     state={state} 
    /> 
); 

Into:

const simpleInput = (
    <Input 
     {...input} 
     {...others} 
     state={state} 
     /> <- Here is the difference 
); 

Và tôi es-lint ném một cảnh báo về nó [eslint] The closing bracket must be aligned with the line containing the opening tag (expected column 5) (react/jsx-closing-bracket-location)

Làm thế nào tôi có thể tinh chỉnh nó để nó sắp xếp s đúng với thẻ bắt đầu?

Lưu ý rằng tệp đang sử dụng JSX trong tệp .js, tôi đã định cấu hình mã VS accordingly.

Answer 1

VSCode sử dụng https://github.com/Microsoft/TypeScript bên dưới để định dạng tự động.

Có một vấn đề thời gian gần đây đóng trong repo nguyên cảo cho cùng một vấn đề bạn có: https://github.com/Microsoft/TypeScript/issues/8663

Những thay đổi chưa được phản ánh để VSCode phiên bản ổn định, nhưng với phiên bản hiện tại của cổ đông nội bộ VSCode (https://code.visualstudio.com/insiders) nó tag -aligns khung đóng.

Bạn có thể tải về và sử dụng đông nội bộ VSCode hoặc thay đổi quy tắc eslint bạn để sử dụng đạo cụ canh khung cho đến khi nó làm cho việc phát hành ổn định:

"react/jsx-closing-bracket-location": [ "warning", "props-aligned" ],