Analisis ringkas tentang cara memformat fail vue secara automatik apabila menyimpannya dalam vscode

Bagaimana untuk memformat fail vue secara automatik apabila menyimpan dalam vscode? Artikel berikut akan memperkenalkan kepada anda cara memformat vscode secara automatik apabila menyimpan mengikut peraturan eslint saya harap ia akan membantu anda!

Baru-baru ini saya menggunakan vue-admin-template untuk menulis vue npm run devSelalu ada ralat eslint apabila dijalankan penyelesaian direkodkan. [Pembelajaran yang disyorkan: "tutorial pengenalan vscode"]

1 Pasang pemalam

vscode memasang pemalam berikut:

• eslint
• Vetur
• Prettier - Pemformat kod

Format fail 2.vue apabila menyimpan

Tekan Langsung ·commond shift p·, pilihan carian terbuka tetapan (json).

Tambah kandungan berikut dalam fail konfigurasi Berhati-hati untuk tidak menyalin semuanya secara langsung, kerana ia mungkin menimpa konfigurasi anda sendiri. Adalah disyorkan untuk menyalinnya dan mengalih keluar kekunci pendua.

{

"editor.suggestSelection": "first",

"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

"explorer.confirmDelete": false,

"editor.tabSize": 2,

"files.autoSave": "onFocusChange",

"editor.fontSize": 14, // 设置字体

"editor.tabCompletion": "on", // 用来在出现推荐值时，按下Tab键是否自动填入最佳推荐值

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true,

"source.organizeImports": true // 这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列

},

"editor.formatOnSave": true,

// #让vue中的js按"prettier"格式进行格式化

"vetur.format.defaultFormatter.html": "js-beautify-html",

"vetur.format.defaultFormatter.js":"prettier-eslint",

"vetur.format.defaultFormatterOptions": {

"js-beautify-html": {

// #vue组件中html代码格式化样式

"wrap_attributes": "auto", //也可以设置为“auto”，效果会不一样

"wrap_line_length": 200,

"end_with_newline": false,

"semi": false,

"singleQuote": true

},

"prettier": {

"semi": false,

"singleQuote": true,

"editor.tabSize": 2

},

"prettyhtml": {

"printWidth": 160,

"singleQuote": false,

"wrapAttributes": false,

"sortAttributes": false

}

},

"[vue]": {

"editor.defaultFormatter": "octref.vetur"

},

"bracketPairColorizer.depreciation-notice": false,

"editor.mouseWheelZoom": true

}

Rekod masalah

Formatkan semua fail dalam direktori

Muat turun palam -inStart Format Files, kemudian klik kanan direktori dan pilih 开始格式化文件.

Abaikan konfigurasi fail lihat https://marketplace.visualstudio.com/items?itemName=jbockle.jbockle-format-files&ssr=false#overview

Untuk pengetahuan lanjut tentang VSCode, sila lawati: tutorial vscode! !

Atas ialah kandungan terperinci Analisis ringkas tentang cara memformat fail vue secara automatik apabila menyimpannya dalam vscode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!