Comment configurer vue dans VSCode et utiliser le moteur de reconnaissance du langage Vetur !

Comment configurer vue dans VSCode ? Identifier la syntaxe de vue ? L'article suivant vous présentera comment utiliser Vetur comme moteur de reconnaissance linguistique. Créons le meilleur VSCode pour les vuers !

Après avoir téléchargé vscode depuis le site officiel, l'installation s'ouvre et vous êtes invité à installer un pack de langue chinoise. Suivez les invites pour installer et redémarrer, et l'interface devient une interface chinoise. [Apprentissage recommandé : "Tutoriel vscode"]

Le thème de l'interface utilise le Thème Materia. Le style de l'interface est très épuré et les couleurs sont agréables à regarder. Lors de l'écriture du code, mon humeur sera rafraîchie. ~Materia Theme，界面风格非常干净，颜色也比较护眼，写代码的时候心情也跟着清新起来~

图标显示使用Material Icon Theme，文件图标非常齐全，搭配Materia Theme非常好看

因为我使用的是vue技术栈，所以还要针对vue语法做识别，这里推荐按照Vetur作为语言识别引擎，提供语法识别，格式化，相关提示。

配置格式化

vetur自带格式化工具，使用的是prettier格式化方案，具体可以看配置，使用ctrl/command + ,打开设置

可以看到js的格式化引擎默认使用的是prettier

但是一般项目都是推荐使用eslint统一源码格式，所以还要对vuter进行eslint的适配

安装eslint和prettier扩展

按照eslint扩展提示，要正常使用eslint，还要全局按照eslint

npm install -g eslint

使用自定义配置进行格式化，以下是我的vscode自定义设置

{
  "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 书签插件，记录代码重点，review的时候更容易get对应的点
• Bracket Pair Colorizer 括号着色，对于多个嵌套的括号对应识别精准
• Change Case 代码变量声明时候，可以对已有变量切换成驼峰式，常量式，其他的风格
• Codelf 说起代码命名我就来气，他么的编程一半时间就是在想怎么命名更贴切，合适，有了这个神器，虽然说不能解决命名想破脑瓜子的难题，但是至少提供了建议，能更快解决，避免脑瓜子想破
• cssrem 一个CSS值转REM的VSCode插件

html字体我这边设计是使用14px，所以转的时候，对应关系应该是 1rem = 14px，所以要在用户设置里面进行配置

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

• Vue Peek 右键打开或预览引用的组件
• filesize 计算源码文件大小，并显示在左下角
• GitLens git历史查看，提交记录查看，历史比较，版本回滚，神器不解析
• Import Cost 计算import引入的文件大小
• IntelliSense for CSS class names in HTML class根据工作空间中找到的定义或通过link元素引用的外部文件，为HTML 属性提供CSS类名称完成。

因为我们使用vue语言开发，所以还要针对vue进行一下css的提示配置

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

• Live Server 提供对HTML的即时服务预览，代码改动即时刷新

• Path Intellisense 路径引入智能感知

• npm-intellisense npm module 引入智能感知

• RegExp Preview and Editor 正则表达式预览和编辑

• Settings Sync 同步你的vscode设置，包括插件，主题一切用户数据

• SVG Viewer 预览SVG

• Todo Tree 显示你代码里面的TODO列表

• translate 翻译

• Tslint ts代码格式检测工具

• Version Lens npm version检测

• vscode-fileheader 生成文档注释头

• JavaScript (ES6) code snippets es代码片段

• Copy Relative Path

  Icône L'affichage utilise le Thème d'icônes matérielles, les icônes de fichiers sont très complètes et cela semble très bien avec le Thème Materia

Parce que j'utilise la pile technologique vue, je dois également identifier la syntaxe vue. Il est recommandé d'utiliser Vetur comme moteur de reconnaissance linguistique pour fournir la reconnaissance grammaticale, le formatage et des conseils associés.

Formatage de la configuration

vetur est livré avec son propre outil de formatage et utilise le schéma de formatage plus joli Pour plus de détails, vous pouvez voir la configuration et. utilisez ctrl/command + ,Ouvrir les paramètresVous pouvez voir que le moteur de formatage js utilise plus joli par défaut🎜🎜mais pour les projets généraux, il est recommandé d'utiliser eslint code>unifie le format du code source, donc <code>vuter doit être adapté à eslint🎜

Installer eslint et une extension plus jolie

🎜Suivez les conseils d'extension eslint pour utiliser eslint normalement, vous devez également le formater globalement selon eslint🎜rrreee🎜en utilisant des configurations personnalisées. Voici mes paramètres personnalisés vscode🎜rrreee🎜. perform Il sera formaté lors de l'enregistrement pour libérer du travail. L'effet est le suivant. 🎜

Plug-ins couramment utilisés

• Renommer automatiquement la balise Lors de la modification du nom de la balise, modifiez automatiquement le nom du balise fermée🎜
• Signets Plug-in de signets pour enregistrer les points clés du code, facilitant ainsi l'obtention des points correspondants lors de la révision🎜
• Coloriseur de paires de supports Coloration des parenthèses, identification précise de plusieurs parenthèses imbriquées🎜
• Changer la casse Lors de la déclaration de variables de code, vous pouvez basculer les variables existantes en casse chameau, en constante ou dans d'autres styles🎜
• Codelf Je vais parler du nommage du code Angry, la moitié de leur temps de programmation est consacré à réfléchir à la façon de nommer de manière plus appropriée et appropriée. Avec cet artefact, bien qu'il ne puisse pas résoudre le problème de nommer des noms qui prêtent à confusion, il fournit au moins. suggestions pour le résoudre plus rapidement et éviter de confondre les noms. Broken🎜
• cssrem Un plug-in VSCode pour convertir les valeurs CSS en polices REM🎜🎜🎜Ma conception ici utilise 14px, donc quand. lors de la conversion, la relation correspondante doit être 1rem = 14px, elle doit donc être dans Configurer dans les paramètres utilisateur🎜rrreee
  • Vue Peek Cliquez avec le bouton droit pour ouvrir ou prévisualiser le composant référencé🎜
  • filesize Calculez la taille du fichier de code source et affichez-le dans le coin inférieur gauche Angular🎜
  • GitLens vue de l'historique git, vue des enregistrements de validation, comparaison de l'historique, restauration de version , l'artefact n'est pas analysé🎜
  • Coût d'importation Calculez la taille du fichier introduit par l'importation 🎜
  • La classe IntelliSense pour les noms de classe CSS en HTML fournit la complétion des noms de classe CSS pour Attributs HTML basés sur des définitions trouvées dans l'espace de travail ou des fichiers externes référencés via l'élément de lien. 🎜🎜🎜Parce que nous utilisons le langage vue pour le développement, nous devons également configurer les invites CSS pour vue🎜rrreee
    • 🎜Live Server fournit un aperçu instantané du service HTML et les modifications de code sont instantanées. Actualiser 🎜🎜
    • 🎜Path Intellisense path introduit la détection intelligente 🎜🎜
    • 🎜npm-intellisense le module npm introduit la détection intelligente 🎜🎜
    • 🎜 Aperçu et éditeur RegExp Aperçu et édition des expressions régulières🎜🎜
    • 🎜Synchronisation des paramètres Synchronisez vos paramètres vscode, y compris les plug-ins, les thèmes et toutes les données utilisateur🎜🎜
    • 🎜SVG Viewer

Aperçu SVG🎜🎜

🎜Todo Tree Affichez la liste TODO dans votre code🎜🎜

🎜traduire Traduire🎜🎜🎜Tslint outil de détection du format de code ts🎜🎜

🎜Version Lens détection de version npm🎜🎜

🎜vscode-fileheader génération En-tête de commentaire du document 🎜🎜

🎜Extraits de code JavaScript (ES6) es extraits de code 🎜🎜

🎜Copier le chemin relatif Copier le chemin relatif 🎜🎜🎜🎜Plus Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!