ฉันจะใช้ WebStorm สำหรับ Chrome Extension Development ได้อย่างไร

104

ฉันเพิ่งซื้อ WebStorm 5 และจนถึงตอนนี้ก็เพลิดเพลินกับคุณสมบัติการตรวจสอบ ปัญหาอย่างหนึ่งที่ฉันพบเมื่อพัฒนาส่วนขยาย Chrome ของฉันคือมันไม่รู้จักchromeตัวแปร:

ตัวแปรที่ยังไม่ได้แก้ไขหรือประเภท chrome

มีวิธีเพิ่มchromeตัวแปรให้กับ Inspector เพื่อให้สามารถเติมข้อความอัตโนมัติขณะพิมพ์ได้หรือไม่ ฉันเดาว่าฉันจะต้องเพิ่ม Chromium เป็นไลบรารีภายนอก แต่ฉันไม่แน่ใจว่าจะเริ่มจากตรงไหน

— matpie
แหล่งที่มา

215

การตั้งค่าครั้งแรก

เปิดSettingsกล่องโต้ตอบ ( File> Settings)
คลิกLanguages & Frameworks> Javascript>Libraries
คลิก Download
ตรวจสอบให้แน่ใจว่าTypeScript community stubsได้เลือกแล้ว
เลือกchromeจากรายการ (คุณสามารถค้นหาได้อย่างรวดเร็วเพียงแค่พิมพ์chrome)
คลิก Download and Install
คลิกOKเพื่อปิดกล่องโต้ตอบการตั้งค่า

ขั้นตอนที่ 2-6 แสดงด้านล่าง:

ในโครงการต่อมา

ในโครงการที่ตามมาคุณเพียงแค่:

เปิดSettingsกล่องโต้ตอบอีกครั้ง ( File> Settings)
คลิกLanguages & Frameworks> Javascript> Librariesอีกครั้ง
ตรวจสอบ chrome-DefinitelyTyped
คลิกOKเพื่อปิดกล่องโต้ตอบ

ขั้นตอนที่ 2-4 แสดงด้านล่าง:

— คนอื่น ๆ
แหล่งที่มา

3

ใช้งานได้ดีใน Intellij

— Oskar Ferm

2

จำเป็นต้องมีคำตอบที่อัปเดตเนื่องจาก IntelliJ IDEA 2017.1 ไม่แสดง "chrome" ภายใต้ "ต้นขั้วชุมชน TypeScript" มีความคิดอย่างไรที่จะเพิ่มสิ่งนั้น?

— Reem

1

มันกลายเป็นบั๊กใน IntelliJ IDEA 2017.1 youtrack.jetbrains.com/issue/WEB-26160#u=1490671035044

— Reem

1

บน Mac ไม่ได้ตั้งชื่อ แต่เป็นการตั้งค่า แต่คุณสามารถเข้าถึงได้โดยใช้command+,

— Ulysse BN

4

ควรสังเกตว่า WebStorm จะต้องเริ่มต้นใหม่

— Tyler Crompton

42

อัปเดต 2 :

มันได้รับการสนับสนุนในขณะนี้ออกจากกล่องให้ดูคำตอบที่สมบูรณ์ด้านล่าง

ดาวน์โหลดไลบรารี

อัพเดท :

มีไฟล์ Stub ที่สมบูรณ์มากขึ้นซึ่งสามารถเพิ่มเป็นไลบรารีเพื่อให้โค้ดเสร็จสมบูรณ์ เป็นส่วนหนึ่งของโครงการ Closure Compiler ดาวน์โหลดchrome_extensions.js

โปรดดูคำร้องขอคุณลักษณะสำหรับ WebStormเพื่อเพิ่มไลบรารีนี้โดยอัตโนมัติจาก IDE

คุณต้องได้รับห้องสมุด JavaScript API สำหรับที่ไหนสักแห่ง Chrome หรือใช้ต้นขั้วที่จะได้รับการเสร็จสิ้นขั้นพื้นฐาน

ห้องสมุดหรือต้นขั้วสามารถกำหนดค่าใน WebStorm

ผมพบว่าไฟล์ JSON ที่มีนามสกุล API เราสามารถเขียนสคริปต์ที่จะสร้างต้นขั้ว JS จากไฟล์ JSON เหล่านี้ได้ต้นขั้วอาจมีลักษณะเหมือนรุ่นพื้นฐานที่เชื่อมโยงกับ GitHub ด้านบน แต่ด้วยการสร้างอัตโนมัติจะมีความคิดเห็นเกี่ยวกับ API และ JSDoc เกือบสมบูรณ์เพื่อให้สามารถดูเอกสารดังกล่าวได้ที่นี่โดยตรงใน IDE

JSON => การทำแผนที่ต้นขั้ววัตถุ JavaScript ค่อนข้างตรงไปตรงมาในกรณีนี้และการเขียนตัวแปลงประเภทนี้ไม่ควรใช้เวลาเกินหนึ่งวัน (หรือหลายชั่วโมงสำหรับ coder ที่เชี่ยวชาญ)

หากมีใครดำเนินการต่อโปรดโพสต์ลิงก์ไปยังผลลัพธ์ที่นี่

— CrazyCoder
แหล่งที่มา

ขอบคุณฉันชอบไอเดียนี้ที่สุด ฉันลงเอยด้วยการโคลน Chromium Git Repo และเพิ่มโฟลเดอร์/chrome/renderer/resources/extensionsซึ่งให้สิ่งที่ฉันต้องการสำหรับการตรวจสอบมากที่สุด

— matpie

sirlancelot - ใช้ไม่ได้สำหรับฉัน ... คุณสามารถโพสต์ที่นี่สไนเปอร์ซึ่งมีการเติมข้อมูลอัตโนมัติหลังจากเพิ่ม dir นี้เป็นไลบรารีใน WebStorm (หรือ IntelliJ) ได้หรือไม่

— Michal Bernhard

2

ฉันดาวน์โหลดChrome Extensionแต่เพื่อกำจัดUnresolved variableคำเตือนใน WebStorm ฉันต้องเพิ่มบรรทัดต่อไปนี้ในchrome_extension.js: var chrome = {}และรวมไว้เป็นไลบรารีในโครงการของฉัน

— MK Safi

นอกจากนี้ยังมีที่ผ่านมาอย่างเป็นธรรม (ธันวาคม 2013) ไฟล์ vsdoc ที่code.google.com/p/chrome-api-vsdoc มีคำอธิบายอ็อบเจ็กต์เมธอดและพารามิเตอร์ (ซึ่งเวอร์ชัน TypeScript นี้ไม่มี) คำอธิบายมีความสับสนเล็กน้อยเมื่อดูด้วย Ctrl-Q เนื่องจาก vsdoc ใช้ XML สำหรับคำอธิบายประกอบเอกสาร แต่ยังอ่านได้และใช้งานได้ เพียงเพิ่ม vsdoc ที่ดาวน์โหลดมาเป็นไลบรารี JS ที่กำหนดเองใน Webstorm

— Boris B.

2

วันหนึ่ง WebStorm ควรยอมรับคำจำกัดความ json โดยตรงเพื่อเปิดใช้งานการเติมข้อความอัตโนมัติสำหรับฟังก์ชันที่กำหนดไว้ ในขณะเดียวกันคุณสามารถใช้โปรแกรมที่https://github.com/QuickrWorld/jsgenเพื่อแปลงไฟล์ json เป็น js เพื่อเปิดใช้งานการเติมข้อความอัตโนมัติสำหรับ API ส่วนขยายของ Chrome

— อมิตาภ
แหล่งที่มา

1

สำหรับการเขียน AppScript ฟังก์ชันและคลาสเช่นDriveApp , SpreadsheetAppจะมีปลั๊กอินใน WebStorm หรือ Intellij เรียกว่า google-app-script
วิธีการติดตั้งเหมือนกับข้างบน ในทางกลับกันคุณควรทำเครื่องหมายหรือเปิดไฟล์. gs เป็น JavaScript (กรกฎาคม 2560)

— หมิงจง
แหล่งที่มา