So konfigurieren Sie Vue in VSCode und verwenden die Vetur-Spracherkennungs-Engine!

Wie konfiguriere ich Vue in VSCode? Vue-Syntax identifizieren? Im folgenden Artikel erfahren Sie, wie Sie Vetur als Spracherkennungs-Engine verwenden. Lassen Sie uns den besten VSCode für Vuer erstellen!

Nach dem Herunterladen von vscode von der offiziellen Website wird die Installation geöffnet und Sie werden aufgefordert, ein chinesisches Sprachpaket zu installieren. Befolgen Sie die Anweisungen zum Installieren und Neustarten, und die Schnittstelle wird zu einer chinesischen Schnittstelle. [Empfohlenes Lernen: „vscode-Tutorial“]

Das Interface-Theme verwendet Materia Theme. Der Interface-Stil ist sehr klar und die Farben sind augenfreundlich, was meine Stimmung erfrischt ~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

  Icon Die Anzeige verwendet Material Icon Theme, die Dateisymbole sind sehr vollständig und mit Materia Theme

Da ich den Vue-Technologie-Stack verwende, muss ich auch die Vue-Syntax identifizieren. Es wird empfohlen, zu verwenden Vetur als Spracherkennungs-Engine zur Bereitstellung von Grammatikerkennung, Formatierung und verwandten Tipps.

Konfigurationsformatierung

vetur verfügt über ein eigenes Formatierungstool und verwendet das Formatierungsschema prettier. Einzelheiten finden Sie in der Konfiguration und Verwenden Sie Strg/Befehl +,Einstellungen öffnenSie können sehen, dass die JS-Formatierungs-Engine standardmäßig prettier verwendet🎜🎜aber für allgemeine Projekte wird empfohlen, zu verwenden eslint code> vereinheitlicht das Quellcodeformat, daher muss <code>vuter an eslint angepasst werden. 🎜

Installieren eslint und hübschere Erweiterung

🎜Befolgen Sie die Tipps zur eslint-Erweiterung, Sie müssen es auch global gemäß eslint formatieren🎜rrreee🎜Im Folgenden sind meine benutzerdefinierten vscode-Einstellungen aufgeführt perform Es wird beim Speichern formatiert, um Arbeitsaufwand zu sparen. Der Effekt ist wie folgt: 🎜

Häufig verwendete Plug-ins

• Tag automatisch umbenennen Wenn Sie den Tag-Namen ändern, wird automatisch der Name des geändert geschlossener Tag🎜
• Lesezeichen Lesezeichen-Plug-in zum Aufzeichnen der wichtigsten Punkte des Codes, wodurch es einfacher wird, die entsprechenden Punkte während der Überprüfung zu erhalten🎜
• Bracket Pair Colorizer Klammerfärbung, genaue Identifizierung mehrerer verschachtelter Klammern🎜
• Change Case Beim Deklarieren von Codevariablen können Sie vorhandene Variablen auf Kamel-Groß-/Kleinschreibung, Konstante oder andere Stile umstellen🎜
• Codelf Ich werde über die Benennung von Code sprechen. Die Hälfte ihrer Programmierzeit wird damit verbracht, darüber nachzudenken, wie man mit diesem Artefakt das schwierige Problem der Benennung von Namen zwar nicht lösen kann, es aber zumindest Vorschläge dazu liefert Lösen Sie es schneller und vermeiden Sie verwirrende Namen. Ein VSCode-Plugin zum Konvertieren von CSS-Werten in REM-HTML-Schriftarten. Die entsprechende Beziehung sollte 1rem = 14px sein, also muss sie in den Benutzereinstellungen unter Konfigurieren sein🎜rrreee
  • Vue Peek Klicken Sie mit der rechten Maustaste, um die referenzierte Komponente zu öffnen oder in der Vorschau anzuzeigen🎜
  • filesize

Berechnen Sie die Größe der Quellcodedatei und zeigen Sie sie unten links an. Angular🎜

GitLens Git-Verlaufsansicht, Commit-Datensatzansicht, Verlaufsvergleich, Versions-Rollback, Artefakt wird nicht analysiert🎜

Importkosten Berechnen Sie die durch den Import verursachte Dateigröße. 🎜

IntelliSense für CSS-Klassennamen in HTML-Klasse bietet CSS-Klassennamenvervollständigung für HTML-Attribute basierend auf Definitionen im Arbeitsbereich oder externen Dateien, auf die über das Link-Element verwiesen wird. 🎜🎜🎜Da wir die Vue-Sprache für die Entwicklung verwenden, müssen wir auch CSS-Eingabeaufforderungen für Vue konfigurieren.🎜rrreee

• 🎜Live Server bietet eine sofortige Servicevorschau von HTML und Codeänderungen erfolgen sofort Aktualisieren 🎜🎜
• 🎜Path Intellisense Pfad führt intelligente Sensorik ein 🎜🎜
• 🎜npm-intellisense npm-Modul führt intelligente Sensorik ein 🎜🎜
• 🎜 RegExp-Vorschau und -Editor Vorschau und Bearbeitung regulärer Ausdrücke🎜🎜
• 🎜Einstellungen synchronisieren Synchronisieren Sie Ihre vscode-Einstellungen, einschließlich Plug-Ins, Themes und aller Benutzerdaten🎜🎜
• 🎜SVG Viewer Vorschau SVG🎜🎜
• 🎜Todo Tree Zeigt die TODO-Liste in Ihrem Code an🎜🎜
• 🎜translate Translate🎜🎜🎜Tslint ts-Codeformat-Erkennungstool🎜🎜
• 🎜Version Lens npm-Versionserkennung🎜🎜
• 🎜vscode-fileheader Generation Dokumentkommentar-Header 🎜🎜
• 🎜JavaScript (ES6)-Codeschnipsel es-Codeschnipsel 🎜🎜
• 🎜Relativen Pfad kopieren Relativen Pfad kopieren 🎜🎜🎜🎜Mehr Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie Vue in VSCode und verwenden die Vetur-Spracherkennungs-Engine!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!