Develop Reference

Is there any way to get "good" Autocompletion in VS Code?

I recently tried PhpStorm and it's great especially with the completion.
When I Ctrl + Space (mac) I get suggestions that actually exist, like when I'm in a JS file and my project has jQuery I get Element Suggestions when typing $("#.
But in VS Code it feels like all suggestions come from AI and aren't even based on what is present in my project.
EDIT: Because I have difficulties describing what I mean I uploaded this video to help you understand my problem
Is there any way to get similar behavior in VS Code?

Yes, there is a way to improve IDE suggestions, and that is by installing extensions for the particular programming language that you use.
So, based on the tags you added for your question, for PHP, you can install "PHP Intelephense", for jQuery you can install "jQuery Code Snippets" and for HTML install "HTML CSS Support".
You can very easily install all 3 extensions by clicking on the "Extensions" option on the left hand side of the IDE (little cubes).

Sublime Text says "No Build System" on Ubuntu/Linux

Recently i switched to Ubuntu/Linux and searched for some good text editor and i found Sublime Text, i'm very beginner at coding and i was using Notepad++ in windows.
After i downloaded sublime text, i tried to write some codes in javascript to see if it works but it said "No Build System" and when i looked for it, i didn't find any guide for linux... in Notepad++ all i have to do was click run and ta da, the output screen was there.
I don't know much about linux or sublime text, my exact question is how can i run and see my codes in the output screen, currently i'm working on Javascript and i have no idea what a "Build System" is, i just want to type some basic code in sublime text and see the result on the screen, so if you help me i'll be much appreciated.
Here's an image the problem:

In order to explain your problem it's first important to realize that although the feature is called build, it applies just as much to running an interpreted program as it does to actually building anything; think of it less as a "build" tool and more as a "run some external program to do something" tool instead.
With that said, Sublime comes pre-installed with a few different build systems for various languages, but JavaScript isn't one of them. Possibly this is because it's generally unclear whether a particular JavaScript file is meant to be used in a browser, or executed via something like node, but that's just a guess.
In your case, the text No build system is literally telling you that you have told Sublime to automatically select an appropriate build system for the type of file that you're editing, but that it didn't find one and so there's nothing that it can do.
The solution to the problem would be to either install a third party package that includes a JavaScript build system (see Package Control) or create one yourself.
A good rule of thumb for Sublime is that if there is a command you can execute from a command prompt that will do what you want, and you don't need to interact with that command (i.e. it doesn't need to ask you questions before or while it does something), you can set up Sublime to run that command for you.
One tool you can use to execute JavaScript is NodeJS, which provides a command named node that can execute JavaScript files if you install it:
tmartin:dart:~> cat sample.js
console.log("Hello, world!")
tmartin:dart:~> node sample.js
Hello, world!
Since this is a command that we can execute from a terminal to do what we want, and it doesn't require us to interact with it to tell it how to do anything, we can set up a build system to use it.
As an example of how to do that, select Tools > Build System > New Build System... from the menu, and then replace the contents of the file with the following code, then save it in the location that Sublime will default to as something like JavaScript.sublime-build:
{
"shell_cmd": "node \"${file}\"",
"selector": "source.js"
}
This simply says that when executing this build, Sublime should use the command node and provide it the name of the file that you're currently editing, and that this build system applies to source files of type js (JavaScript).
With that in place, if you select Tools > Build System > Automatic or Tools > Build System > JavaScript (the name in the menu reflects the name you used for the file), you should be able to use Ctrl+B to execute your program:
Note: This is an older image and uses cmd instead of shell_cmd; both examples will work the same way but shell_cmd is the recommended way to go unless you have a compelling reason not to.
You can check out the official documentation on build systems for more information on the options available to you in a build system.
Important notes:
If you get an error like command not found or something similar, it means that you either entered the command incorrectly, that program is not installed, or you need to tell your computer (and thus Sublime) where to find it by modifying your PATH; how you do that is system specific.
Make sure you save a new file manually at least once before you try to run it; before you do the file isn't on disk yet and can't be executed, which can cause strange errors to occur. It can be a good idea to make sure that Tools > Save all on build is checked to ensure your files on disk are always up to date when you build, but this won't save a new file that doesn't have a name yet.
I said this twice, but it bears repeating; if you need to interact with a command in any way, this won't work for you (without changes on your end). This includes if you try to execute a script that wants you to interact with it (e.g. it asks you your name and then prints it and such like). In such a case your program will seem to hang forever because it's waiting for input that you can't provide.

Convert HTML + CSS to PDF with nodeJS or Javascript?

I have a problem. I've tried some libraries that convert html to PDF but they don't import CSS, so my PDF is invalid.
I's tried with "html2pdf" , "pdfmake", "jspdf"..
PDFMake does not help me because it need to generate a JSON with HTML data...
The structure of file that I would like to convert to PDF is:
html: www/templates/phase_one_report.html
css: www/css/phase_one_report.css
Some ideas? I am using nodeJS with sailsJS in backend and javascript with ionic in frontend.
Sorry about my english.

This is a difficult problem. I have also found that existing HTML to PDF libraries usually don't handle the HTML & CSS that I throw at them.
The best solution I have found is not Javascript at all: wkhtmltopdf. This is essentially a program that wraps up the webkit rendering engine so that you can give it any HTML + CSS that webkit can render and it will return a PDF document. It does an outstanding job, since it's actually rendering the document just like a browser would.
You mention that you're using node.js, but it's not clear exactly what your environment is, so I'm going assume that your report is available at a URL like http://my.domain/phase_one_report.html. The simplest way to get this working would be to install the wkhtmltopdf application on your server, then use child_process.exec to execute it.
For example:
import { exec } from 'child_process';
// generate the report
// execute the wkhtmltopdf command
exec(
'wkhtmltopdf http://my.domain/phase_one_report.html output_file.pdf',
(error) => {
// send the PDF file to the client
}
);
There are a lot of different command-line options for wkhtmltopdf - you'll need to look into all the different ways to configure it.
If your report is not accessible at a URL, then this becomes a little more complicated - you'll need to inline the CSS and send everything to wkhtmltopdf at once.

There are a number of options available right now:
Edit 09/2018: Use puppeteer, the JS Headless Chrome driver. Firefox now also has headless mode but I'm not sure which library corresponds to puppeteer.
wkhtmltopdf as mentioned before does the job but is slightly outdated.
You will have to watch the latest chrome releases which will have a --headless option to enable html+css+js to pdf conversion.
Then there is PhantomJS and Slimer.js. Both are possible to use with node and Javascript. Nightmare.js is also an option but sits on top of it.
However, Phantom.js is currently the only solution that is truly headless and javascript based. Slimer.JS works with Firefox but requires you to have a window manager, at least xvfb, a virtual frame buffer.
If you want the latest browser features you will have to go with slimer.js or, another option, go with one of the Electron based solutions that keep popping up. Electron is based on Chrome and is scriptable too. A fine solution that also ships with Docker containers is currently https://github.com/msokk/electron-render-service
This list is possibly incomplete and will change a lot in the near future.

Use JavaScript Node command line tool in Chrome

Hey I have an app written in js being accessed by $ node script.js
I want to visualize the output of it and thought it'd be a good idea to just "wrap" a HTML page around it. For example in the output in the terminal there are 2 values gradually increasing and I'd like to process both of them in a way that they could represent 2 bars that, according to the 2 values, rise accordingly.
However, I've never done anything in JS and I don't really know the best way to do it.
I found http://iceddev.com/blog/node-js-in-chrome/ to host a local server to run my .js on this but not even the console.log or any errors in the code in the index.js (which is basically opening the server and contains the content you want to see when navigating to it in Chrome) show up in the Chrome console so I am wondering if there is something else I can do here.

To run your script in the browser I recommended you to look this package http://browserify.org/ it compile your js script into browser compatible js

Is there any Mac text editor with tail or watch files change feature?

Ideally I wanted to use this in TextMate but I didn't find any feature besides the Show Web Preview which is nice for the fact I can set the interval to update the page, but definitely doesn't work for watching any file and also apply syntax highlighting or any format.
One neat example of what I wanted to achieve is to simulate exactly the same behavior as CoffeScript Try Now feature where you can type in one side and see what the file would look like in javascript.
So ideally I would open my .coffee file and then run coffee --watch on terminal which will track any file change for that specific file, so I could just pop another window inside my text editor which will just keep updating the coffeescript .js generated file.
like this, where the window on the left shows the current file and the window on the right shows the file being watched with specific interval.
I am not sure if I was clear enought, if not, please just let me know..
but basically I just want to see in real time what happens to my files after run a specific script but with syntax highlighting and anything else possible.
I am just testing this kaleidoscope app, it is really nice the way the visualization works, no editing is possible neither syntax highlighting features though but it is really good, so it makes me think that something like this would be really nice:
cheers

Emacs can do both of these things (and you're probably better off running it as a Cocoa app).
ediff works similarly to Kaleidoscope (minus the diagonal lines connecting the two revisions) and does let you edit the files without disturbing the diff process. By default you get the versions above one another but you can press | to toggle to side-by-side and m to expand to the full screen width (unfortunately this doesn't work properly with multiple monitors, at least in the version of Emacs I'm using.)
To tail/auto-revert things, there's auto-revert-mode and auto-revert-tail-mode built into Emacs.
emacswiki.org is pretty good if you're trying to figure out how to do something in Emacs, as is (duh) Stack Overflow. Mastering Emacs is a relatively new blog which has some great articles. There's also M-x all-things-emacs which links to some useful screencasts.

You can open the log file in OSX's Console log viewer utility that is used to monitor system logs. Simple as that. It will not show you diff's but it does emulate the tail -f functionality.