Bagaimana untuk mengkonfigurasi vue dalam VSCode dan menggunakan enjin pengecaman bahasa Vetur!

Bagaimana untuk mengkonfigurasi vue dalam VSCode? Kenal pasti sintaks vue? Artikel berikut akan memperkenalkan kepada anda cara menggunakan Vetur sebagai enjin pengecaman bahasa Marilah kami mencipta VSCode terbaik untuk vuers!

Selepas memuat turun vscode dari tapak web rasmi, pemasangan dibuka dan anda digesa untuk memasang pek bahasa Cina Ikut gesaan untuk memasang dan memulakan semula, dan antara muka menjadi a antara muka Cina. [Pembelajaran yang disyorkan: "tutorial vscode"]

Menggunakan tema antara muka Materia Theme, gaya antara muka sangat bersih, warnanya mesra mata, dan mood saya berasa segar semasa menulis kod~

Ikon dipaparkan menggunakan Material Icon Theme Ikon fail sangat lengkap dan kelihatan bagus dengan Materia Theme

Oleh kerana saya menggunakan tindanan teknologi vue, saya juga perlu. mengenal pasti sintaks vue di sini disyorkan untuk menggunakan Vetur sebagai enjin pengecaman bahasa untuk memberikan pengecaman tatabahasa, pemformatan dan petua yang berkaitan.

Pemformatan konfigurasi

vetur disertakan dengan alat pemformatannya sendiri dan menggunakan skema pemformatan prettier Anda boleh melihat konfigurasi untuk butiran Gunakan ctrl/command , untuk membuka tetapan

Saya melihat enjin pemformatan js menggunakan prettier

secara lalai, tetapi disyorkan untuk menggunakan eslint format kod sumber bersatu untuk projek umum, jadi vuter perlu disesuaikan dengan eslint

Pasang sambungan eslint dan lebih cantik

Ikuti gesaan sambungan eslint seperti biasa, anda juga mesti menggunakan konfigurasi tersuai mengikut eslint

npm install -g eslint

secara global, berikut adalah tetapan tersuai vscode saya

{
  "workbench.iconTheme": "eq-material-theme-icons",
  "workbench.colorTheme": "Material Theme",
  "materialTheme.fixIconsRunning": false,
  "editor.fontSize": 16, // 字体大小
  // 以下是代码格式化配置
  "editor.formatOnSave": true, // 每次保存的时候自动格式化
  "editor.tabSize": 2, // 代码缩进修改成2个空格
  "eslint.autoFixOnSave": false, // 每次保存的时候将代码按eslint格式进行修复
  "prettier.eslintIntegration": true, // 让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, // 去掉代码结尾的分号
  "prettier.singleQuote": true, // 使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
}

Ia akan diformat setiap kali saya menyimpan, membebaskan tenaga kerja, kesannya adalah seperti berikut

Pemalam yang biasa digunakan

• Apabila menukar nama teg, menukar nama teg tertutup secara automatik Auto Rename Tag
• Pemalam penanda halaman untuk merekodkan perkara utama kod, menjadikannya lebih mudah untuk mendapatkan mata yang sepadan semasa semakan Bookmarks
• Pewarna kurungan, pengenalan tepat berbilang kurungan bersarangBracket Pair Colorizer
• Apabila mengisytiharkan pembolehubah kod, anda boleh menukar pembolehubah sedia ada kepada sarung unta, pemalar dan gaya lainChange Case
• Apabila bercakap tentang penamaan kod, saya marah Separuh daripada masa pengaturcaraan mereka hanya memikirkan cara untuk menamakannya dengan lebih sesuai dan sesuai dengan artifak ini , walaupun ia tidak dapat menyelesaikan masalah menamakan nama, sekurang-kurangnya ia dapat menyelesaikan masalah dengan menyediakan cadangan untuk menyelesaikan masalah dengan lebih cepat dan mengelakkan daripada perlu berfikir terlalu keras Codelf
• Pemalam VSCode untuk menukar CSS. values ​​​​​​ke REM cssrem

Fon html yang saya reka di sini ialah 14px Jadi apabila memindahkan, hubungan yang sepadan hendaklah 1rem = 14px, jadi ia perlu dikonfigurasikan dalam tetapan pengguna

// 第三方插件cssrem配置
  "cssrem.rootFontSize": 14

Klik kanan untuk membuka atau pratonton komponen yang dirujuk
• Vue Peek
Kira saiz fail kod sumber dan paparkannya di sudut kiri bawah
• filesize
Lihat sejarah git, lihat rekod komit, bandingkan sejarah, gulung semula versi, artifak tidak dihuraikan
• GitLens
Kira import Saiz fail yang diperkenalkan
• Import Cost
kelas Menyediakan pelengkapan nama kelas CSS untuk atribut HTML berdasarkan definisi yang terdapat dalam ruang kerja atau fail luaran yang dirujuk melalui elemen pautan.
• IntelliSense for CSS class names in HTML
Oleh kerana kami menggunakan bahasa vue untuk membangun, kami juga perlu mengkonfigurasi gesaan css untuk vue

"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"

• Menyediakan Perkhidmatan HTML masa nyata pratonton, perubahan kod dimuat semula serta-merta

  Live Server

• Laluan memperkenalkan penderiaan pintar

  Path Intellisense

• modul npm memperkenalkan penderiaan pintar

  npm-intellisense

• Pratonton dan pengeditan ungkapan biasa

  RegExp Preview and Editor

• Segerakkan tetapan vscode anda, termasuk pemalam, tema dan semua data pengguna

  Settings Sync

• Pratonton SVG

  SVG Viewer

• Tunjukkan senarai TODO dalam kod anda

  Todo Tree

• Terjemahan

  translate

• alat pengesan format kod ts

  Tslint

• pengesanan versi npm

  Version Lens

• Jana pengepala ulasan dokumen

  vscode-fileheader

• es kod coretan

  JavaScript (ES6) code snippets

• Salin laluan relatif

  Copy Relative Path

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi vue dalam VSCode dan menggunakan enjin pengecaman bahasa Vetur!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!