Rumah > alat pembangunan > VSCode > teks badan

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

青灯夜游
Lepaskan: 2021-10-14 18:46:00
ke hadapan
4961 orang telah melayarinya

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!

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

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
Salin selepas log masuk
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
    }
  ]
}
Salin selepas log masuk
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
Salin selepas log masuk
    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}"
Salin selepas log masuk
  • 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!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan