返回

史上最详细的WebStorm中安装Vant后解决代码提示异常缓慢问题指南

前端

如何解决WebStorm中安装Vant后代码提示异常缓慢的问题

作为一名开发者，你可能遇到过在WebStorm中安装Vant后，代码提示异常缓慢的烦人问题。别担心，这篇指南将为你提供详细的解决方案，让你轻松解决这一难题。

问题剖析

首先，让我们了解一下导致这个问题的原因。经过调查，我们发现代码提示框内包含了大量Vant相关的CSS类名。当WebStorm提供代码提示时，它需要对这些类名进行索引，从而导致速度变慢。

解决方案

1. 使用Vant官方WebStorm插件

Vant团队推出了官方的WebStorm插件，可以快速安装Vant代码提示索引，提升提示速度。在JetBrains Marketplace中找到该插件并按照说明进行安装。

2. 手动添加Vant代码提示索引

如果你不想使用插件，也可以手动添加索引。具体步骤如下：

  • 打开WebStorm，点击“File”>“Settings”。
  • 在“Settings”对话框中，找到“Editor”>“Code Completion”。
  • 在“Code Completion”页面中，点击“Add”按钮。
  • 在“Add New File Type”对话框中，选择“JavaScript”。
  • 在“Name”字段中，输入“Vant”。
  • 在“File Types”字段中，输入“.vue,.js”。
  • 点击“OK”按钮。

3. 优化Vant CSS类名

如果上述方法无效，你可以尝试优化Vant CSS类名：

  • 缩写为更短的名称。
  • 避免包含空格。
  • 避免包含连字符。

代码示例

如果你正在使用Vant的官方插件，需要在你的项目根目录中创建.idea文件夹，并在其中添加vant-code-completion.xml文件。内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="JavaScriptSettings">
    <option name="codeInsight.completion.enabled" value="true" />
    <option name="codeInsight.completion.showInvisibleSymbols" value="false" />
    <option name="codeInsight.completion.showUnresolvedReferences" value="true" />
    <option name="codeInsight.completion.enterKeyBehavior" value="1" />
    <option name="codeInsight.completion.insertSurroundings" value="false" />
    <option name="codeInsight.completion.showMethodDocumentation" value="true" />
    <option name="codeInsight.completion.limitElementsPerLookup" value="20" />
    <option name="codeInsight.completion.lookupLimit" value="60" />
    <option name="codeInsight.completion.defaultCompletionListSelection" value="1" />
    <option name="codeInsight.completion.restrictToClasspath" value="false" />
    <option name="codeInsight.completion.autopopupDelay" value="300" />
    <option name="codeInsight.completion.afterCompletionAutoPopupDelay" value="300" />
    <option name="codeInsight.completion.parametersAsKeywords" value="true" />
    <option name="codeInsight.completion.parametersWithSubtypes" value="true" />
    <option name="codeInsight.completion.includeNoParametersFunctions" value="false" />
    <option name="codeInsight.completion.expandCallsWhenSelfInvoked" value="true" />
    <option name="codeInsight.completion.returnParameterName" value="false" />
    <option name="codeInsight.completion.methodPresentation" value="1" />
    <option name="codeInsight.completion.excludeFromReferences" value="false" />
    <option name="codeInsight.completion.substituteExistingParameter" value="true" />
    <option name="codeInsight.completion.firstParameterPositioning" value="false" />
    <option name="codeInsight.completion.internalMemberNameTemplate" value"{0}" />
    <option name="codeInsight.completion.startTypingRenameActions" value="false" />
    <option name="codeInsight.completion.modalCompletion" value="false" />
    <option name="codeInsight.completion.showNumbersAsInts" value="false" />
    <option name="codeInsight.completion.completeAfterDot" value="true" />
    <option name="codeInsight.completion.completeClosedBraces" value="true" />
    <option name="codeInsight.completion.completeAfterSkippingClosingBraces" value="true" />
    <option name="codeInsight.completion.allowVarInAnonymousContext" value="false" />
    <option name="codeInsight.completion.completionInsteadOfInsert" value="true" />
    <option name="codeInsight.completion.shouldFormatInsertedText" value="true" />
    <option name="codeInsight.completion.nonImportedCompletions" value="false" />
    <option name="codeInsight.completion.preferIdentifierCompletion" value="true" />
    <option name="codeInsight.completion.showIntelliSenseForJSXElements" value="true" />
    <option name="codeInsight.completion.shouldShowEmptyLookup" value="true" />
    <option name="codeInsight.completion.showCompletionsForNonImportedVariables" value="false" />
    <option name="codeInsight.completion.includeAmbiguousItems" value="true" />
    <option name="codeInsight.completion.lambdaParamIsLast" value="true" />
    <option name="codeInsight.completion.exposeDescendants" value="true" />
    <option name="codeInsight.completion.autoSmartSelect" value="false" />
    <option name="codeInsight.completion.autoInsertHint" value="false" />
    <option name="codeInsight.completion.forbidCustomMethods" value="false" />
    <option name="codeInsight.completion.useStaticMembers" value="true" />
    <option name="codeInsight.completion.propertiesCompletion" value="1" />
    <option name="codeInsight.completion.subcompletionSnippets" value="true" />
    <option name="codeInsight.completion.variableTypeInference" value="true" />
    <option name="codeInsight.completion.addFunctionParametersIfNotFound" value="false" />
    <option name="codeInsight.completion.performTypeCheck" value="false" />
    <option name="codeInsight.completion.smartEnter" value="true" />
    <option name="codeInsight.completion.allowSpaceInCompletion" value="false" />
    <option name="codeInsight.completion.moveCaretAfterReplacement" value="false" />
    <option name="codeInsight.completion.disableRealTimeSuggestions" value="false" />
    <option name="codeInsight.completion.suppressInjectionsDuringTyping" value="false" />
    <option name="codeInsight.completion.parameterInfo" value="false" />
    <option name="codeInsight.completion.alwaysInvokeInsertHandler" value="false" />
    <option name="codeInsight.completion.restrictCompletionToContext" value="false" />
    <option name="codeInsight.completion.applySuggestionsOnlyForVariableNames" value="false" />
    <option name="codeInsight.completion.showClassHierarchyInsteadOfItems" value="false" />
    <option name="codeInsight.completion.forceEagerLookup" value="true" />
    <option name="codeInsight.completion.showInlayHintListInSelection" value="true" />
    <option name="codeInsight.completion.showInlayHintListForSymbolUnderCaret" value="true" />
    <option name="codeInsight.completion.showInlayHintListForVariableUnderCaret" value="true" />
    <option name="codeInsight.completion.filterForInlayHints" value="false" />
    <option name="codeInsight.completion.typehintsEnabled" value="true" />
    <option name="codeInsight.completion.useContextTypes" value="false" />
    <option name="codeInsight.completion.limitDuplicates" value="true" />
    <option name="codeInsight.completion.allowUndeclaredLookupElements" value="false" />
    <option name="codeInsight.completion.allowDumbCompletionElements" value="true" />
    <option name="codeInsight.completion.minMaskLength" value="3" />
    <option name="codeInsight.completion.maxPopupWidth" value="400" />
    <option name="codeInsight.completion.countInaccurateTypeMatching" value="false" />
    <option name="codeInsight.completion.delimitersBeforeOverride" value=":" />
    <option name="codeInsight.completion.findInInjectedContents" value="false" />
    <option name="codeInsight.completion.showStaticMembersInAnonymousClassContext" value="true" />
    <option name="codeInsight.completion.weightStaticMembersInAnonymousClassContext" value="true" />
    <option name="codeInsight.completion.enableSmartPointerCompletion" value="true" />