Is there a JSX formatter for sublime text? - sublimetext

I'm using Sublime Text as a text editor.
There's a jsFormat for formatting javascript files but I can't find one for JSX.
How you guys deal with formatting JSX?

Update 4
Check prettier, not that configurable as esformatter, but currently used to format some big projects (like React itself)
Update 3
Check sublime jsfmt. If you add esformatter-jsx to the config and install the package inside the forlder for sublime-jsfmt. You will be able to format JSX files directly from Sublime. Here is a guide for that
Update 2
from the command line you can also use esbeautifier. It is a wrapper around esformatter that accept a list of globs to format
# install the dependencies globally
npm i -g esbeautifier
# beautify the files under src/ and specs/ both .js and .jsx
esbeautifier src/**/*.js* specs/**/*.js*
Update
So I ended up doing a plugin for esformatter to enable the formatting of JSX files:
https://www.npmjs.com/package/esformatter-jsx
Here is a live demo on requirebin
It should be somehow feasible to call esformatter from Sublime passing the current file as the argument. In any case to use it from the command line you can follow these instructions:
From the command line it can be used like this:
# install the dependencies globally
npm i -g esformatter esformatter-jsx
# call it (this will print to stdout)
esformatter --plugins=esformatter-jsx ./path/to/your/file
# to actually modify the file
esformatter --plugins=esformatter-jsx ./path/to/your/file > ./path/to/your/file
# to specify a config file (where you can also specify the plugins)
# check esformatter for more info about the configuration options
esformatter -c ./path/to/.esformatter ./path/to/your/file > ./path/to/your/file
==== old answer below ===
So if what you're looking is just to make your jsx files to be formatted while allowing the jsx syntax (basically beautify all the javascript syntax and ignore jsx tags, meaning leave them as is), this is what I'm doing using esformatter
// needed for grunt.file.expand
var grunt = require('grunt');
// use it with care, I haven't check if there
// isn't any side effect from using proxyquire to
// inject esprima-fb into the esformatter
// but this type of dependency replacement
// seems to be very fragile... if rocambole deps change
// this will certainly break, same is true for esformatter
// use it with care
var proxyquire = require('proxyquire');
var rocambole = proxyquire('rocambole', {
'esprima': require('esprima-fb')
});
var esformatter = proxyquire('esformatter', {
rocambole: rocambole
});
// path to your esformatter configuration
var cfg = grunt.file.readJSON('./esformatter.json');
// expand the files from the glob
var files = grunt.file.expand('./js/**/*.jsx');
// do the actual formatting
files.forEach(function (fIn) {
console.log('formatting', fIn);
var output = esformatter.format(grunt.file.read(fIn), cfg);
grunt.file.write(fIn, output);
});
I would actually like that esformatter use a version of rocambole that use esprima-fb instead of esprima, to avoid proxyquire.

There is a setting in the HTML-CSS-JS Prettify plugin that allows you to ignore xml syntax in the js/jsx file. That way it doesn't mess up the jsx code.
The setting is: "e4x": true in the "js" section of the settings file
Preferences > Package Settings > HTML\CSS\JS Prettify > Set Prettify Preferences
This does not work well if you have self closing tags eg. tags ending in />

You can install a JsPrettier package for Sublime 2 & 3. It's a fairly new JavaScript formatter (at the time of writing this: Feb-2017). It supports most of the latest developments like: ES2017, JSX, and Flow.
Quickstart
Install prettier globally using terminal: $ npm install -g prettier
In Sublime go to Tools -> Command Palette... -> Package Control: Install Package, type the word JsPrettier, then select it to complete the installation.
Format your file using context menu inside the editor or bind it to a keyboard shortcut: { "keys": ["super+b"], "command": "js_prettier" }
Links:
https://github.com/jonlabelle/SublimeJsPrettier
https://github.com/jlongster/prettier

To add to what #Shoobah said:
There is a setting in the HTML-CSS-JS Prettify plugin that allows you
to ignore xml syntax in the js/jsx file. That way it doesn't mess up
the jsx code. The setting is: "e4x": true in the "js" section of the
settings file
Go to: Preferences > Package Settings > HTML\CSS\JS Prettify > Set
Prettify Preferences
Go to "js" section:
Add "jsx" to the "allowed_file_extension", and then change "e4x" to "true"

the answer in the internet that always told you set 'e4x' to true,
but sometimes, we have to set option of 'format_on_save_extensions' then add 'jsx' in array
modify jsFormat.sublime-settings
{
"e4x": true,
"format_on_save": true,
"format_on_save_extensions": ["js", "json", "jsx"]
}

Using Sublime's Package Installer, install Babel. Then:
Open a .jsx file.
Select View from the menu,
Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).

Not specifically for Sublime Text, but there is a beautifier in JavaScript for React JSX.
http://prettydiff.com/?m=beautify claims to support JSX at:
http://prettydiff.com/guide/react_jsx.xhtml

Related

Flow module not found with .scss file

I have a file using scss with css-modules like so:
import styles from './Login.scss';
The webpack build works fine but i'm getting a flow error: Required Module Not Found
In my .flowconfig I have
[ignore]
.*/node_modules/fbjs/.*
.*/app/main.js
.*/app/dist/.*
.*/release/.*
.*/git/.*
[include]
[libs]
[options]
esproposal.class_static_fields=enable
esproposal.class_instance_fields=enable
esproposal.export_star_as=enable
module.name_mapper.extension='css' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='styl' -> '<PROJECT_ROOT>/flow/CSSModule.js.flow'
module.name_mapper.extension='png' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
module.name_mapper.extension='jpg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
I've also seen https://github.com/facebook/flow/issues/338 but it doesn't really have any solution.
Has anyone found a workaround for this issue?
A better solution for this error is to use the css-modules-flow-types webpack plugin to generate flow types for your CSS modules.
Flow doesn't know about the scss extension, so you need to add the following to your .flowconfig, in the [options] section:
; Extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
You should also add *.scss.flow to your .gitignore. These files shouldn't be checked in because they are automatically generated during the webpack build.
added all the file types I wanted flow to recognize in .flowconfig file
[options]
module.file_ext=.js
module.file_ext=.json
module.file_ext=.jsx
module.file_ext=.css
module.file_ext=.scss
This error can be fixed by assigning .scss files to an empty module. I just npm installed empty and added this to the .flowconfig :
module.name_mapper.extension='scss' -> 'empty/object'
We can use module.name_mapper.extension to replace types for imported module on Object
module.name_mapper.extension - Specify a file extension to match, and a replacement module name,
separated by a ->.
add option to .flowconfig file
// .flowconfig
[options]
module.name_mapper.extension='scss' -> '<PROJECT_ROOT>/flowconfig.mock-module.js'
create new file
// flowconfig.mock-module.js
export default Object;

Make Geany recognize additional file extensions

My default Geany installation on Debian does not recognize some file types out of the box. How can I add extensions, using the same syntax highlighting as other known extensions for simplicity's sake?
In the current case, I'd like Geany to open all .aspx files with the same highlighting as .html files.
Use inside the menu Tools->Configuration files->filetype_extensions.conf. This will allow you to configure the filetypes based on suffix for your user.
Just add new extensions in /usr/local/share/geany/filetype_extensions.conf
I had trouble accomplishing this without help from here.
Go here to read documentation about this topic.
From the Geany menu, go to:
Tools > Configuration Files > filetype_extensions.conf
Go to this line and un-comment it:
#~ [Extensions]
So that it just reads:
[Extensions]
I was needing to add .mjs as an additional extension for javascript. So, for me, I also uncommented this line:
#~ Javascript=*.js;
And changed it to:
Javascript=*.js;*.mjs;
After this, I saved the file.
Now when I opened files having a .mjs file extension, they automatically have Javascript Syntax Highlighting.
I made some suggestions to improve this expeirience here.

ST2: SublimeLinter ignoring JSHint settings

I've been trying to configure SublimeLinter to use different JSHint settings, but my settings are being totally ignored. Mostly I just want to be able to use double quotes without getting a linting error. Here's what I have in my 'User' SublimeLinter.sublime-settings
{
"jshint_options":
{
"evil": true,
"regexdash": true,
"browser": true,
"wsh": true,
"sub": true,
"quotmark" : true
}
}
The file is definitely being parsed, as it throws an error whenever it's not properly formatted (amusingly this includes whenever the strings are wrapped in single quotes). It's also ignoring more than just the quote preference- I can set "evil" to false and it'll still give me eval warnings.
Any ideas? This is on OSX.
Thanks in advance.
FYI just in case: jshint_options is no longer available on SublimeLinter-jshint and settings are now set with .jshintrc files. See this and this.
I had the exact same problem. The default .jshintrc in "sublime/preferences/package settings/js hint/set linting preferences" did absolutely nothing for me either.
In order to fix it, I created a .jshintrc file in the root folder of the web project I was working on. I then opened the folder through sublime text and sublinter/jshint picked up my settings.
Maybe your Jshint options are overridden by a .jshinrc file. According to SublimeLinter README file :
SublimeLinter supports .jshintrc files. If using JSHint, SublimeLinter will recursively search the directory tree (from the file location to the file-system root directory). This functionality is specified in the JSHint README.
and
The jshint follows convention set by node-jshint (though node is not required) and will attempt to locate the configuration file for you starting in pwd. (or "present working directory") If this does not yield a .jshintrc file, it will move one level up (..) the directory tree all the way up to the filesystem root. If a file is found, it stops immediately and uses that set of configuration instead of "jshint_options".

How to Minify CSS with SCSS File Watcher in PHPStorm IDE

Is there a way to configure SASS FileWatcher so it builds a Minified CSS?
I currently configured SASS + YUI Compressor to accomplish this but I would like to do this with pure SASS if possible.
Here are the screenshots of both configurations:
SASS
YUI Compressor CSS
Thanks in advance.
Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:
Go to File > Settings
Inside Project Settings select File Watchers
You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
Double click the watcher name to access its configuration.
In the Arguments line make sure to add the --style compressed argument
Click OK and you're done
This image shows how that configuration should look:
From that point on, your .css output files will be compressed.
The correct answer is --style=compressed
menu File -> Settings -> Tools - File watchers
add scss and in argument add --style=compressed
If you are using sassc under Linux (Arch) you could use as Arguments:
-t compressed -m auto $FileNameWithoutExtension$.scss $FileNameWithoutExtension$.min.css
For me, --style compressed, --style compressed and --style=compressed don't work.
I had to add the option -x as an argument.
Like here:
If you want more details this post the following post is where I found this solution: https://stackoverflow.com/a/25579991/9861577.

How do I enable syntax highlighting for my Gemfile in Sublime Text 2?

I recently started using Sublime Text 2. What an awesome editor. It does a great job of highlighting Ruby code, but it does not highlight my Gemfile.
Is there a way to get it to do that?
I found this Gist but it has no instructions on how to use it.
There are at least three options:
Switch syntax manually (not preferred, but easy; no explanation required)
Add "Gemfile" to the list of Ruby-syntax files
Use the plugin you link to and create a package for it
1. No explanation, but handy trick
You can bind a keystroke to set syntax without moving to the mouse.
I bound syntax changing to Ctrl-Opt-Space by adding the following to my user keybindings:
[
{ "keys": ["ctrl+alt+space"],
"command": "show_overlay",
"args": { "overlay": "command_palette", "text": "Set Syntax: " } }
]
2. Add "Gemfile" to list of Ruby-syntax files
Linux: ~/.config/sublime-text-2/Packages/Ruby/Ruby.tmLanguage
OS X: ~/Library/Application Support/Sublime Text 2/Packages/Ruby/Ruby.tmLanguage
Windows: %APPDATA%/Sublime Text 2/Packages/Ruby/Ruby.tmLanguage
You can also get there by using the menu option Preferences -> Browse Packages and going into the Ruby package. Once you're in the file it'll be obvious: it's the <array> element with Ruby-looking filenames. Add <string>Gemfile</string> and you're all set.
It's possible the setting could get overwritten on an upgrade; I'm not sure how that works with ST2–it may be cleaner to do it through code as in the snippet.
3. Using the snippet you linked to
More work (and the correction of one syntax error). You can either do it manually, by creating a directory in Packages (see above for location) or create an actual package and allow ST2 to install it.
I created a test package called "Syntax" and copied the snippet into it, restarted ST2, and opening a Gemfile worked as expected. The correction required an additional colon (new gist), nutshell:
elif name[-3] == "erb": # Needed a semi-colon here.
set_sintax(view, "HTML (Rails)", "Rails")
If you are here but are using Sublime Text 3 you might not be able able to find the 'list of Ruby-syntax files' in packages.
Most other solutions found online were confusing to me.
I fixed this by manually changing Gemfile to Ruby in the bottom right hand corner file extension menu item when you have opened the file in Sublime Text 3 (which is what I had been doing each time I opened the file up until now).
Once you have selected ruby then go to Preferences -> Settings-More -> Syntax Specific-User
{
"extensions":
[
"Gemfile",
"Gemfile.lock"
]
}
When you navigate to Syntax Specific User it opens a file specific to the language that the file has syntax highlighting for. You may need to change the file back to whatever it is defaulting too (mine was 'Rd (R Documentation).sublime-settings') and removing Gemfile from that Syntax highlighting file.
In Ubuntu these files are stored at
~/.config/sublime-text-3/Packages/User
The DetectSyntax plugin for ST2 provides a more comprehensive solution to highlighting files - It allows file highlighting based on rules. It's smart enough to understand the difference between a Rails file, other files that use .rb as an extension and standard ruby files.
The standard rules include Gemfile, Rakefile, Guardfile and others matched to Ruby for Syntax formatting.
See DetectSyntax on GitHub.
You can achieve this by copying the HTML.tmLanguage file in the User/ folder, this way it won't be overwritten by an update.

Resources