├── examples ├── dotenv │ ├── .gitignore │ ├── .env │ ├── index.js │ └── package.json ├── html │ ├── index.js │ └── package.json ├── html-relative │ ├── index.js │ ├── index.html │ └── package.json └── html-default │ └── index.js ├── .github └── FUNDING.yml ├── preview1.jpg ├── preview2.jpg ├── wiki ├── commands.jpg ├── icon-start.jpg ├── icon-stop.jpg ├── configuration.jpg ├── errorWindow.jpg ├── cmd-context-explorer.jpg ├── cmd-context-started.jpg └── cmd-context-not-started.jpg ├── preview_youtube.jpg ├── vscode-javascript-repl.gif └── README.md /examples/dotenv/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /examples/dotenv/.env: -------------------------------------------------------------------------------- 1 | DB_HOST=localhost 2 | DB_USER=root 3 | DB_PASS=s1mpl3 -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [axilleasiv] 2 | custom: ["https://www.paypal.me/akiritsakas"] 3 | -------------------------------------------------------------------------------- /preview1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/preview1.jpg -------------------------------------------------------------------------------- /preview2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/preview2.jpg -------------------------------------------------------------------------------- /wiki/commands.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/commands.jpg -------------------------------------------------------------------------------- /preview_youtube.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/preview_youtube.jpg -------------------------------------------------------------------------------- /wiki/icon-start.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/icon-start.jpg -------------------------------------------------------------------------------- /wiki/icon-stop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/icon-stop.jpg -------------------------------------------------------------------------------- /wiki/configuration.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/configuration.jpg -------------------------------------------------------------------------------- /wiki/errorWindow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/errorWindow.jpg -------------------------------------------------------------------------------- /vscode-javascript-repl.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/vscode-javascript-repl.gif -------------------------------------------------------------------------------- /wiki/cmd-context-explorer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/cmd-context-explorer.jpg -------------------------------------------------------------------------------- /wiki/cmd-context-started.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/cmd-context-started.jpg -------------------------------------------------------------------------------- /wiki/cmd-context-not-started.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/HEAD/wiki/cmd-context-not-started.jpg -------------------------------------------------------------------------------- /examples/dotenv/index.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config() 2 | 3 | 4 | console.log(process.env.DB_HOST); 5 | console.log(process.env.DB_USER); 6 | console.log(process.env.DB_PASS); -------------------------------------------------------------------------------- /examples/html/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | This is an example how to use javascript-repl 3 | with html content that you have set in package.json settings 4 | */ 5 | 6 | const container = document.getElementById("repl-id"); //= 7 | 8 | console.log(container.innerHTML); 9 | document.body.innerHTML //= -------------------------------------------------------------------------------- /examples/html-relative/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | This is an example how to use javascript-repl 3 | with html path that is relative to the root folder 4 | */ 5 | 6 | const container = document.getElementById("repl-message"); //= 7 | 8 | console.log(container.innerHTML) 9 | document.body.innerHTML //= -------------------------------------------------------------------------------- /examples/html-default/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | This is an example how to use javascript-repl 3 | with html content, by default the repl is returning an html page 4 | that contains only the following content "
" 5 | */ 6 | 7 | const rootElement = document.getElementById('root'); //= 8 | 9 | // will print 'JS-Repl' 10 | console.log(document.title) -------------------------------------------------------------------------------- /examples/html-relative/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |

Happy Coding!!

11 | 12 | -------------------------------------------------------------------------------- /examples/html-relative/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "jsRepl": { 13 | "html": { 14 | "path": "./index.html" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/dotenv/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dotenv-example", 3 | "version": "1.0.0", 4 | "description": "Example with dotenv module", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "dotenv": "^8.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "jsRepl": { 13 | "html": { 14 | "content": "
Happy Coding!!
" 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript REPL 2 | 3 | JavaScript REPL is a javascript playground for Visual Studio Code with live feedback(logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports Javascript, TypeScript, CoffeeScript and it can be used for development in Node.js projects or with front-end frameworks like React, Vue, Angular, Svelte etc. 4 | 5 | ![vscode javascript repl in action](https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/master/vscode-javascript-repl.gif) 6 | 7 | ## New Features 8 | 9 | - Markdown support on code blocks. [Learn more](https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Markdown-code-blocks) 10 | - Playground for MDN Web docs, TypeScript official documentation, CoffeeScript, Node.js, lodash, RxJS and Ramda library. [Learn more](https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Playground-for-MDN-Web) 11 | - Performance measurement. [Learn more](https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Performance-measurement) 12 | 13 | ## Features 14 | 15 | By pressing cmd(or ctrl) + shift + l as shortcut or by using the command "JS Repl: Run" and by using console.log statement,you can display the result of whatever expression you want (Variable, Function, Object etc..). JS Repl can be activated on file types(.js, .ts, .coffee, .jsx, .tsx, .vue) or by launching "JS Repl: New ...". Users can check the [available commands](https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Commands) or the [extension's configuration](https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Configuration) on the wiki pages. 16 | 17 | - JavaScript, TypeScript and CoffeeScript support 18 | - Node.js support 19 | - React.js & Vue.js compatible 20 | - Logs through comments or by using console.log 21 | - Show or copy value of an expression, without add comments or console.logs 22 | - Explorer window with the log values and errors 23 | - Output window with the log values and errors 24 | - Live code coverage 25 | - Show log values on edit or or on save. 26 | - Imported files support 27 | - Easy install for missing modules 28 | - Multi-file support for logs or errors per project 29 | - Async results(logs, errors) rendering 30 | - ui customization in coverage & log colors 31 | 32 | ## Preview video 33 | 34 | [![Watch the video](https://raw.githubusercontent.com/axilleasiv/vscode-javascript-repl-docs/master/preview_youtube.jpg)](https://www.youtube.com/watch?v=Ef75DChLMO8) 35 | 36 | ### Logging 37 | 38 | Users can add logs in their code with the following ways: 39 | 40 | ```js 41 | // You can add logs by using console.log 42 | console.log('We ♡ JavaScript!'); 43 | 44 | // or by using a comment line with equals sign at the end of an expression 45 | const obj = { 46 | language: 'javascript' 47 | }; //= 48 | 49 | function hello() { 50 | return 'Hello World!'; 51 | } 52 | // or a comment block with equals sign 53 | hello(); /*= */ 54 | 55 | // or just type the variable name 56 | obj; 57 | 58 | // if the log represents an object you can use the dollar sign to access its properties 59 | obj; //= $.language 60 | 61 | // also inside the log comments you can print every expression in your scope 62 | hello(); //= obj 63 | 64 | // Besides, you can select one or more variables or expressions and press right-click 65 | //and select show value or explore the logs at the explorer on the left 66 | ``` 67 | 68 | ## Installation 69 | 70 | Users can find the extension in marketplace at the following url: 71 | 72 | 🎉 https://marketplace.visualstudio.com/items?itemName=achil.vscode-javascript-repl 73 | 74 | Javascript REPL **requires node.js(>= 10.11.0)** to be installed, and node executable to be available in `PATH` 75 | 76 | ## Issues 77 | 78 | Javascript REPL extension does not send any analytics data about the users or the kind of use that they are doing. So It will be very helpful, if you report an issue about a problem that you had during your repl sessions, and is really appreciated, if you provide any feedback about the extension user experience ♡. More information [about issues](https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Issues) or the [part of the source code](https://github.com/axilleasiv/vscode-javascript-repl-docs/wiki/Source-Code) that have not been open-sourced yet users can find on wiki pages. 79 | 80 | ## Credits 81 | 82 | The icons that I used are not mine, so I would like to say thank you to the following sources or persons: 83 | 84 | - [Flaticon](https://www.flaticon.com/authors/freepik) 85 | - [Dave Gandy on flaticon](https://www.flaticon.com/authors/dave-gandy) 86 | - [Vaaddin on flaticon](https://www.flaticon.com/authors/vaadin) 87 | - [Font Awesome](https://fontawesome.com/) 88 | 89 | The documentation resources in the playground markdown docs are served through the [devdocs.io](https://devdocs.io/) API. 90 | 91 | This extension uses under the hood a modified version of [Parcel](https://parceljs.org/) bundler. So I would like to say a big thank you to the guys there. You can find the modified version at the following [branch](https://github.com/axilleasiv/parcel/tree/vs-repl). 92 | 93 | ## Inspiration 94 | 95 | I'd like to give a shout out to [Quokka.js](https://quokkajs.com), which is a significantly more comprehensive and covers a lot more editors, if this extension interests you - check out that too. Also, when I started to play around this, I started with the code of the following [extension](https://github.com/lostfields/vscode-nodejs-repl) 96 | --------------------------------------------------------------------------------