Rumah >alat pembangunan >VSCode >Membawa anda menggunakan fungsi Format VSCode untuk melaksanakan pemformatan kod
Hanya gunakan fungsi Format yang disertakan dengan VSCode untuk memenuhi keperluan pemformatan kod yang boleh dikonfigurasikan! Artikel berikut akan memperkenalkan anda kepada fungsi Format VSCode Saya harap ia akan membantu anda!
Dalam beberapa tahun kebelakangan ini, persekitaran pembangunan telah memberi lebih banyak perhatian kepada penyeragaman kod Penggunaan alat untuk menyemak dan mengautomasikan pembaikan telah menjadi pilihan pertama untuk kod jaminan.
secara amnya menggunakan alat bantu seperti Lint (ESLint StyleLint)
atau Prettier
Melalui konfigurasi dan penggunaan yang mudah, anda boleh menggunakan beberapa spesifikasi Gaya Kod yang popular untuk mencapai tujuan gesaan automatik, pembaikan automatik, pelaksanaan dan penyeliaan automatik. .
Tetapi saya tidak tahu sama ada anda pernah menghadapi situasi berikut:
Apabila menaip kod dalam IDE, kerana tiada format masa nyata (biasanya secara automatik diformatkan semasa menyimpan), Gesaan merah sentiasa muncul, dan saya sentiasa berpendapat bahawa tatabahasa saya salah, tetapi sebenarnya ia tidak diformatkan. (Contohnya, gesaan pengesahan automatik pemalam ESLint)
Apabila saya mula-mula menggunakannya, saya sentiasa menghadapi peraturan yang saya tidak faham (mungkin terlalu ketat), dan saya terpaksa mengklik pada gesaan untuk melihatnya Sebab khusus ialah ia setara dengan mempelajari peraturan semasa membangun.
Saya menulis sekeping kod Selepas menyimpan, kod tiba-tiba menjadi lebih panjang dan semua baris telah ditukar secara tiba-tiba kepada 100 baris. Saya tidak akan menamakan sesiapa di sini.
Tidak banyak keperluan untuk spesifikasi kod (lebih merujuk kepada pemformatan Contohnya, projek agak kecil, jadual projek padat, dsb. Selagi ia memenuhi keperluan pemformatan asas.
Terutamanya yang terakhir Sebenarnya, banyak projek kecil hanya perlu memenuhi pemformatan paling asas, yang boleh memastikan pasukan dapat memenuhi dan melaksanakan satu set spesifikasi mudah. . Berbanding dengan yang lain Spesifikasi yang ketat boleh diabaikan.
Satu konsep disebut di sini, dan spesifikasi dibahagikan kepada dua jenis: 代码格式规则(Formatting rules)
dan 代码质量规则(Code-quality rules)
. Spesifikasi asas yang dinyatakan di atas pada dasarnya adalah milik 代码格式规则
.
Berikut ialah peraturan pemformatan yang biasa digunakan dan asas, iaitu 代码格式规则
, mengambil gaya standardjs sebagai contoh:
Titik bertitik. eslint: semi
inden ruang . eslint: indent
Tambah ruang selepas kata kunci. eslint: keyword-spacing
Apabila mengisytiharkan fungsi, tambahkan ruang antara kurungan dan nama fungsi. eslint: space-before-function-paren
Tinggalkan ruang antara operator penggabungan rentetan. eslint: space-infix-ops
Tambah ruang selepas koma. eslint: comma-spacing
Tambah ruang pada kedua-dua belah blok kod satu baris. eslint: block-spacing
Tinggalkan garisan kosong di hujung fail. eslint: eol-last
Tinggalkan kosong antara titik bertindih dan nilai dalam pasangan nilai kunci. eslint: key-spacing
Selain lekukan, jangan gunakan berbilang ruang. eslint: no-multi-spaces
Tinggalkan no ruang di hujung baris. eslint: no-trailing-spaces
Jangan tambah ruang di hadapan atribut. eslint: no-whitespace-before-property
Apabila menghadapi koma bertitik, ruang harus ditinggalkan tetapi tidak sebelum. eslint: semi-spacing
Tinggalkan ruang pada permulaan dan penghujung blok kod. eslint: space-before-blocks
Tiada ruang harus ditinggalkan di antara kurungan. eslint: space-in-parens
Jangan tambah ruang sebelum atau selepas pembolehubah dalam rentetan templat. eslint: template-curly-spacing
Seperti yang anda lihat, ia pada asasnya 分号
缩进
空格
空白
spesifikasi berkaitan, dan spesifikasi ini adalah dalam Sesetengah IDE sudah disepadukan.
Sebagai contoh, VSCode boleh memenuhi semua peraturan di atas melalui konfigurasi mudah.
VSCode sendiri mempunyai fungsi Format, yang disokong oleh kebanyakan jenis fail. Kekunci pintasan lalai ialah Ctrl+K+D
.
turut menyokong tetapan kepada Format on Save
.
Kemudian senaraikan spesifikasi asas di atas yang mana tidak termasuk dalam fungsi Format lalai.
Koma bertitik. - Tiada spesifikasi secara lalai dan boleh dikonfigurasikan melalui settings
.
Inden ruang . - Saiz Tab 4 ruang lalai, yang boleh dikonfigurasikan melalui settings
.
Apabila mengisytiharkan fungsi, tambahkan ruang antara kurungan dan nama fungsi. - Tidak seperti standardjs
, VSCode tidak mempunyai ruang secara lalai.
Tinggalkan baris kosong di hujung fail. - Tiada secara lalai, boleh dikonfigurasikan melalui settings
.
Yang ketiga tu boleh dikatakan berbeza tapi ada peraturan jadi ada 3 semuanya. Oleh itu, kebanyakan peraturan sudah disokong oleh fungsi format lalai.
dibahagikan kepada tiga spesifikasi: keperluan 必须有分号
; Terdapat pelbagai spesifikasi popular di pasaran, tetapi ia biasanya memerlukan 禁止分号
atau 都行
. 必须有
禁止
VSCode tidak mempunyai keperluan secara lalai, tetapi ia boleh ditakrifkan melalui
settings
ignore
insert
Detect Indentation
Tetapan yang sepadan: editor.detectIndentation
Nilai lalai true
, berdasarkan kandungan fail semasa, mengesan sama ada fail semasa mempunyai 2 ruang atau 4 ruang, dan kemudian Format berdasarkan ini; Tab Size
: Nilai lalai ialah editor.tabSize
Jika ia adalah fail baharu, ia ditentukan berdasarkan nilai ini. 4
dahulu. dan kemudian gantikan Detect Indentation
Tetapkan kepada 2. Tab Size
dan hanya menukar Detect Indentation
kepada 2, maka lekukan akan berdasarkan kandungan fail, dan kemudian fail baharu akan diinden sebanyak 2 ruang. Tab Size
dalam tetapan, pilihan lalai ialah nyahdayakan, tandakan Aktif, baris kosong akan ditinggalkan pada penghujung semua fail semasa menyimpan. insertFinalNewline
konfigurasi adalah seperti berikut: settings
Berikut ialah cadangan Tetapkan di bawah Workspace
Selepas tetapan, fail settings
akan dijana di bawah laluan .vscode
, yang boleh diserahkan kepada git untuk menyatukan spesifikasi dalaman pasukan pembangunan. settings.json
// .vscode/settings.json { "editor.formatOnSave": true, // 保存文件自动format "javascript.format.semicolons": "insert", // js文件,强制必须有分号,设置`remove`则禁止分号 "typescript.format.semicolons": "insert", // ts文件,同上 "editor.tabSize": 2, // 设置默认缩进为2个空格 "editor.detectIndentation": false, // 是否强制所有文件按tabSize设置缩进;"否"则根据文件内容缩进、新建文件按tabSize缩进。 "files.insertFinalNewline": true, // 所有文件末尾留一空行 "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" // 设置js类型文件的默认format为VSCode自带Format }, "[javascriptreact]": { "editor.defaultFormatter": "vscode.typescript-language-features" // jsx文件,同上 }, "[css]": { "editor.defaultFormatter": "vscode.css-language-features" // css文件,同上 }, "[less]": { "editor.defaultFormatter": "vscode.css-language-features" // less文件,同上 } }Malah, lebih banyak konfigurasi format boleh dikonfigurasikan dalam tetapan VSCode dan anda boleh meneroka sendiri.
yang disebutkan di atas, spesifikasi lain tergolong dalam 代码格式规则
Dalam kes ini, gunakan spesifikasi 代码质量规则
. , kerana spesifikasi ini tidak bercanggah dengan ESLint
di atas, dan dengan pembetulan automatik semasa menyimpan 代码格式规则
, apabila menyimpan fail, mula-mula gunakan format VSCode ESLint
dan kemudian gunakan 代码格式规则
untuk memproses ESLint
. Untuk memberikan beberapa contoh: 代码质量规则
tanda petikan atau dua kali ganda tanda petikan . eslint: quotes
menggantikan ===
. eslint: ==
eqeqeq
, anda boleh rujuk artikel sebelumnya: ESLint
ESLINt bekerjasama dengan VSCode untuk menyatukan barisan pasukan -spesifikasi kod akhir
dan menyokong boleh dikonfigurasikan dan fungsi kod pemformatan fail automatik. 代码格式规范
Kelebihan:
, sesuai untuk kilang kecil. 代码格式规范
Kelemahan:
, jadi anda tidak boleh melakukan 代码格式规则
proofreading Untuk pengesahan, ia perlu digabungkan dengan ESLint. 代码质量规则
. ESLint
, dan pastinya ia tidak sebaik beberapa spesifikasi gaya pengekodan yang popular. Prettier
Artikel ini hanya menyediakan penyelesaian dan idea sama ada ia sesuai untuk anda bergantung pada keperluan anda sendiri. 代码格式规范
Untuk pengetahuan lanjut tentang VSCode, sila lawati: tutorial asas vscode!
Atas ialah kandungan terperinci Membawa anda menggunakan fungsi Format VSCode untuk melaksanakan pemformatan kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!