🤜 👩🏽‍🏭 🚣🏾 वेबस्टॉर्म प्लगइन और ऑटो-ऐड-ऑन 👨‍👩‍👦 ⌚️ 👁️

मैं आईडीए आईडीई परिवार में गुम ऑटो-ऐड को जोड़ने का एक सरल तरीका साझा करना चाहूंगा। हमारे मामले में, WebStorm या PhpStrom के लिए।

हमें अपनी परियोजना के मोर्चे पर एक आवश्यकता है। जेएस लाइब्रेरी। और जब इसके साथ काम करते हैं, तो आपको उन्हें जोड़ने के लिए कुछ फ़ाइलों को पथ निर्दिष्ट करने की आवश्यकता होती है। दुर्भाग्य से, इन फ़ाइलों के पथ को हाथों से लिखा जाना चाहिए या भागों में कॉपी किया जाना चाहिए।
और मुझे लगा कि यह तय किया जाना चाहिए, और फाइलों में पथ का ऑटो-पूरा जोड़ना होगा।

उसके बाद, मैंने आइडिया के लिए प्लगइन्स लिखने के तरीके के बारे में जानकारी की तलाश शुरू कर दी और zenden2k habrayuzer द्वारा लेख को याद किया, जिसमें उन्होंने kohana के लिए लिंक रिज़ॉल्यूशन के लिए प्लगइन बनाने के तरीके के बारे में बात की थी। मेरे लेख को पढ़ने से पहले, आपको इसे जरूर पढ़ना चाहिए।

यह तय करने के बाद कि लिंक रिज़ॉल्यूशन बहुत उपयोगी कार्यक्षमता है, मैंने पहली बार इसके लिए एक प्लगइन लिखा था।
एक प्लगइन लिखते समय, मैं आइडिया कम्युनिटी एडिशन में जावास्क्रिप्ट फ़ाइलों के लिए एक PSI संरचना की कमी की समस्या में भाग गया, और इसके बिना जेएस फ़ाइल की संरचना को निर्धारित करना संभव नहीं था जो लिंक रिज़ॉल्यूशन के लिए आवश्यक तत्व निर्धारित करने के लिए आवश्यक है। मुझे आइडिया अल्टीमेट ईएपी लगाना था। Idea UT में, आपको जावास्क्रिप्ट के लिए एक प्लग-इन स्थापित करने की आवश्यकता होती है, और फिर PSI व्यूअर (उपकरण -> View PSI संरचना) में जावास्क्रिप्ट फ़ाइलों के लिए PSI संरचना का विकल्प उपलब्ध होगा।

स्क्रीनशॉट

इसके अलावा, चूंकि JetBrains ने PHP और JS के लिए ओपनैपी को रोल किया था, क्योंकि यह लेख लिखा गया था, मैंने एक विशिष्ट PSI JSLiteralExpression तत्व के लिए बाइंडिंग का उपयोग किया है। मेरा PsiReferenceContributor इस तरह दिखना शुरू हुआ:

RequirejsPsiReferenceContributor.java

package requirejs; import com.intellij.lang.javascript.psi.JSLiteralExpression; import com.intellij.patterns.StandardPatterns; import com.intellij.psi.PsiReferenceContributor; import com.intellij.psi.PsiReferenceRegistrar; public class RequirejsPsiReferenceContributor extends PsiReferenceContributor { @Override public void registerReferenceProviders(PsiReferenceRegistrar psiReferenceRegistrar) { RequirejsPsiReferenceProvider provider = new RequirejsPsiReferenceProvider(); psiReferenceRegistrar.registerReferenceProvider(StandardPatterns.instanceOf(JSLiteralExpression.class), provider); } }

जैसा कि आप देख सकते हैं, PsiElement.class के बजाय, मैंने पहले से ही JSLiteralExpression.class का विशेष रूप से उपयोग किया है, ताकि मुझे सभी तत्वों को एक पंक्ति में संसाधित न करना पड़े।
लेकिन ओपनैपी का उपयोग करने के लिए, आपको इसे विचार में प्लगइन परियोजना में कनेक्ट करने की आवश्यकता है। ऐसा करने के लिए, प्रोजेक्ट स्ट्रक्चर पर जाएं, वहां लाइब्रेरीज़ चुनें। हम केंद्रीय कॉलम के ऊपर + पर क्लिक करते हैं, जावा का चयन करते हैं और खोले गए फ़ाइल चयन विंडो में "/path_to_webstrom/plugins/JavaScriptLanguage/lib/javascript-openapi.jar" फ़ाइल का चयन करें:

स्क्रीनशॉट

फिर हम मॉड्यूल पर जाते हैं, निर्भरता टैब खोलते हैं, और वहां, जावास्क्रिप्ट-ओपनैपी के खिलाफ, बशर्ते कि स्कोप निर्दिष्ट करें:

स्क्रीनशॉट

इन जोड़तोड़ों के बाद, IDE कक्षाओं और अन्य चीजों के नाम को संकेत देगा जो जावास्क्रिप्ट के लिए ओपनैपी में शामिल हैं।

PsiReferenceProvider को बदलना भी आवश्यक था, इसे प्रतिबिंब से बचाते हुए, यह कुछ इस तरह से निकला:

RequirejsPsiReferenceProvider.java

 package requirejs; import com.intellij.ide.util.PropertiesComponent; import com.intellij.lang.javascript.psi.JSCallExpression; import com.intellij.openapi.project.Project; import com.intellij.openapi.util.TextRange; import com.intellij.openapi.vfs.VirtualFile; import com.intellij.psi.PsiElement; import com.intellij.psi.PsiReference; import com.intellij.psi.PsiReferenceProvider; import com.intellij.util.ProcessingContext; import org.jetbrains.annotations.NotNull; public class RequirejsPsiReferenceProvider extends PsiReferenceProvider { @NotNull @Override public PsiReference[] getReferencesByElement(@NotNull PsiElement psiElement, @NotNull ProcessingContext processingContext) { Project project = psiElement.getProject(); PropertiesComponent properties = PropertiesComponent.getInstance(project); String webDirPrefString = properties.getValue("web_dir", "webfront/web"); VirtualFile webDir = project.getBaseDir().findFileByRelativePath(webDirPrefString); if (webDir == null) { return PsiReference.EMPTY_ARRAY; } try { String path = psiElement.getText(); if (isRequireCall(psiElement)) { PsiReference ref = new RequirejsReference(psiElement, new TextRange(1, path.length() - 1), project, webDir); return new PsiReference[] {ref}; } } catch (Exception ignored) {} return new PsiReference[0]; } public static boolean isRequireCall(PsiElement element) { PsiElement prevEl = element.getParent(); if (prevEl != null) { prevEl = prevEl.getParent(); } if (prevEl != null) { if (prevEl instanceof JSCallExpression) { try { if (prevEl.getChildren().length > 1) { if (prevEl.getChildren()[0].getText().toLowerCase().equals("require")) { return true; } } } catch (Exception ignored) {} } } return false; } }

अगला, आपको इस लिंक को हल करने के लिए जिम्मेदार विधि को लागू करने की आवश्यकता है।
और यहाँ मुझे विचार के लिए प्लगइन्स लिखने के बारे में बहुत अधिक जानकारी के साथ एक प्लग मिला है। तथ्य यह है कि शुरू में मुझे "संसाधन रूट" के रूप में चिह्नित निर्देशिकाओं से फाइलों की खोज शुरू करने की इच्छा थी, लेकिन अफसोस, मुझे इस तरह की निर्देशिकाओं को प्राप्त करने का तरीका नहीं मिला। इसलिए, मैंने सेटिंग्स से निर्देशिका के लिए पथ लेने का फैसला किया, जिसके लिए मैंने zenden2k लेख में वर्णित सेटिंग्स पृष्ठ को लागू किया, इसलिए मैं इसे नहीं दोहराऊंगा।
हमें उस निर्देशिका का पता चला जिसमें हमें रास्ते में फाइलों की खोज करने की आवश्यकता थी, सब कुछ सरल था। वर्चुअलाइफ़ाइल क्लास में फ़ाइनलबीबेलरेटिवपैथ पद्धति है जो इनपुट के रूप में एक पथ स्ट्रिंग लेती है और यह देखती है कि फ़ाइल दिए गए पथ पर मौजूद है या नहीं और यदि हाँ, तो उसे वर्चुअलफ़ाइल क्लास की एक आवृत्ति के रूप में लौटाता है। तो आपको PsiElement से स्ट्रिंग मान लेना था, अतिरिक्त को काट देना, लापता को जोड़ना और जांचना कि क्या ऐसी कोई फ़ाइल मौजूद है। यदि यह मौजूद है, तो बस PsiElement की एक उदाहरण के रूप में लिंक को वापस कर दें। संकल्प विधि इस प्रकार है:

आवश्यकताएँ

  @Nullable @Override public PsiElement resolve() { String path = element.getText(); path = path.replace("'", "").replace("\"", ""); if (path.startsWith("tpl!")) { path = path.replace("tpl!", ""); } else { path = path.concat(".js"); } if (path.startsWith("./")) { path = path.replaceFirst( ".", element .getContainingFile() .getVirtualFile() .getParent() .getPath() .replace(webDir.getPath(), "") ); } VirtualFile targetFile = webDir.findFileByRelativePath(path); if (targetFile != null) { return PsiManager.getInstance(project).findFile(targetFile); } return null; }

ऐसा करने के बाद, मुझे लिंक करने की अनुमति मिल गई और ऑटो-पूर्ति को लागू करना शुरू करना संभव हो गया।

विचार में, स्वत: पूर्णता को लागू करने के दो तरीके हैं। पहला सरल एक PsiReference इंटरफ़ेस के getVariants विधि को लागू करने के लिए है, और दूसरा उन्नत एक FulltionContributor का उपयोग करता है। मैंने दोनों तरीकों की कोशिश की, लेकिन मुझे कंप्लीशनकंटेनर में खुद के लिए कोई लाभ नहीं मिला, इसलिए मैं पहली विधि का उपयोग करने पर बस गया।
स्वतः-पूर्ण होने के लिए, हमें एक सरणी के रूप में तत्वों की सूची वापस करनी होगी। यह स्ट्रिंग्स, लोकोप्लीमेंट या साइलीमेंट के साथ एक सरणी हो सकती है।
शुरुआत में मैंने पंक्तियों को वापस करने की कोशिश की। लेकिन फिर एक आश्चर्य मुझे इंतजार कर रहा था। तथ्य यह है कि विचार अंतिम रेखा को पूरी स्लैश के बाद स्लैश के साथ लाइनों को सम्मिलित करता है। इसके अलावा, यदि आप स्लैश के बाद केवल एक मान के साथ एक स्ट्रिंग जारी करते हैं, तो विचार इस स्ट्रिंग को ऑटो-पूरा करने के लिए उपयुक्त नहीं मानता है। यह व्यवहार मेरे लिए पूरी तरह से स्पष्ट नहीं है। और मुझे इस बात की जानकारी नहीं मिल पाई है कि स्लैश के साथ लाइनों को स्वत: पूर्ण करने या फ़ाइलों के लिए पथ के साथ एक विकल्प के रूप में कैसे करें।
इसके लिए मैंने इसे अपने तरीके से किया।
मूल्य के सम्मिलन को स्वयं नियंत्रित करने के लिए, आपको InsertHandler इंटरफ़ेस को लागू करना होगा और इसमें हैंडल इनरटेर विधि में आवश्यक क्रियाओं को करना होगा। और इसका उपयोग करने के लिए, आपको न केवल एक स्ट्रिंग, बल्कि एक लुकअप क्लीयरेंट लौटना होगा, जिसमें हमें InsertHandler की आवश्यकता है।
इसलिए मैंने लुकअप क्लास को इस तरह बढ़ाया:

RequirejsLookupElement.java

 package requirejs; import com.intellij.codeInsight.completion.InsertHandler; import com.intellij.codeInsight.completion.InsertionContext; import com.intellij.codeInsight.lookup.LookupElement; import com.intellij.psi.PsiElement; import org.jetbrains.annotations.NotNull; public class RequirejsLookupElement extends LookupElement { String path; PsiElement element; private InsertHandler<LookupElement> insertHandler = null; public RequirejsLookupElement(String path, InsertHandler<LookupElement> insertHandler, PsiElement element) { this.path = path; this.insertHandler = insertHandler; this.element = element; } public void handleInsert(InsertionContext context) { if (this.insertHandler != null) { this.insertHandler.handleInsert(context, this); } } @NotNull @Override public String getLookupString() { return path; } }

InsertHandler कार्यान्वयन इस तरह दिखता है:

RequirejsInsertHandler.java

 package requirejs; import com.intellij.codeInsight.completion.InsertHandler; import com.intellij.codeInsight.completion.InsertionContext; import com.intellij.codeInsight.lookup.LookupElement; public class RequirejsInsertHandler implements InsertHandler { private static final RequirejsInsertHandler instance = new RequirejsInsertHandler(); @Override public void handleInsert(InsertionContext insertionContext, LookupElement lookupElement) { if (lookupElement instanceof RequirejsLookupElement) { insertionContext.getDocument().replaceString( ((RequirejsLookupElement) lookupElement).element.getTextOffset() + 1, insertionContext.getTailOffset(), ((RequirejsLookupElement) lookupElement).path ); } } public static RequirejsInsertHandler getInstance() { return instance; } }

हैंडल इनएक्टर विधि का सार यह है कि हम PsiElement को प्राप्त करने के लिए एक लुकअप ईलमेंट लेते हैं, जिसके लिए इसे दिखाया गया और चयनित किया गया, PsiElement से हम फाइल में इसकी लोकेशन प्राप्त करते हैं और लुकअपमेंट.पाथ से टेक्स्ट के साथ लाइन की पूरी लंबाई को बदलते हैं। बेशक यह सबसे अच्छा तरीका नहीं है, लेकिन दुर्भाग्य से मुझे दूसरा नहीं मिला।

उसके बाद, मैंने सभी मिलान फ़ाइलों की खोज की, और उन्हें लुकअपमेंट की एक सरणी के रूप में लौटाया।
यहाँ आवश्यकताएँ की पूरी सूची है:

RequirejsReference.java

 package requirejs; import com.intellij.codeInsight.lookup.LookupElement; import com.intellij.openapi.project.Project; import com.intellij.openapi.util.TextRange; import com.intellij.openapi.vfs.VirtualFile; import com.intellij.openapi.vfs.newvfs.impl.VirtualDirectoryImpl; import com.intellij.openapi.vfs.newvfs.impl.VirtualFileImpl; import com.intellij.psi.PsiElement; import com.intellij.psi.PsiManager; import com.intellij.psi.PsiReference; import com.intellij.util.IncorrectOperationException; import org.jetbrains.annotations.NotNull; import org.jetbrains.annotations.Nullable; import java.util.ArrayList; public class RequirejsReference implements PsiReference { PsiElement element; TextRange textRange; Project project; VirtualFile webDir; public RequirejsReference(PsiElement element, TextRange textRange, Project project, VirtualFile webDir) { this.element = element; this.textRange = textRange; this.project = project; this.webDir = webDir; } @Override public PsiElement getElement() { return this.element; } @Nullable @Override public PsiElement resolve() { String path = element.getText(); path = path.replace("'", "").replace("\"", ""); if (path.startsWith("tpl!")) { path = path.replace("tpl!", ""); } else { path = path.concat(".js"); } if (path.startsWith("./")) { path = path.replaceFirst( ".", element .getContainingFile() .getVirtualFile() .getParent() .getPath() .replace(webDir.getPath(), "") ); } VirtualFile targetFile = webDir.findFileByRelativePath(path); if (targetFile != null) { return PsiManager.getInstance(project).findFile(targetFile); } return null; } @Override public String toString() { return getCanonicalText(); } @Override public boolean isSoft() { return false; } @NotNull @Override public Object[] getVariants() { ArrayList<String> files = filterFiles(this.element); ArrayList<LookupElement> completionResultSet = new ArrayList<LookupElement>(); for (int i = 0; i < files.size(); i++) { completionResultSet.add( new RequirejsLookupElement( files.get(i), RequirejsInsertHandler.getInstance(), this.element ) ); } return completionResultSet.toArray(); } protected ArrayList<String> getAllFilesInDirectory(VirtualFile directory) { ArrayList<String> files = new ArrayList<String>(); VirtualFile[] childrens = directory.getChildren(); if (childrens.length != 0) { for (int i = 0; i < childrens.length; i++) { if (childrens[i] instanceof VirtualDirectoryImpl) { files.addAll(getAllFilesInDirectory(childrens[i])); } else if (childrens[i] instanceof VirtualFileImpl) { files.add(childrens[i].getPath().replace(webDir.getPath() + "/", "")); } } } return files; } protected ArrayList<String> filterFiles (PsiElement element) { String value = element.getText().replace("'", "").replace("\"", "").replace("IntellijIdeaRulezzz ", ""); Boolean tpl = value.startsWith("tpl!"); String valuePath = value.replaceFirst("tpl!", ""); ArrayList<String> allFiles = getAllFilesInDirectory(webDir); ArrayList<String> trueFiles = new ArrayList<String>(); String file; for (int i = 0; i < allFiles.size(); i++) { file = allFiles.get(i); if (file.startsWith(valuePath)) { if (tpl && file.endsWith(".html")) { trueFiles.add("tpl!" + file); } else if (file.endsWith(".js")) { trueFiles.add(file.replace(".js", "")); } } } return trueFiles; } @Override public boolean isReferenceTo(PsiElement psiElement) { return false; } @Override public PsiElement bindToElement(@NotNull PsiElement psiElement) throws IncorrectOperationException { throw new IncorrectOperationException(); } @Override public PsiElement handleElementRename(String s) throws IncorrectOperationException { throw new IncorrectOperationException(); } @Override public TextRange getRangeInElement() { return textRange; } @NotNull @Override public String getCanonicalText() { return element.getText(); } }

मैंने फ़ाइल खोज विधि को अलग से हाइलाइट किया है, क्योंकि यह पुनरावर्ती है, और फ़ाइल फ़िल्टरिंग पद्धति पर भी प्रकाश डाला गया है, क्योंकि केवल टेम्पलेट के लिए html की आवश्यकता है, और बाकी के लिए, js फ़ाइलों की आवश्यकता है। पेस्ट करते समय, टेम्पलेट tpl के साथ डाले जाते हैं!, उपसर्ग और js फाइलें बिना js एक्सटेंशन के डाली जाती हैं।

UPD :
टिप्पणियों में, VISTALL के उपयोगकर्ता ने सुझाव दिया कि लुकअपमेंट वंश के लिए अपनी खुद की कक्षा बनाना शानदार था। इसके बजाय, आप LookupElementBuilder का उपयोग कर सकते हैं, जो आपको यह निर्दिष्ट करने की अनुमति देता है कि किस हेंडलर का उपयोग करना है और किस PsiElement को संदर्भित करता है।
LookupElementBuilder का उपयोग करने के लिए, मैंने निम्न आवश्यकताएँ को बदला :: getVariants विधि, इस प्रकार है:

आवश्यकताएँ: संदर्भ :: getVariants

  @NotNull @Override public Object[] getVariants() { ArrayList<String> files = filterFiles(element); ArrayList<LookupElement> completionResultSet = new ArrayList<LookupElement>(); for (int i = 0; i < files.size(); i++) { completionResultSet.add( LookupElementBuilder .create(element, files.get(i)) .withInsertHandler( RequirejsInsertHandler.getInstance() ) ); } return completionResultSet.toArray(); }

उत्पन्न लुकअपमेंट के लिए यह जानने के लिए कि यह किस PsiElement से संबंधित है, यह बनाने की विधि को कॉल करने के लिए पर्याप्त है, PsiElement को पहले पैरामीटर के रूप में और दूसरी पंक्ति को दूसरे पैरामीटर के रूप में ऑटो-पूरा करने के लिए उपयोग किया जाता है।
मैंने आवश्यकताएँ को भी बदल दिया। InInthHandler :: handleInsert इस तरह से:

आवश्यकताएँ:

  @Override public void handleInsert(InsertionContext insertionContext, LookupElement lookupElement) { insertionContext.getDocument().replaceString( lookupElement.getPsiElement().getTextOffset() + 1, insertionContext.getTailOffset(), lookupElement.getLookupString() ); }

इसमें से, मैंने PsiElement और प्रतिस्थापन स्ट्रिंग को प्राप्त करने के लिए लुकअप ईलमेंट प्रकार की जांच और उपयोग की जाने वाली विधियों को हटा दिया।
इन जोड़तोड़ के बाद, NeedjsLookupElement वर्ग की अब आवश्यकता नहीं है।

UPD 2 :
प्लगइन थोड़ा समाप्त हो गया है और github पर पोस्ट किया गया है: github.com/Fedott/WebStormRequireJsPlivein
एक ही प्लगइन अब आधिकारिक जेटब्रेन्स रिपॉजिटरी में उपलब्ध है: plugins.jetbrains.com/plugin/7337
विशलिस्ट को गितुब या यहाँ लिखने के लिए भेजा जा सकता है।

वह सब है।
प्रश्न या सुझाव हैं कि कैसे लागू करना सबसे अच्छा है, मुझे उन्हें पढ़ने में खुशी होगी।

वेबस्टॉर्म प्लगइन और ऑटो-ऐड-ऑन

More articles: