How to set JSX files default to Babel text highlighting in sublime - javascript

I have a babel text highlighting that i added in my sublime. However every time I open a new react project it defaults to javascript text highlighting then i have to reset each javascript file to get the correct text highlighting. As you can see in the lower right of my screenshot it is by default set to javascript.

The syntax that Sublime selects is based primarily on the extension that the file has.
You can select View > Syntax > Open all with current extension as... from the menu while you have such a file open to tell Sublime what syntax you want it to use for any particular extension.
If you sometimes use regular JavaScript as well, you'll experience your current problem in reverse; you will have to manually swap the syntax back to JavaScript.
Either way, the Project Specific Syntax Settings package may also be useful in this case if you use projects. It will allow you to configure per project what you want the syntax for different files to be.

What I did was to make babel(JavaScript) the default, preventing the default JavaScript by adding it as a value to ignored_packages.
To do this, open your sublime, click on Preferences > settings then paste this in:
"ignored_packages":["JavaScript"]
More details here: https://github.com/babel/babel-sublime

Related

intellij function parameters are underlined

Weird to see and figure out, I am trying to remove these underlines. I guess they are present due to wrong language support or some other issue, but I simply cant remove them. Any guess on why they are and how can i remove them?
That's actually part of the default color scheme for JavaScript. You can change it easily though:
File → Settings → Editor > Colors & Fonts > JavaScript
Then find "Parameter" in the list of styled elements, and on the right side is a checkbox for "Effects", simply disable this and save and you will no longer have underlined parameter names.
Depending on your version of IntelliJ, you may have to save a copy of the default theme first because they didn't always let you overwrite the built in ones.

React.js files syntax in sublime text 3

i am using sublime text 3 as my code editor,i have written a basic hello world example in React.but the coloring is improper on the code ,i have tried installing Babel plugin but even after that also the coloring doesn't seem to work ,as you can see the image below
Just installing it isn't enough, you have to also tell SublimeText to use it.
Either do
a) Ctrl-Shift-P, type "Babel" and select Set Syntax: Javascript(Babel)
or
b) Go to the menu and do View->Syntax->Open all with current extension as...->Babel->Javascript(Babel).
You could follow the below mentioned steps:-
Setting babel as the default syntax
To set it as the default syntax for a particular extension:
Open a file with that extension,
Select View from the menu,
Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
Repeat this for each extension (e.g.: .js and .jsx).
Setting a Color Scheme
Babel comes bundled with Next and Monokai from Benvie/JavaScriptNext.tmLanguage. Select one from Preferences -> Color Scheme -> Babel
Courtesy: https://github.com/babel/babel-sublime
This might possibly help you out...follow below steps
press Ctrl + Shift + P
Doing so, Command Palette pops up and there type : Package control . And then
select the option Package Control: install package
Now typein and select 'Babel'
Now open 'View' menu and Navigate to Syntax, Open all with current extension
as…, Babel, Javascript (Babel).

Is it possible to change entire css class / js and anything associate with that?

I am new here.
Just want to ask several question to anyone experienced in this field.
So I have just bought a php website, and the case is that the owner of this theme seems a bit strict with copyright stuff, so he placed his own identity in almost every way.
In example, the website named "mcdonalds", he have almost in his entire css class after his name/brand, example .mcdonalds_header , or .mcdonalds_style.css , etc .
Now my question is,
Is it possible to change entire css class dynamically?
I meant, if I open it through text editor maybe I could replace them all by hitting Ctrl+H and replace "mcdonalds_" with [nothing].But of course it will return many errors as the entire php and js file are associated with those class.
What I want in example I have
index.php with 8 div have class "mcdonalds_grid"
style.css file with class "mcdonalds_grid"
is it possible to edit the class in css "mcdonalds_grid" to "gridStyle", and then the entire 8 class in the file changed automatically, too?
Because I am not sure to do it manually. In my case I have up to hundred thousands to be edited. It sicks. And if you asked the reason I need to do this, so it looks more professional using my own brand rather than using mcdonald's stuffs.
Any view would be appreciated.
Thanks!
Others have mentioned Jquery.
You could also do it dynamically with Less Mixins: https://www.gaslampmedia.com/mapping-css-styles-less/.
Or you could do it non-dynamically (I would recommend this). You could use an IDE (Integrated Development Environment) or an advanced text editor to search and replace all instances of a text string in the entire project at once. In your case, you could replace all instances of mcdonald with the name of your company or project. Advanced Text Editors like Sublime Text or Notepad++ could let you do this, but you would generally need to open all of the files at once. IDEs like Visual Studio or Dreamweaver would also let you do this, with the benefit of not having to open all of the files (you just add the files to your project).
I personally don't suggest to make these types of edit but if you must need to do then follow the process:
From the answer of the question
You can use IDE to change something in the whole project. I would suggest NetBeans. It's easy. Just add the project to NetBeans, click on edit (in the top left corner) and then click on Replace in project.. ( check in the bottom of the popup)
then

How to enable code assist for the DOM for JavaScript projects in Eclipse

How can I simply get in this little popup (code completion) all possible methods/functions given when I type window.(blablabla).
Because if I type window. there is no "event" method for example.
In NuSphere there are all methods been listed.
Please differentiate between JavaScript and DOM code assist. There are many questions/answers here about this but it's ambiguous which of these two they refer to. None, I've seen, particularly claims to have found a solution for DOM and most mentions Aptana as standalone IDE or Eclipse plugin for solution.
For reasons outside the scope of this question I use Eclipse Indigo (3.7.2) and got this working w/o Aptana. This solution probably depends on the JavaScript Development Tools plugin.
First in the Navigator pane right click the project and hover the Configure option. Select Convert to JavaScript project or Add JavaScript Support.
Open project properties and a JavaScript item should appear in the left hand side list of configuration options. Expand and select Include Path. In the Libraries tab on the right you will see ECMA Script and ECMA 3 Browser Support. Switch to the Global Supertype tab and tick the ECAM 3 Browser Support checkbox. Restart Eclipse.
--
However in my case this last option didn't seem to work (when selected 'window' as global supertype, below the list got 'Window() null') and window. didn't bring results but document. and all other JS globals did. (So I could say for e.g. var w = document.defaultVeiw; and w. did bring up desired list.)

Mark a position in eclipse text editor?

I have two questions:
While editing a source file, it's very convenient to be able to label the current position of cursor and then jump to it later by somehow calling that label. I VIM, there is the marking notion, but I'm not aware of such possibility in Eclipse text editor.
Is there any way in Eclipse to add a portion of the code to the outline window, such that you can easily jump to that part when you click on it? I know that for java source-code, almost all variables and functions are shown there, but what if I have a html/javascript code, in which I'm using jquery functions, and the outline doesn't show these functions.
Any help is appreciated!
I dont have any direct answers for your question.
May be you are looking for the following eclipse features.
Eclipse supports bookmarks, you may use that feature. Also CTRL + Q will go back to the last edited location.
You may be able to get this using the Mylyn, which is packaged along with eclipse by default. Implements the notion of a Task focussed IDE ( RECOMMENDED)

Categories