Skip to content

Latest commit

 

History

History
79 lines (62 loc) · 3.72 KB

TIPS_and_FAQ.md

File metadata and controls

79 lines (62 loc) · 3.72 KB

Wild Web Developer FAQ

As a user, how can I...

Use Embedded Node.js?

When a developer's system suits the supported OSs (Linux, MacOS and Win32) and architectures (x86_64) the embedded Node.js from Wild Web Developer will be used by WildWebDeveloper to run language Servers as well as for Node Debugger unless the "org.eclipse.wildwebdeveloper.nodeJSLocation" system property is set.

Automatically compile TypeScript to JavaScript ?

(From eclipse-wildwebdeveloper#331 (comment) )

  1. Right-click on project > Properties > Builders
  2. Click "New", select "Program"
  3. location => path to tsc (can be ${system_path:tsc}; working directory => project directory (can be ${project_loc}); arguments...
  4. In Build Options a. select "Launch in background" b. select "During auto-build" c. select the interesting typescript source folder in "Select working set of relevant resources" to include the source folder.
  5. in Refresh, select what needs to be refreshed upon build.

Debug a TypeScript program?

  1. Ensure the sourceMap property of your tsconfig.json is set to true. Example tsconfig.json:
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  }
}
  1. Run tsc to transpile your TypeScript source code to JavaScript.
  2. Right click on TypeScript you want to debug (eg. index.ts) => Debug as => Node program
  3. If a breakpoint is set in your .ts source file, it will be hit when the equivalent JavaScript code is run.

Debug a website developed in TypeScript?

  1. Ensure the sourceMap property of your tsconfig.json is set to true. Example tsconfig.json:
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "out",
    "sourceMap": true
  }
}
  1. Run tsc to transpile your TypeScript source code to JavaScript.
  2. Right click on the entry point of your website (eg. index.html) => Debug as => Chrome Debug
  3. If a breakpoint is set in your .ts source file, it will be hit when the equivalent JavaScript code is run.

Debug a client-side code of a web app?

  1. Start your web app's Node.JS web server (usually done through a NPM script in your package.json, eg. npm start ). This can be done through the commandline or by right-clicking on a package.json in the Project Explorer => Run as => NPM...
  2. Once your web app is running, take note of the local URL it's running on. For React project's, it's by default http://localhost:3000/
  3. Right click on your project's root directory in the Project Explorer => Debug as => Debug configurations...
  4. Create a launch or attach debug configuration for Chrome or Firefox, depending on your preference.
  5. For launch debug configurations, select the URL radio button and enter the URL from step 2. For attach debug configurations, simply enter the URL from step 2.
  6. Ensure the working directory is correctly set to your project's root folder.
  7. Click apply followed by debug in the bottom right corner of the debug configuration

Get instant HTML preview on save ?

  1. Open the HTML file with the Generic Editor for edition.
  2. From the Edition context menu, the Project Explorer or other explorer, open this same HTML file with the Internal Web Browser.
  3. Drag the editor/browser to get them side by side or stacked one on top of the other in the IDE.
  4. In the Web Browser, click the arrow besides the refresh button, and select "Auto-refersh local changes"

As an Eclipse plugin developer, how can I...

Reuse Embedded Node.js?

Developers may reuse the Node.js Embedder in their products.