Chrome 확장 프로그램 개발을 위해 WebStorm을 어떻게 사용합니까?


104

방금 WebStorm 5를 구입했고 지금까지 검사 기능을 정말 좋아했습니다. 내 Chrome 확장 프로그램을 개발할 때 한 가지 문제는 chrome변수를 인식하지 못한다는 것 입니다.

해결되지 않은 변수 또는 유형 크롬

chrome입력 할 때 자동 완성되도록 Inspector에 변수를 추가 할 수있는 방법이 있습니까? Chromium을 외부 라이브러리로 추가해야 할 것 같지만 어디서 시작해야할지 모르겠습니다.

답변:


215

처음 설정

  1. Settings대화 상자 열기 ( File> Settings)

  2. 클릭 Languages & Frameworks> Javascript>Libraries

  3. 딸깍 하는 소리 Download

  4. TypeScript community stubs선택 되었는지 확인

  5. chrome목록에서 선택하십시오 (를 입력하여 빠르게 찾을 수 있음 chrome).

  6. 딸깍 하는 소리 Download and Install

  7. OK설정 대화 상자를 닫으 려면 클릭하십시오 .


아래에 설명 된 2-6 단계 :

Webstorm 스크린 샷


후속 프로젝트에서

후속 프로젝트에서는 다음을 수행합니다.

  1. Settings대화 상자를 다시 엽니 다 ( File> Settings).

  2. 클릭 Languages & Frameworks> Javascript> Libraries다시

  3. 검사 chrome-DefinitelyTyped

  4. OK대화 상자를 닫으 려면 클릭하십시오 .


아래에 표시된 2-4 단계 :

Webstorm 스크린 샷


3
인 IntelliJ에서 단지뿐만 아니라 작품
오스카 FERM

2
IntelliJ IDEA 2017.1이 "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 :

이제 기본적으로 지원 됩니다 . 아래전체 답변을 참조하십시오 .

라이브러리 다운로드

업데이트 :

코드 완성을 위해 라이브러리로 추가 할 수있는보다 완전한 스텁 파일이 있습니다. Closure Compiler 프로젝트의 일부입니다. chrome_extensions.js를 다운로드 합니다 .

WebStorm대한 기능 요청을 참조 하여 IDE에서이 라이브러리를 자동으로 추가하십시오.


Chrome API 용 자바 스크립트 라이브러리를 어딘가에 가져 오거나 스텁을 사용하여 기본 완성을 가져와야 합니다.

WebStorm에서 라이브러리 또는 스텁 을 구성 할 수 있습니다 .


Extension API가 있는 JSON 파일을 찾았습니다 . 이러한 JSON 파일에서 JS 스텁을 빌드하는 스크립트를 작성할 수 있습니다. 스텁은 위의 GitHub에 링크 된 기본 버전처럼 보일 수 있지만 자동 생성을 사용하면 거의 완전한 API 및 JSDoc 주석이 포함되어 여기와 같은 문서를 볼 수 있습니다. IDE에서 직접.

JSON => JavaScript 객체 스텁 매핑은이 경우 매우 간단하며 이러한 종류의 변환기를 작성하는 데 하루 이상 (또는 숙련 된 코더의 경우 몇 시간) 걸리지 않아야합니다.

누군가가이를 구현하는 경우 여기에 결과 링크를 게시하십시오.


감사합니다.이 아이디어가 가장 좋습니다. 실제로 Chromium Git Repo를 복제하고 /chrome/renderer/resources/extensions검사를 위해 원하는 대부분의 폴더 를 추가했습니다 .
matpie

sirlancelot-작동하지 않습니다 ...이 디렉토리를 WebStorm (또는 IntelliJ)에 라이브러리로 추가 한 후 자동 완성 기능이있는 스니퍼를 여기에 게시 할 수 있습니까?
Michal Bernhard

2
나는 다운로드 크롬 확장 만 제거하는 Unresolved variable난에 다음 줄을 추가했다, WebStorm에서 경고 chrome_extension.js: var chrome = {}내 프로젝트에 라이브러리로 포함되어 있습니다.
MK Safi

code.google.com/p/chrome-api-vsdoc에 상당히 최근 (2013 년 12 월) vsdoc 파일도 있습니다. 객체, 메소드 및 매개 변수 설명이 있습니다 (이 TypeScript 버전에는 없음). 문서 주석에 XML을 사용하는 vsdoc로 인해 Ctrl-Q로 볼 때 설명이 약간 왜곡되지만 여전히 읽고 사용할 수 있습니다. Webstorm에서 다운로드 한 vsdoc을 사용자 지정 JS 라이브러리로 추가하기 만하면됩니다.
Boris B.

2

WebStorm은 정의 된 함수에 대한 자동 완성을 활성화하기 위해 언젠가 직접 json 정의를 수락해야합니다. 한편 https://github.com/QuickrWorld/jsgen 의 프로그램을 사용하여 json 파일을 js로 변환하여 크롬 확장 API에 대한 자동 완성을 활성화 할 수 있습니다.


1

AppScript, DriveApp , SpreadsheetApp 과 같은 함수 및 클래스를 작성하기 위해 WebStorm 또는 Intellij에 google-app-script라는 플러그인이 있습니다.
설치 방법은 위와 동일합니다. 반면에 .gs 파일을 JavaScript로 표시하거나 열어야합니다. (2017 년 7 월)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.