How do I correctly setup flow js in a gatsby project? - babeljs

I searched for a way to use flow js in Gatsby but all that I found was this discussion. Does anyone know a propper way to do setup flow?

I ended up using one of my past configurations, namely:
.babelrc
{
"presets": ["stage-2", "es2015", "stage-0", "react"],
"plugins": [
"typecheck",
"syntax-flow",
"transform-flow-strip-types",
"add-module-exports"
]
}

Related

vscode extension: how to prevent development-related fields automatically added to package.json

A few times in vscode extension development vscode has automatically added information to the extension's package.json that obviously seems related to development and debugging that extension.
Note: that the Marketplace Released version of the extension is also installed in the same workspaces used for debugging in the extensionHost. Could that be the issue?
The following fields were automatically added to the extension's package.json:
"identifier": {
"value": "ArturoDent.find-and-transform",
"_lower": "arturodent.find-and-transform"
},
"isBuiltin": false,
"isUserBuiltin": false,
"isUnderDevelopment": true,
"extensionLocation": {
"$mid": 1,
"fsPath": "c:\\Users\\Mark\\find-and-transform",
"_sep": 1,
"external": "file:///c%3A/Users/Mark/find-and-transform",
"path": "/c:/Users/Mark/find-and-transform",
"scheme": "file"
},
"targetPlatform": "undefined",
I missed looking for these changes and published the extension to the Marketplace and it understandably causes problems for users. The extension never loads for example, probably looking in that location from my development machine.
I do a lot of extension development and have only seen this info automatically added a few times.
Is there a way to prevent that info from being added? Or change my workflow so it doesn't happen again?
A closely related issue was reported at vscode extension test run modifies package.json after 1.67.0, where extra metdata was being written to package.json without warning and causing all kinds of problems.
The current SO question above here had nothing to do with running tests (as in the github issue) but only with debugging and was quite sporadic and difficult to make recur - but the same metadata was being written to package.json.
I have filed a new issue on this: Extraneous data written to package.json while debugging an extension that writes to package.json

Rule for obsolete CSS properties?

I'm looking for a Stylelint (and/or ESLint) plugin/rule that has a rule for avoiding the usage of obsolete CSS properties like grid-row-gap.
I'd like to believe someone already made this, but I couldn't find anything like it via Google, GitHub, or npm.
A plugin that also does the same for [warning] when using experimental properties/selectors would also be welcomed (e.g. :focus-visible).
Recently I started to develop a collection of rules in this plugin.
npm install #isnotdefined/stylelint-plugin
Refer the plugins and rules inside your .stylelintrc file:
{
"plugins":
[
"#isnotdefined/stylelint-plugin"
],
"rules":
{
"#isnotdefined/no-obsolete": true
}
}
At this point I need assistence to find more obsolete properties and values. Just in case someone knows a public list - let me know.

Azure DevOps Extensions - How configure to my extension displays Control Options > Run This Task

I am starting with extensions for Azure DevOps, and I have a little problem with default configuration.
I need that my project has "Run this task" option, in Control Options, like all others extensions. I was looking Microsoft official and in other extensions repositories, but I can't found how I can do this.
This configuration is very important to me, to do a rollback when previous task has failed.
Can somebody help me?
Expected behaviour
Actual behaviour
My Project
Repository: https://github.com/ThiagoBarradas/rancher-vss-ext
Extension: https://marketplace.visualstudio.com/items?itemName=ThiagoBarradas.rancher
SOLVED
To solve this troubles, after many time trying, I just needed to remove runOs from my task.json.
Try to add this to task.json:
"groups": [
{
"name": "advanced",
"displayName": "Advanced",
"isExpanded": false
}
],

How can I make my VS Code extension provide suggestions and syntax-highlighting for non-JS code in ES6 tagged template literal strings?

I’m working on a GraphQL extension for Visual Studio Code that implements syntax highlighting and auto-completion for GraphQL schemas and queries. It currently works on files ending with the .gql extension. However, a common GraphQL usage is to define inline queries inside JavaScript/TypeScript files, for instance:
#connect(gql`user(id: 2) { name, email }`)
function MyUIComponent({ user }) { ... }
How could I support the highlighting and suggestion (autocompletion) features that my extension implements in ES6 (named) tagged template literal strings?
As linked in the comments under the question post, this is related to this github issue: Extension providing language support in ES6 template strings #5961, which was resolved by this comment by one of the maintainers, Matt Bierner:
VS Code Extensions can now bundle ts server plugins. This allows extension authors to write a vscode extension that adds syntax highlighting + intellisense for template strings.
Two extensions are already making use of this: [...]
I did a quick google of graphql ts server plugin and found this: https://www.npmjs.com/package/ts-graphql-plugin.
Quoting from its readme's "getting started" section:
First, confirm that your project has TypeScript and graphql(v15.x.0 or later).
To install this plugin, execute the following:
npm install ts-graphql-plugin -D
And configure plugins section in your tsconfig.json, for example:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"plugins": [
{
"name": "ts-graphql-plugin",
"schema": "path-or-url-to-your-schema.graphql",
"tag": "gql"
}
]
}
}
It's ready to go. Launch your TypeScript IDE.
So to answer your question of "How could I support the highlighting and autocompletion features that my extension implements in ES6 (named) template string?", either you don't need to (just tell your users to include that TypeScript Server plugin), or you can find some way to integrate that into your plugin.
You could also try to take inspiration from the approach used by the Template Literal Editor extension.
Quoting from its readme:
Open ES6 template literals and other configurable multi-line strings or heredocs in any language in a synced editor, with language support (HTML, CSS, SQL, shell, markdown etc).
Instructions: [...]
Other related tools:
This won't add suggestions, but for syntax highlighting in tagged template literal strings, there is the comment-tagged-templates extension by Matt Bierner.

How can I configure autocomplete for project in Brackets?

I'm using Brackets for development applications on the Node.JS. As I know Brackets relies on the TernJS library. When I add the root of the project file named .tern-project with the following lines, I do not see any change in the autocomplete.
{
"libs": [],
"plugins": {
"node": {}
}
}
After that I still see hints for browser, JQuery hints, AngularJS hints, etc. How can I configure TernJS for project(directory) in Brackets?
I've found the ternific plugin to work pretty well for per project tern configuration.