I am trying to move away from WebStorm and trying to configure VS Code to get few functionalities of WebStorm. I am trying to implement File Watcher functionality in VS Code.
I used to have File Watchers for Jade and Stylus in WebStorm. I already have gulp tasks for them and have added them in tasks.json as well. I have even provided keybindings for them too. But I have to run them manually. What I want is, whenever a file is saved, it checks whether it is a Jade file or a Stylus file and then run the appropriate task to generate either HTML or CSS file.
Is it possible to do it in VS Code yet? If yes, then how can I do that?
You must create an extension to accomplish your scenario. You said you already have gulp and task.json with your automation, so I think it would be relatively easy to translate that to an extension.
You should take care with this points when creating your extension
package.json
You extension should work for Jade or Stylus, so the package.json file should have:
"activationEvents": [
"onLanguage:Jade",
"onLanguage:Stylus"
]
OnSave Event
There are two events that you could use to detect file saving: onDidSaveTextDocument or onWillSaveTextDocument, depending on your needs.
FileWatcher
VSCode has a built in FileWatcher, you just have to create it via vscode.workspace.createFileSystemWatcher. The point is that it just monitors files within the opened folder/project.
If you need to detect changes outside, you should use fs.watchFile or chokidar.
Publishing/Installing
Don't worry if you think your extension only works for you or you can't publish on marketplace, for any reason, because you can create your own extensions, package them and install locally.
Related
I'm trying to build GAS projects locally using clasp.
Any locally-installed IDE is a huge improvement over Google's Script Editor, so the tool looks very promising. Unfortunately, the autocomplete feature for GAS services doesn't seem to be included in the package.
The documentation says:
The Apps Script CLI uses TypeScript to provide autocompletion and linting when developing. Use an IDE like Visual Studio Code for TypeScript autocompletion.
After going through the steps and installing all required dependencies, I'm still unable to get the autocomplete feature to work. When I execute the clasp pull command for the existing project, it converts the ".gs" extension to ".js". The autocomplete suggestions are simply the result of parsing existing code.
For example, if I call sheet.getRange() somewhere in my code, then the getRange() method will pop up in suggestions, but I can't list available options for, say, PropertiesService, unless it's already used in my code.
Has anybody had any luck with enabling autocomplete feature for Google Apps Script?
I found the solution that partially works, but it may not be applicable to other software. The steps below are for Visual Studio Code:
Install the NPM package containing type definitions for GAS using
https://www.npmjs.com/package/#types/google-apps-script
In your locally-saved script, create a '.js' file and type
import 'google-apps-script';
This answer is a minor variation on the accepted one for IDEs/extensions which support Typescript auto completion based on tsc/tsserver:
Install TypeScript and #types/google-apps-script
https://www.npmjs.com/package/typescript
https://www.npmjs.com/package/#types/google-apps-script
Create a jsconfig.json file in your local project directory:
{
"compilerOptions": {
"checkJs": true
}
}
Alternatively, If you're using typescript along with javascript, then create a tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"types": ["google-apps-script"]
}
}
Include both filenames in .claspignore, if you're using clasp and if the file is in your local directory.
You can also use any of this config globally, if the config is in your home/parent directory, as tsc searches for this config from project/local folder to root(in which case, you don't need to include it in .claspignore).
If you are using any JetBrains IDE:
Go to Languages & Frameworks -> JavaScript -> Libraries -> Download... and download the library google-apps-script.
Try including the file name, import.js in .claspignore (docs).
This should save some trouble deleting the file before each push every time.
This is an answer provided by Google developers in the "TU17: Enhancing the Google Apps Script Developer Experience with clasp and TypeScript" video.
Add a JavaScript file to your project like "appscript.js" and, in that file, add:
import "google-apps-script";
Save that file but make sure to ignore it when pushing files back to your project using a .claspignore file.
Is there a way to format correctly HTML in VSCode when we use Twig or Swig tags, like
{% if ... %} {%else%} {%endif%} {% for %} {%endfor%} {% include %}, etc...
For now code formatters remove all line breaks before and after those tags.
Was not able to find an suitable extension for that.. Neither a way to configure the internal code formatter.
I had the same problem and solved installing this extension:
Twig Language
Install it, restart the editor and ff you are on windows you can format with standard ALT + SHIFT + F.
Hope it helps.
I've been struggling SO MUCH with this, and finally found a fully working solution; so wanted to share it here. Follow the steps below and you should be good to go:
Download the Vs Code Extension Prettier Code Formatter. Pay close attention to grab this Prettier Package, as Visual Studio proposes several different Prettier Extension Packages.
In the Visual Studio Editor, go to Settings --> type "format" until the formatting settings pop up, and then select Prettier Code Formatter - esbenp.prettier-vscode as your default formatter. Do this for both the User as well as the Workspace tab, if not automatically done.
Next, you'll need to add the melody plugin used for the proper formatting of twig files using Prettier in Vs Code. This is actually a nodejs package, so you first need to install Node JS. It can occur that you will run into permission issues when installing node packages later on. To try to avoid this at max, install node using a nvm.
Now you can install the melody plugin. To do so, follow the instructions of the linked repository. Note that you previously need to install yarn if you don't have it already installed, via npm install --global yarn.
To hold project-specific formattings within your github repo / project, you can add a .vscode/settings.json file which holds the general prettier configs you're currently using in your project. That's pretty useful to share the prettier formatting settings across developers / repos.
Also add the .prettierrc file to your projects root, with the following content:
{
"printWidth": 80,
"tabWidth": 4,
"plugins": ["./node_modules/prettier-plugin-twig-melody"]
}
This defines the additional use of the above-mentioned plugin. You may adapt the configs according to your needs. You can either put your node_modules folder holding the package within it into your local project, or adapt the path as needed to wherever your melody plugin is located on your local machine.
FYI: The node_modules folder is normally not uploaded to project repos due to its size. Once you install node, you will automatically get that node_modules folder on your local machine. And when you then install the above-mentioned package, it should get installed into that node_modules folder.
Now add the Twig Syntax highlighting package from whatwedo. Now, VS Code should recognize Twig files when you open them. Verify this by opening a .twig file within VS Code and checking in the bottom right corner that the file is recognized as HTML (Twig). This will additionally highlight your swig tags.
To verify that everything's working properly, you can open the prettier terminal by clicking on Prettier at the bottom right in your VS Code. Now write some twig content into a .twig file and trigger the formatter. If no errors were reported in the console, and the console informs that the melody plugin is used for formatting; and of course the code has been properly formatted; you're good to go.
There is a built-in way nowadays; when you try to format a document you get forwarded to the extension page and a search for a formatter for a given file format. For Twig:
category:formatters twig
Twig Language 2 seems to be the go-to VS Code Twig extension with the best formatter as of now.
Something related to this, i did it by installing twig in vs code.
Open VS Code and
Ctrl+Shift+X
And get the twig extension and install it. Thanks.
I opened my project on another computer, and the files where I'd been using a file watcher were expanded, like before they used to be nested like home.scss is now after I run the watcher once on that file.
Is there a way to automatically make all the files be nested?
Because when adding new files and folder with git, it would be quite troublesome to go into each and every file in order to make them become nested.
Like I have some minified JavaScript files that used to be nested, but now is expanded for some reason.
Hope you understand. Thank you.
Edit: Nested***
Is there a way to automatically make all the files go under a caret like that?
Unfortunately not. Such nesting information (to "go under a caret" as you are saying) is taken from "Output path to refresh" field of the corresponding File Watcher.
You have to run file watcher for such files at least once in order to see files nested like you have it on your another computer.
Here is how you can run File Watchers manually without the need to modify those files (so no extra history will appear in your git (or whatever VCS you may be using there)).
https://stackoverflow.com/a/20012655/783119
P.S.
In PhpStorm 2016.3 (the next version that will be released in 1.5-2 months or so) such nesting will be done automatically (the most common combinations) so there will be no need to have File Watchers for providing such info.
If you wish -- you can try EAP build right now (EAP means Early Access Program .. which is sort of Alpha/Beta builds (simply speaking).. and therefore some bugs for new functionality might be present and performance may not be optimal).
I have the next configuration for a build system in PhpStorm:
And it works ok, but I have a problem... my build script needs to receive the name of the file I'm running it on, so, if I build a PHP file, it will run phpcs on it, but if I'm building a CSS or JS file, it will run gulp... with Sublime Text that is possible, is it possible with PhpStorm?
There are no macros support for Run/Debug Configurations -- they are made so they do not depend on a context (currently opened file in editor). In other words -- they are pretty static and all file names/paths are basically hard coded.
For what you are describing (build script).. you need to use External Tools functionality (which can have all of that and made specifically for such tasks). Once created, you can assign custom shortcut to any External Tools entry (check Settings/Preferences | Keymap for that) so it's more convenient to use it.
If you want such script to be called on every file save automatically -- then use File Watchers -- pretty much external tools that will be called for you automatically (once per each file modified).
Since you are doing this for a build script -- maybe you should try to use dedicated (and therefore more appropriate in general) tools? For example: Gulp / Grunt .. or even Phing.
Create external tool:
https://www.jetbrains.com/phpstorm/help/external-tools.html
You can assign hotkey to execute your build command.
I'm trying to setup limeJS, the issue is the Internet connection is a problem. I had closure library, box2d, closure compiler and closure templates downloaded separately as .rar files, but I can't find a guide anywhere to set it up like this, everyone just uses(and with reason!!!) the python bin/lime.py init command to get it working. I managed to figure out(yay!) how to setup box2d and closure library but what about the other two?
My laptop is running 64 bits Windows 7. Any help appreciated
All I need is an advice on directory structure, like where to drop the compiler.jar and soy templates .js files, so that when I run the update/create command it doesn't try to download the compiler or templates like it does right now.
I got it working, after taking a quick look at the lime.py file it told me everything I needed, for example both the SoyJs templates file and the compiler need to be in the /path/to/lime/bin/external folder and for example, the lime.py file was expecting a compiler file named compiler-dateOfLatestCompiler.jar instead of compiler.jar.
In general, If you have LimeJS built up in one machine using Python and all, you can just copy paste the whole package anywhere you want and use it just as ususal.
You don't need network once you have all the files/codes for Lime is downloaded.
Infact, you dont even need python for normal development tasks(Python is required to build your js file once you complete development though)