How to highlight entity references (&blah;) in atom/language-babel - atom-editor

In ST3 I had some nice package (probably JSX or something) that highlighted entity references (eg. ) for me.
How can I get this back with Atom/language-babel?
I tried installing the react package, but then it said it conflicted with language-babel.

Actually it looks like I wasn't using language-babel, I was using language-js, because my JSX files have the .js extension.
Here's how you can tell Atom to use language-babel for all your .js files: atom how to change default syntax highlighting for .js files to language-babel

Related

ReactJS Sass, without webpack

Preface: I can't use webpack. It breaks too much of my AWS stuff and I'm too frustrated finding ever more problems. I wish I could use the convenience of webpack but I stopped using it and AWS now works. Now its all watchify and babel.
Can I use CSS/Sass without using Webpack (as mentioned) or import CSS Modules, PostCSS etc?
Issue: I can link a css file, pass in the classes to my component and it all renders out proper div / class syntax, but (I assume) the virtual DOM just doesnt load it. How can I get around this?
[Edited as I got a down-vote, just to be safe.]
You can just run gulp, and gulp-sass. That compiles a .css file and you can just manually include that file in the <head> of your file. Try there are dozens of tutorials on Google like this one

How do you modify Ionic colors in Meteor?

I'm using the official Ionic package for Meteor. Working directly with Ionic, there is a way to write a SASS theme. How would you do this in a Meteor set up?
Add the fourseven:scss package
Download this repo
https://github.com/nickw/meteor-ionic-scss-import and copy all the files to /client/stylesheets/ionic
In your main scss file, import ionic.import.scss: #import "./ionic/ionic.import.scss";
Overwrite the colors in _variables.import.scss
Go have a beer.
You might want to have a look at how it was done in Meteoric. Although this package is no longer maintained you can reuse the concepts that are used there:
Use https://atmospherejs.com/meteoric/ionic-sass and https://atmospherejs.com/meteoric/ionicons-sass as prepackaged versions of Ionic SCSS
Use https://atmospherejs.com/fourseven to make sure Meteor can process SCSS
To create your custom theme, simply overwrite the variables in _variables.scss in your own stylesheet.
Note that these packages support an older version of Ionic, if you want to use the newest version, you can include it from here in your "style" folder: https://github.com/driftyco/ionic/tree/master/scss

How to use a free bootstrap template in meteor

How to use a free bootstrap template (e.g., from startbootstrap.com) in meteor. I mean where the resources- html file, css folders and js folders of the free template should be put and what packages are needed to add/remove in meteor project file? I have tried it several times but got errors and the program crashes each time. I also transfer the script and link tags from section to section, but it did not work.
Just add the css of the template to the client of your Meteor project. Also, try using the nemo64:bootstrap package for Bootstrap. This will add some files to your project automatically, one of which will say is editable at the top. You can put your custom css in that file.
You can put the relevant html, css, and js files anywhere on the client. (Sticking it inside a folder called client will do that).
Image and font files should go in a folder called public.
You will need to make meteor templates from the HTML files. As is they will be missing any <template name="foo"> tags.
The css files can go anywhere under /client and they will automatically be added to the project. These are the easy ones.
The js files are the harder ones. If you put these under /client they will be wrapped by Meteor and will not have global scope. In all probability they won't work at all. You can put them under /public and modify your head.html file to include them to get around that problem. Odds are there won't be very many js functions in the free template anyway so you might want to read through them and see which ones you really need and then convert those to be proper template helpers or global functions on the client.

How to perform --include-css when using the Jekyll stylus plugin

I've just started using Jekyll and the stylus plugin provided here:
https://gist.github.com/adamjspooner/988201
I have some import statements in my stylus files like the following:
#import 'normalize.css'
The stylus plugin converts the stylus files correctly to css, but keeps the import statements in the generated css file. I would like to have the import statement to include the content of the css file when the css is generated. When using the command line for compiling stylus you can use the --include-css option to perform this task. How would one go about doing this when using the stylus plugin in Jekyll?
You can try to add options object with 'include css' key to the compile method, but I'm not sure that it will work:
Stylus.compile content, { 'include css' => true }

Best place for CSS and LESS external libs in PhpStorm or PyCharm project

I want my IDE to see Bootstrap files for CSS classes autocompletion and on-the-fly LESS compiling. But I don't want to store Bootstrap inside my project folder structure and copy libraries in each project. How can I make IDE know where is libs?
Some approaches I tried.
Using relative paths. #import '../../../../../Bootstrap 3/less/mixins'; does not look good. Moreover, despite import statement is correct (without red underlining), IDE does not "know" about imported mixins. When I just copy libraries, IDE "knows" about them.
Connect as JS libs. I see them in project files view. LESS syntax checker cannot locate them, no matter what path i specify. Import statement is underlined with red wavy line.
Now, I can use only copy and paste technique or use links (or directory junctions). I am not sure that this is correct way.
I tried this PhpStrom and PyCharm, but I suppose that WebStorm cannot resolve this problem too.
You can add a folder where your Bootstrap files are stored as additional content root to each of your projects (Settings/Directories, Add content root). See also WEB-7452

Resources