I am trying to apply babel plugin on code source something like this
code = require('babel-core').transform(code, {
plugins: ['some plugin']
})
above code is var that contains actual code as a string, what is the right way to do above?
This example shows how you can transform your code according to different babel plugins.
Using babel-core transform method (you already doing).
Output will be transpiled code according to babel-plugin.
You can refer to this link for more babel methods.
Hope it helps you :)
Related
Is there a way to configure some code based on a file extension when created in VS Code? I'm currently working with psioniq file header which has been pretty helpful in generating good header files, but I'm looking to take this a step farther.
When I create a new file, based on a specific file extension, I would like it to generate some starting code that I can configure. For example, I work with Verilog a lot. It would be really cool if Code could generate based on the file name.
Create new file
Code generates some code (like below) or something else that could be configured based on the filetype:
module <filename> (
input ,
output ,
);
endmodule
Anyone have any extensions they know about or resources they can point me to to implement this?
This would be a pretty easy extension to write but an alternative is snippets.
You can create keywords, based on the extensions, that when you type it it'll create all that code for you.
https://code.visualstudio.com/docs/editor/userdefinedsnippets
Ok, I am trying to learn to use a modular approach to my css for scalable and modular development. My file structure is similar to this.
File Structure
Now, I have a red border on every element that I toggle on and off it helps me visualize as I position elements. Its the first line of code in my _grid.sass file. I have a single file named main.sass with only
#import '_base.sass'
#import '_grid.sass'
#import '_colors.sass'
inside of it. Then, I use atom editor's auto compile to convert main.sass into main.min.css which is linked to the html file. So if I turn off the border property in _grid.sass. I have to save that file, then save main.sass, then save _grid.sass again. I have to be doing something wrong, because if I want to develop an entire site like this, I will have to save 3 times for each individual change, and that will add up to about 5 million redundant saves a minute. Can someone give me some information on this?
I'm assuming you are using the sass-autocompile package. While this is great for single file projects, it doesn't work so well for larger projects.
Instead I would advise using a build system like gulp or grunt. I am more familiar with gulp, so here is a modified version of my build system to work with your project structure.
In order to use this you will need to install gulp and the other packages imported.
var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');
gulp.task('default', function() {
return gulp.src('stylesheets/main.scss')
.pipe(
sass({
outputStyle: 'compressed',
includePaths: ['stylesheets/modules', 'stylesheets/partials', 'stylesheets/vendor']
}).on('error', sass.logError)
)
.pipe(rename('compiled.css'))
.pipe(gulp.dest('stylesheets'));
});
Also, you don't need to (and shouldn't) include the underscore and extension in your partial names, so use #import 'base'; instead of #import '_base.scss';
Short version:
If I wanted to develop a completely new jsDoc template from scratch, what would I have to read to understand what jsDoc does, what interface my template must provide and what data I get to work with?
Long version:
I've been using jsDoc for a while now and have come across some tags that I would like to add and overview pages that I would like to have generated out of my documentation. Up to now I solved all my "user problems" with usejsdoc.org. I even managed to add a new jsdoc plugin that adds some tags. However, I can't find any developer documentation on how to create templates for jsdoc. I use ink-docstrap so I clicked my way through the template-folder (publish.js, /tmpl, etc.) and somehow got the idea of how everything works. But its very very time consuming.
What should I read to become a jsDoc template pro?
These instructions are the closest I could find:
To create or use your own template:
Create a folder with the same name as your template (for example, mycooltemplate).
Within the template folder, create a file named publish.js. This file must be a CommonJS module that exports a method named publish.
For example:
/** #module publish */
/**
* Generate documentation output.
*
* #param {TAFFY} data - A TaffyDB collection representing
* all the symbols documented in your code.
* #param {object} opts - An object with options information.
*/
exports.publish = function(data, opts) {
// do stuff here to generate your output files
};
To invoke JSDoc 3 with your own template, use the -t command line option, and specify the path to your template folder:
./jsdoc mycode.js -t /path/to/mycooltemplate
Failing that, you can read the source code!
I am running into a similar difficulty with lack of documentation. There is a GitHub issue that has been open for 7 years on this: Provide docs that explain how templates work.
The only example I've found so far of a custom template that doesn't look like just a modified version of the default is Ramda's documentation. It looks like they use a completely custom publish.js script that uses handlebars.js instead of underscore.js templates, constructs a non-hierarchical nav, pulls info from #sig and #category tags, and uses links to github for 'view source' instead of rendering its own html pages for source code.
Some of their code will be difficult to understand unless you are familiar with Ramda and functional programming (they use Ramda itself in their version of publish.js) but dumping out the values of data and docs during execution should help provide insight into what is going on.
It is helpful as well that their template is a single file so you don't have to jump between a lot of partial template files to follow how the doc is constructed.
I've just published my own new jsdoc theme. What I did is I simply copied the default template: https://github.com/jsdoc3/jsdoc/tree/master/templates/default, and worked on that.
I also managed to add grunt with the following features:
* transcompile + minify js files
* parse sass styles and minify them
* refresh the docs when you change something
You can see how it works here: https://github.com/SoftwareBrothers/better-docs
you can customize one of existing templates (default, haruki or silent):
go into node_modules/jsdoc/template and grab on of them into your app directory outside node_modules.
feel free to rename the dir ex: jsdoc-template.
open jsdoc-template update/customize the content as you want. ex: open publish.js find Home and replace My Js App.
update jsdoc.json by adding:
"opts": {
"template": "jsdoc-template"
}
another option to use one of those templates too: jsdoc3 template list examples
Followup to my previous comment about Ramda's JSDoc template. I've since created a customized version of it and published it on GitHub at https://github.com/eluv-io/elv-ramdoc
This is tailored for my company's projects, but it may be helpful as another learning tool. It adds a 'Show private' checkbox, updates Bootstrap to v5.13, replaces Handlebars with Pug, adds JSDoc comments to the publish.js script itself, and supports setting an environment variable to dump data to console during doc generation.
Is there any shortcut that will allow me to auto generate my typescript imports? Like hitting ctrl+space next to the type name and having the import declaration placed at the top of the file. If not, what about intellisense for filling out the module reference path so that I wont have to do it manually? I would really love to use vscode but having to do manual imports for typescript is killing me.
There are rumors of making it support tsconfig.json (well, better than rumors). This will allow us to be able to use all files for our references.
Your feature would be to create an auto import of all commonly used 3rd party libs into the typings. Perhaps auto scan the files and create a list of ones to go gather. Wouldn't it be fine to just have a quick way to add several of these using tsd directly from Code (interactively)?
I believe the plugin called "TypeScript Importer" does exactly what You mean: https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter .
Automatically searches for TypeScript definitions in workspace files and provides all known symbols as completion item to allow code completion.
With it You can truly use Ctrl+Space to choose what exactly You would like to be imported.
You can find and install it from Ctrl+Shift+X menu or just by pasting ext install tsimporter in Quick Open menu opened with Ctrl+P.
I know a solution for Visual Studio (not Visual Studio Code, I'm using the 2015 Community edition, which is free), but it needs some setup and coding -- however, I find the results to be adequate.
Basically, in Visual Studio, when using the Web-Essentials extension, .ts files can be dragged into the active document to automatically generate a relative reference path comment:
/// <reference path="lib/foo.ts" />
With which of course we might as well wipe it, because it's an import statement we need, not a reference comment.
For this reason, I recently wrote the following command snippet for Visual Commander, but it should be easily adaptable to other use casese as well. With Visual Commander, your drag the needed imports into the open document, then run the following macro:
using EnvDTE;
using EnvDTE80;
using System.Text.RegularExpressions;
public class C : VisualCommanderExt.ICommand
{
// Called by Visual Commander extension.
public void Run(EnvDTE80.DTE2 DTE, Microsoft.VisualStudio.Shell.Package package)
{
TextDocument doc = (TextDocument)(DTE.ActiveDocument.Object("TextDocument"));
var p = doc.StartPoint.CreateEditPoint();
string s = p.GetText(doc.EndPoint);
p.ReplaceText(doc.EndPoint, this.ReplaceReferences(s), (int)vsEPReplaceTextOptions.vsEPReplaceTextKeepMarkers);
}
// Converts "reference" syntax to "ES6 import" syntax.
private string ReplaceReferences(string text)
{
string pattern = "\\/\\/\\/ *<reference *path *= *\"([^\"]*)(?:\\.ts)\" *\\/>";
var regex = new Regex(pattern);
var matches = Regex.Matches(text, pattern);
return Regex.Replace(text, pattern, "import {} from \"./$1\";");
}
}
When running this snippet, all reference comments in the active document will be replaced with import statements. The above example is converted to:
import {} from "./lib/foo";
This has just been released in version 1.18.
From the release notes:
Auto Import for JavaScript and TypeScript
Speed up your coding with auto imports for JavaScript and TypeScript. The suggestion list now includes all exported symbols in the current project. Just start typing:
If you choose one of the suggestion from another file or module, VS Code will automatically add an import for it. In this example, VS Code adds an import for Hercules to the top of the file:
Auto imports requires TypeScript 2.6+. You can disable auto imports by setting "typescript.autoImportSuggestions.enabled": false.
The files attributes in the tsconfig.json file allows you to set your reference imports in your whole project. It is supported with Visual Studio Code, but please note that if you're using a specific build chain (such as tsify/browserify) it might not work when compiling your project.
I have a photoshop plugin for a file format Ive written in c++ that loads and opens the images, however I do not have code to save the image in the same format
Using SimpleFormat sample plugin as a base I have the following code:
FormatFlags { fmtSavesImageResources,
fmtCanRead,
fmtCanWrite,
fmtCanWriteIfRead,
fmtCanWriteTransparency,
fmtCanCreateThumbnail },
However removing fmtCanWrite or IfRead etc produces parser errors in the Pipl tool, I've checked the syntax and it should be correct but I cannot figure out how to do this =s
This is really counter-intuitive but if you check out pg 77 of Plug-in Resource Guide.pdf from the SDK the flags aren't really flags, they are actually keywords. Based on the grammar they give, to not include the write flag you actually need to replace it with a do-not-write flag.
For example, this compiles fine for me:
FormatFlags { fmtDoesNotSavesImageResources,
fmtCanRead,
fmtCannotWrite,
fmtCanWriteIfRead,
fmtCanWriteTransparency,
fmtCanCreateThumbnail }