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.
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
Ikuti gesaan sambungan eslint seperti biasa, anda juga mesti menggunakan konfigurasi tersuai mengikut eslint
npm install -g eslint
{ "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 } ] }
Auto Rename Tag
Bookmarks
Bracket Pair Colorizer
Change Case
Codelf
cssrem
// 第三方插件cssrem配置 "cssrem.rootFontSize": 14
Vue Peek
filesize
GitLens
Import Cost
IntelliSense for CSS class names in HTML
"html-css-class-completion.includeGlobPattern": "**/*.{css,html,vue}"
Live Server
Path Intellisense
npm-intellisense
RegExp Preview and Editor
Settings Sync
SVG Viewer
Todo Tree
translate
Tslint
Version Lens
vscode-fileheader
JavaScript (ES6) code snippets
Copy Relative Path
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!