Sublime doesn't syntax highlight React functions? - reactjs

I'm trying to inline-bind my functions using this kind of syntax:
onChange = () => {
}
However, my sublime editor isn't correctly highlighting it:
I'm using the Babel package for sublime for syntax highlighting.
Does anyone know how to make it recognize this sort of style?

Check this
View -> Syntax -> Open all with current extension as... -> Babel -> Javascript(Babel).
or
Ctrl - Shift - P, type "Babel" and select Set Syntax: Javascript(Babel)
Source

ST3 relies on language definitions for providing language features such as code folding, syntax highlighting etc. However, with JavaScript, you have many different flavors of the language - like ES5, ES6, JSX etc. To correctly understand and parse each one of them is not easy given ST3's design (using a language definition file which is mostly regex matching).
So depending on what you're looking for, you may want to install Java​Script​Next - ES6 Syntax which helps ST3 better understand the language and its syntax. There are few others like these on marketplace if I'm not mistaken.
Then comes the notion of syntax highlighting - again, without the core editor natively understanding what's JS and what's JS-like out, these plugins are dependent on how good the language definitions are and so, have one or more shortcomings. There are a few options that you can try and see what suits best:
naomi - Enhanced syntax definitions for Sublime Text 3. Supports stage-0 features
babel-sublime - Syntax definitions for ES6 JavaScript with React JSX extensions. But has some issues with arrow functions, see #301
sublime-react - It's actually deprecated in favor of babel-sublime but you may want to check it out.
Whatever you choose, you need to do some due diligence. Check with their issue lists, see if anything stands out to you. Relying on transpilers can only go so far.
As a long time ST3 user, I've constantly found one or more issues. And depending on whether you're working on pure JS, or React, you may have to keep switching or accept some compromises.
Ultimately, I switched to VSCode (tried Atom too) which understand the language and it's flavors natively and provides extensions API that authors can build upon. Consequently, the syntax understanding and highlighting capabilities are far greater than what you can get out of ST3 + Extensions.

The only solution that comes to mind is to create a custom snippet, for Sublime, to "recognize" the arrow function or in general the reduced syntax to declare a function.
Here are two links that could be useful:
https://medium.freecodecamp.org/a-guide-to-preserving-your-wrists-with-sublime-text-snippets-7541662a53f2
and
https://gist.github.com/LeZuse/2324352
or
https://gist.github.com/ZYinMD/860926a178ccd6d107ffe2c6727b5845

Related

Use React and BabelJS in a Unity project

Hi I'm trying to make BabelJS and React to work from within Unity so I can use new-style JavaScript like Arrow functions () => {}, from within PowerUI. Apparently the Install=Package from within Visual Studio didn't actually allow unity to get the packages, so I manually installed AdvancedStringBuilder, JavaScriptEngineSwitcher.Core, JSPool, Newtonsoft.Json, and React.Core and simply dropped the net45 DLLs in the Unity Assets folder, and there are no compile errors.
However, when I actually want to use BabelJS the way the documentation (for C#) shows:
(at the beginning of the cs file):
using React;
then later when I want to babel-ify the javascript source code for PowerUI to compile (PowerUI/Source/JavaScript/JavaScriptEngine.cs line ~198):
var babel = ReactEnvironment.Current.Babel;
var newSource = babel.Transform(source);
Engine.Execute(newSource); // PowerUI code
I get this error (from PowerUI but the same would apply in any case):
React.TinyIoC.TinyIoCResolutionException: Unable to resolve type: React.IReactEnvironment
at React.TinyIoC.TinyIoCContainer.ResolveInternal (React.TinyIoC.TinyIoCContainer+TypeRegistration registration, React.TinyIoC.NamedParameterOverloads parameters, React.TinyIoC.ResolveOptions options) [0x001ce] in <c8732b4de84a482c9ad31b41d7faf4d8>:0
at React.TinyIoC.TinyIoCContainer.Resolve (System.Type resolveType) [0x00011] in <c8732b4de84a482c9ad31b41d7faf4d8>:0
at React.TinyIoC.TinyIoCContainer.Resolve[ResolveType] () [0x00000] in <c8732b4de84a482c9ad31b41d7faf4d8>:0
at React.ReactEnvironment.get_Current () [0x00005] in <c8732b4de84a482c9ad31b41d7faf4d8>:0
It seems like React isn't working, does anyone know what else I have to do to get this to work?
You cannot use babelJS or react in Unity.
since Unity 2018.2 the only supported language is C#. Qouted from "Programming in Unity"
What programming languages can you use in Unity?
Unity supports C#, an industry-standard language with some similarities to Java or C++.
Prior to Unity 2018.2 a language similair to JavaScript was supported, called UnityScript. However similair it is not Javascript, and not even based on the ECMA standards.
The confusion is understandable though, since even some official Unity resource refer to "UnityScript" as "Js/Javascript", but the two are completely different.
For a more extensive explanation between Javascript and Unityscript see this wiki.unity3d page

Terminology - one-time code generation directives

Is there a such thing as a preprocessor whose statements, once processed, disappear completely and get replaced by the target language syntax permanently?
I want to research it on the web but I don't know what term to search for. If I search for "code generator", "templating language", "preprocessor directives", "mixins", "annotations" I get generators whose input becomes the source of truth.
The closest thing I can think of is a macro.
What I'm trying to do
I often have to write code that is verbose and unnecessary manual labor and am looking for a smarter way to input at least the majority of it and have it automatically transformed and only source-control the output (and hand edit if necessary). For example:
Java code - Instead of writing getters/setters, javadoc (perhaps the transformer can be a maven plugin)
HTML - I just want to add URLs, and have my preprocessor automatically convert them to links, images, videos, audio etc. depending on the file extension with some regex substitution (currently I run a perl script via a cron job)
I just want to use it as my own shorthand and not enforce it in my project and make the output editable so that others have to learn a new framework or language (like Protobuf, Stringtemplate, GWT, C hash-defines, PHP, JSP etc).
There should be no direct clue that I used a template/preprocessor to generate it.
What you want is a "program transformation system". See https://en.wikipedia.org/wiki/Program_transformation. (This is a superset of "transpilers" [ugly term]).
A good source-to-source transformation system will let you apply rewrite rules of the form of:
if you see *this*, replace it by *that* if *this_condition*.
You can then take your source code, and run a set of rewrite rules across that code to change it.
The resulting code is "transformed"; the rewrite rules are not visible.
It seems like Transpiler is one way to describe it.

Prefixing inline styles in an isomorphic react app

Are there any simple ways to patch React to autoprefix styles, such that the rendered HTML doesn't differ on the client and server?
For example, is it possible to get
<div style={{display: 'flex'}}/>
to render to (ignoring data-reactid):
<div style="display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;"/>
In the specific case you posted, you may have to make a function in which you pass your style and it creates the correct styles. In cases where a simple prefix will work, you could use something like react-prefixr which just adds ms,Webkit,etc. to the style structure. If display:flex is not handled properly by react-prefixr, you can probably submit it as PR.
I've had the same issue and wanted an easy way to mixin styles. So I created a library that lets you use less/sass style mixins https://seogrady.github.io/style-mixin.
I've just today created a simple prefixing tool, react-prefixer. This handles prefixing possibilities for relevant browsers.
I say relevant because you call out display:-webkit-box syntax, which is basically Safari 5.1, its pretty non-existent these days. Additionally, it only adds the syntax needed, meaning you won't see the full string of styles as you showed ... based on browser support, it will either provide the prefixed version or the spec version, no need to clog up the markup with useless styles.
It's still pretty young (I coded it this morning), but maybe it can help.

Document MISRA/QA-C message suppression with Doxygen

I'm currently working on a project, which has to be MISRA 2012 compliant. But in the embedded world, you can't fulfill every MISRA rule. So I have to suppress some messages generated by QA-C. What's he best solution to do this?
I was thinking about making a table in every module header file with references (\ref and \anchor) to the relevant code lines, a description, etc. The first problem is: I can't use the Doxygen markdown table feature, because then the description has to be in one line, because Doxygen tables don't support line breaking. So I thought about using a simple verbatim table, what do you think?
Or is there a way to generate such a table automatically?
Greetings
m0nKeY
According to MISRA, all such undesired rules must be handled by your deviation procedure, given that they are either "required" or "advisory". You are not allowed to deviate from "mandatory" rules. (Strictly speaking, you don't need to invoke the deviation procedure for advisory rules.)
In my experience, the safest and smoothest way by far to do this, is to not allow individual deviations on case-by-case basis. All deviations from MISRA should be stated in your company coding standard, and in order to deviate you have to update that document. Which in turn enforces approval from the document owner, who is preferably the most hardened C veteran you have in the team.
That way, you prevent less experienced team members from misinterpreting the rules and ignoring important rules, simply because they don't understand them and mistake them for false positives. There should be a rationale in the document stating why the rule you deviate from is not feasible for your company.
This means that everyone in the dev team is allowed to deviate from the listed rules at any point, without the need to invoke any form of bureaucracy.
Once you have a setup like this, simply customize your static analyser and remove/ignore the undesired warnings. That way, you get rid of a lot of noise and false warnings from the tool.
To answer your question generally: To create an aggregate occurrence list of anything in doxygen, use \xrefitem
We use this as a tool in our code review process. I tag code with a custom tag \reviewme which adds the function to a list of all code in need of peer review. The next guy can come along and clear that tag. We have another custom tag \reviewedby which does not use \xrefitem but simply puts the reivewers name and the date in the code block saying who reviewed it and when. This had gotten a bit clunky as things have scaled with larget code bases and more developers. Now we're looking into tools that integrate with our version control process to handle this better. But when we started this it worked well and fit a shoestring budget. But that example should give you an idea of is capable.
Here is a screen shot of what the output looks like - proprietary stuff and auto names redacted:
Here is how we added this custom tag as an alias to xrefitem in our doxy file as follows
ALIASES = "reviewme = \xrefitem reviewme \"This section needs peer review\" \"Documentation block or code sections that need peer review\""
To add it from the GUI, you would go to Expert->Project->Aliases and add a line like this
reviewme = \xrefitem reviewme "This section needs peer review" "Documentation block or code sections that need peer review"
Same thing, just no need to put quotes around the whole thing and escape out the inner quotes.
\xrefitem is the underpinning of how things like \todo or \bug work in doxygen. You can make a list of just about anything your heart desires.
Speaking specifically to MISRA exceptions: Lundin's post has lot's of merit. I would consider it. I think a better place to document exceptions to coding standards is in the static analysis tool its self. Many tools have their own annotations where you can categorize the rule violation as 'excused' or whatever. But generally this does not remove them from the list, it allows you just to filter or sort them. Perhaps you can use REGEX in a script that runs prior to doxygen that will replace the tool specific annotation with a custom \xrefitem if you are really concerned. Or vice vera, replace the doxy annotation with your tool's annotation.

vim: display the type of C aggregate (struct/union) members, even when nested

I often find myself reading other developer's C code containing expressions like
ptr->member1.member2[i].another_member.final_member = 42;
and needing to find out what type final_member is. Usually what I do is to track down the chain of types using C tags, starting at the declaration of ptr and digging my way into the chain of members. This is cumbersome and often I'm stuck somewhere scratching my head, asking myself "What was the next member in the chain?" To make matters worse, a simple grep for final_member in the source tree turns up too many false positives due to the name being reused in more than one struct.
Is there a way to make vim give me the answer directly? I'm willing to install any plugin and even type a few characters while the cursor is on the final_member or select the whole expression :-) Non-GUI solutions preferred.
If i'm working on a project with several nested structs i add preview to the completeopt option.
In combination with the excellent omnicppcomplete plugin a tiny scratch window pops up if you select an entry in the completion menu. That scratch window shows some properties of the selected tag. Among other things it contains the search pattern for the tag which in case of a struct member usually contains its datatype.
I really suggest you to use plugin clang_complete (or some other plugin powered by clang) for completion. It will give you pure completion of C/C++/Objective-C code by real compiler, not ugly method by tags. Each item in completion menu also has type of field (that's what you are looking for)
Omnicppcomplete fails often on complicated expressions. Clang works great, since it is real awesome compiler.

Resources