How to jsx format supported in spacevim editor? - reactjs

My spacevim config file: init.toml
[[layers]]
name = "lang#javascript"
auto_fix = true
enable_flow_syntax = true

To get Vim to support a certain syntax, it has to be given the relevant .syntax file. This can be done manually, or by installing a plugin that loads it for you.
I've never used SpaceVim (I used SpaceMacs once, a couple eons ago), but looking through its documentation, the [[custom_plugins]] section looks promising. I've mocked up an example to get you started:
[[custom_plugins]]
name = "MaxMEllon/vim-jsx-pretty"
merged = false
However, this method will only yield limited results. This will only get Vim to recognize the syntax and highlight accordingly; if you want full linting capability, it looks like this GitHub user created a script to modify the bootstrap#after section of SpaceVim to use ESLint, which supports JSX. Note that you have to have ESLint installed for that to work.
For anything this "extreme", it looks like modifying the bootstrap.vim file is the only real way to go. In case you ever want to do further customization outside of SpaceVim defaults, I highly recommend getting Vim/neovim and installing the plugins yourself.

Related

Editing a snippet in a package in Atom

In Atom, if a package contains snippets, how do you edit them or delete/deactivate some whilst keeping the rest?
I know I can disable the snippets and copy them into Atom->File->Snippets. However, I think that these snippets would exist for all languages whereas packages like languages-html and languages-latex only activate snippets when their respective language is being used. Is there another way?
Snippets defined in snippets.cson take precedence over all snippets provided by packages, because they are loaded later. You can copy & paste the snippets you want to edit to that file and make your edits. Snippets will be limited to the language grammar you specify in the top-level property.
Example
'.source.js':
'console.log':
'prefix': 'log'
'body': 'Unexpectedly, this does not expand to console.log'
This will override the default snippet, which expands log to console.log

What is the correct usage of the mixin classs for TCL language?

Im attempting to update an old version of the selenium-tcl package to work with the new W3C WebDriver (or Selenium 4.0).
Original packages uses a few mixins for the webdriver class.
So I modeled what I saw and created a mixin file named mixin_action_chains.tcl [1] which has a mixin class called Mixin_Action_Chains.
Whenever I attempt to use it I get the error:
% package require selenium
::selenium::Mixin_Action_Chains does not refer to an object
Im not sure why I've modeled it pretty much exactly as I have seen in the other files such as mixin_for_scrolling.tcl [2]* file. What am I missing.
Here is the entire GitHub Repo
Im not sure what else must be done for TclOO. Any thoughts.
Thanks
Im not sure what else must be done for TclOO. Any thoughts.
Update
pkgIndex.tcl: The placement of the mixin-defining script mixin_action_chains.tcl is wrong, it comes after the mixin has already been required in the previously sourced script webdriver.tcl, like entering directly:
% oo::class create C {
mixin ::not::defined
}
::not::defined does not refer to an object
You need to change the order of source command calls in the package ifneeded script.
For the records
Still, in the original version, there were unbalanced curly braces and brackets in your script, which broke sourcing of the file for me:
https://github.com/SavSanta/w3cselenium-tcl/pull/1

Uglifyjs unexpected token name error

Attached is an image of what I am receiving when I try to bundle my project for production. I am receiving a Unexpected token name <<Object>>, expected punc <<,>> message as shown in the image.
Terminal output of error
Not sure what the issue is but I have tried to use uglify-es and uglify-js and get the same error. I even attempted to make a simple app using es6+ code to see if uglify-js worked and it did. So some of the older threads on the internet mentioning that uglify-js won't handle es6+ code might be irrelevant now. I also read somewhere that the newest version (3.x) does support it but haven't been able to confirm that.
I would love to show some code but not sure what relevant piece of code I need to show. As per the image it also mentions the line, col, pos etc... but the code on that line does not start at the col number mentioned.
I will definitely update this post as I investigate but any tips or ideas would be great!
So the issue is now resolved after some thorough research. It looks like the line 1665 I was looking at in my non-optimised bundle app.js was not what I needed to look at (obvious since the column index was way off).
So instead I decided to output the bundle generated code that FuseBox was working on and it was in-fact different. This is the line I added in node_modules/fuse-box/quantum/plugin/BundleWriter.js inside the uglifyBundle function to output the content so I could read it clearly.
fs.writeFile('bundle.txt', bundle.generatedCode);
The output in bundle.txt that was the issue and my actual TypeScript code is shown here:
// bundle.txt line 1665
this.wholesalerSettings = [object Object]
// actual project code
constructor() {
this.wholesalerSettings = process.env.WHOLESALERSETTINGS;
this.API = this.setHostUrl();
}
So I took a look in my fuse.ts file and noticed I was not parsing the json object correctly.
public get wholesalerSettings()
{
const wholesaler = require(`./src/~/wholesalers/${this.wholesaler}/config.json`);
return JSON.stringify(wholesaler);
}
// then down in the environment plugin
EnvPlugin({
WHOLESALERSETTINGS: this.wholesalerSettings,
IMAGE_PATH: this.imagePath
}),
Once I parsed the object correctly with JSON.stringify it worked perfectly as process.env.WHOLESALERSETTINGS was now a JSON string instead of an Object.
First time I really dealt with devops stuff but was fun and at the same time highly stressful. I guess the main thing I learned is when you are dealing with tooling and third party tools (FuseBox uses uglify-js) then you need to take a closer look at the input that is being given to that tool rather than the output like I was at first.
UglifyJS says it sees Object where it's expecting a ,, so we can infer:
The code you wrote (or generated by some other tool right before uglifyJS processes it, e.g. babel? Though you probably don't use babel since your uglifyJS deals with es6 directly) is "Object" where the error occurs.
It's expecting a ,, so the error is occuring at some place like multiple variable declaration, let foo, bar, or object/array definition, [1, 2] {foo: 1, bar: 2}

PHPMD and PHPCS Camelcase for Tests

I just installed both PHPMD and PHPCS with my Project.
Now, I would like to customize them a bit, but can't seem to achieve it.
I get 2 warnings that I would like to remove for all my project:
phpcs: public method name MyTests::my_test_that_should_pass is not in camel caps format
phpmd: the method my_test_that_should_pass is not in camel case
With PHPMD, I tried to change : .composer/vendor/phpmd/phpmd/src/main/resources/rulesets/controversial.xml and set allow-underscore-test to true like mentioned here
With PHPCS, I don't really know how to do it.
Any idea???
https://phpmd.org/rules/controversial.html
PHPCS uses a file called ruleset.xml to allow you to create your own custom standard. The documentation for it is here: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-Ruleset
If you want a specific standard for your project, you can include a phpcs.xml file at the root of your project. It's exactly the same format as a ruleset.xml file and can even specify which files and folders need checking by default. Documentation for that is here: https://github.com/squizlabs/PHP_CodeSniffer/wiki/Advanced-Usage#using-a-default-configuration-file
I have no idea what coding standard you are using with PHPCS right now, but I'll assume you are using PSR2.
If you run phpcs with the -s option, you'll see an error message with an error code, like this: Method name "MyTests::my_test_that_should_pass" is not in camel caps format (PSR1.Methods.CamelCapsMethodName.NotCamelCaps). The code is the bit you need here.
For your custom standard, you want PSR2, but you don't want the PSR1.Methods.CamelCapsMethodName sniff because you obviously don't want PHPCS checking for camel case. So create a ruleset with this content:
<?xml version="1.0"?>
<ruleset name="MyStandard">
<description>My custom coding standard.</description>
<rule ref="PSR2">
<exclude name="PSR1.Methods.CamelCapsMethodName"/>
</rule>
</ruleset>
Save that file and call it ruleset.xml or phpcs.xml and then run PHPCS using it: phpcs /path/to/code --standard=/path/to/ruleset.xml
Take a look at the annotated ruleset docs I linked at the top of the comment because there is a lot more you can do with those rulesets.

Using ngSanitize to allow some html tags

I have an insecure string from the user that I want to display.
I want a few html-tags like < strong > (without spaces) to work.
All other html should be displayed like it was typed in (that is < should be replace with & lt; and so on)
I'm pretty sure I can use ngSanitize to do this but I can't figure out how.
$compileProvider allows you to set up sanitization "whitelists" for HREF and SRC URLs:
app.config(function($compileProvider) {
var imgSrcSanitizationWhitelist = /^\s*(https?|ftp|file):|data:image\//;
$compileProvider.imgSrcSanitizationWhitelist(imgSrcSanitizationWhitelist);
});
However, the whitelists for "safe" tags are hard-coded and can't be changed the same way. You can see the list here in the source:
https://github.com/angular/angular.js/blob/master/src/ngSanitize/sanitize.js#L186
There is an open request to enhance this functionality:
https://github.com/angular/angular.js/issues/5900
But it has not been completed (yet).
In the meantime, you have a few options:
"Fork" the project and adjust ngSanitize to suit your purposes. Most people don't like to "hack core" in this way, but it's the whole point of Open Source to be able to do things like this. This module doesn't change so much that it would be that hard to keep it relatively up to date as you develop your project.
Live with the list defined there. Most of the time you find that this list is actually pretty good, and it's just that IMG or A HREF tags are broken. That's not because the tag is filtered - that's because THOSE are white-listed separately, and you can use the technique above to accept specific URLs into each of those tags as "safe".
By the way, there is now a possibility.

Resources