HTML-CSS-JS Prettify is by far the best formatting plugin I have found for Sublime Text, but I work on HTML Emails being sent with ExactTarget.
ExactTarget's Amp script for variable emails uses the format %%=v(#var)=%% and when I run the HTML Prettify plugin it changes my code to %=v(#var)=%
Why is a format plugin changing my code and not just formatting it? What in my settings can I change to keep this from happening?
You can specify sections of code for the plugin to ignore. From their repo:
https://github.com/victorporof/Sublime-HTMLPrettify#ignoring-certain-blocks-of-code
Related
I've just started using the Vetur VS Code extension for formatting .vue files. Everything seemed to work fine (syntax highlight, EMMET, etc.), but it just doesn't want to format the JavaScript code in tags. "Prettier" can't format it either. I tried to tweak my settings, tried disabling Prettier and Vetur respectively, but nothing seems to work. Code formatting is fine in and , though.
Now the project I'm going to be working on doesn't have any build steps, it uses Single File Component loader, so ESLint and Prettier in my build tooling is out of the picture. Plus, I'd rather have these tools in my IDE/Editor.
Where could the problem be? It looks like some sort of bug to me, I just don't know in which component: VS Code? Prettier? Vetur?
Thank you!
I'm using Visual Studio Code to code a Vue.js component and need to reformat the code of that component.
I did not find any built-in formatters, and the first choice for a plugin was vue-buetify which informs after installation that
There are many bugs in the extension, please do not use it, the better choice is vetur
I then tried Vetur by installing it but there is no place where I see an option to beautify the code currently in the editor. The Shift + Alt + F command has no effect.
How can I actually beautify (reformat) the code for a Vue component?
I've been fiddling with formatting quite a bit since my previously working project stopped formatting one day. Here's what I think the current state of the art is:
Use extensions vetur and prettier (specifically, esbenp.prettier-vscode Prettier - Code formatter). (You get these preinstalled by Vue.js Extension Pack esbenp.prettier-vscodeand others.)
Vetur is the (current) mandatory default tooling for vue. Accept no substitutes.
Prettier doesn't support .vue files per se, so that filetype is disabled by default: https://github.com/prettier/prettier-vscode/issues/338.
But Vetur understand its limitations and instead delegates formatting of individual sections of the .vue file to a potentially different formatter. By default, though, it delegates everything other than HTML sections to Prettier. https://vuejs.github.io/vetur/formatting.html. It disables formatting for HTML sections.
Vetur developers are down on js-beautify-html, although it is still apparently functional: https://vuejs.github.io/vetur/formatting.html. And they don't make an alternative recommendation at this time.
Prettier support for HTML, which would be the obvious choice if only it existed, is a long, sad story. Currently (May 2018), prettier formats HTML as JSX. Many subtleties are mentioned, but one issue that I have grasped is that JSX converts begin/empty/end tags to empty tags, e.g to . Apparently React and (I believe) Vue, do not like this, hence vetur disables Prettier for HTML.
So I'm going forward with enabling js-beautify-html in vetur settings, hoping for the best and keeping my eyes peeled. But I'm such a superficial coder that I may never trip over its known issues.
In 2022, the situation regarding formatting Vue files regaled in another answer has vastly improved.
Vetur is still the de facto solution for managing .vue files in VS Code, but in the time since this question was asked, Prettier added full support for them (and HTML proper). This means you can format them using Prettier without Vetur if you so desire.
Note that Vetur does not support VS Code's "Format Selection" functionality, even though Prettier does (for a small set of languages):
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available.
The Format Selection command does not work.
If you do decide to use Vetur, you shouldn't need any other extensions to get formatting to work, as the extension comes bundled with all of its available formatters. As long as you have the extension installed and enabled, formatting with the "Format Document" command or Shift + Alt + F should work out of the box.
Vetur's settings allow the user to configure which of its available formatters is used for each language it supports (Prettier is the default for all but Sass and Stylus). The formatters can also be toggled off per language, or entirely, if you prefer to use some other formatting solution instead.
If you have installed the Vetur extension on VS Code,
Go to the VS Code extension area.
Find Vetur and select the gear icon to enter settings of Vetur.
Scroll down until you find
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
Select pretter-eslint from dropdown menu
(if you don't see that option you can install Prettier extension).
Now you can see it formats your code automatically whenever you save.
I've started learning React Native.
I'm using Visual Studio Code as my editor.
I've set up the boiler plate and started the app. But whenever I change a .js file and hit save, VSCode is messing up all the formatting.
I thought I could sort this in the settings.json file but after googling for a while and playing around I can't find the correct setting.
Is this a bug or am I doing something wrong?
Setting file is default one:
UPDATE: I re-installed vscode. Then set up a basic js file with a react native tag and a html tag. I added in:
"editor.formatOnSave": false,
"javascript.format.enable": false
To my settings.json file and the problem still occurs:
The problem is having tags in a js file, I just don't know how to tell vscode to ignore them?
I found out what this was by looking though the extensions. Thanks to #wgj for the hint.
Turns out it was the JS-CSS-HTML formatter. I looked through the instructions and have removed the auto save for now. I'll have to work out the specific settings for this.
It uses js-beautify so if anyone knows the settings I should be looking at would be much appreciated.
I had a similar problem and it turned out my ultimate culprit was...
So I simply disabled it for the workspace.
Same here, all my HTML format messed up after saving, I disable "JS-CSS-HTML Formatter" and problem solved
In the end, what did the trick was changing the file format from JavaScript to JavaScript React on the bottom toolbar.
All my HTML format messed up in js after saving, I disable "JS-CSS-HTML Formatter" and restarted vscode, problem solved.
I found my solution to this problem by converting my components file extension from js to jsx. No more issues and everything is working fine.
Disable js-css-html formatter.
if you are using prettier and beautify together, override the setting as :
"beautify.ignore": [
"**/*.js",
"**/*.jsx"
]
Use Prettier Code Formatter instead of Beautify. Works perfectly for language mode Babel JavaScript
You should search for "format" in settings.json. You'll find a whole lot of TypeScript/JavaScript formatting tweaks in there, but the one that stands out to me is:
// Defines space handling after opening and before closing non empty brackets.
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false
Alternative, you're not a fan of formatting at all, you can turn it off entirely:
// Enable/disable default JavaScript formatter.
"javascript.format.enable": true,
However, a lot of my formatting options come from language server extensions, so if you're using one for React Native specifically, be sure to check the attributes in settings.json, or the docs to see if there are any attributes you can add.
Add this on settings.json file. Whether you are using any extension or not, use this code. It works fine for me:
Solution 1: Just Disable JS-CSS-HTML Formatter
Solution 2: Press Ctrl+, (open settings) after that search Code formatted and change none --> Prettier
If you don't have prettier install from the extension's marketplace.
i just had this problem , apparently its because of the beautify/prettier , try to disable both , then restart Vs code (your editor) . but then if u really want to use prettier , go under its extension settings and make sure its in strict with whitespaces and toogle around a few other settings and you should be fine , cheers .
Just turning off format on save option from the settings would work.
You can select JavaScript React in the task bar under Select Language Mode.
You can try one of the following
uninstall other formatters which are not required. To check how many formatters you have just press ctrl + shift + p or command +shift + p (mac) and type format document after that a menu will appear showing you your formatters
press ctrl + shift + p or command +shift + p (mac) and type settings and click on open users settings and then search for format on save and check the box
that's it!!
Enjoy
changing the file format from JavaScript to JavaScript React on the bottom toolbar worked just fine for me
I have tried all methods but the problem is solved completely by this:
-> Open setting.json
-> "files.associations": {
"*.js": "javascriptreact"
}
->Add above lines and press save the problem will solve
You can type the following command string when creating your project
npx create-react-app name-of-app react-complete-guide
or the following, if you have create-react-app installed already
create-react-app name-of-app react-complete-guide
I have a string template file (.st) in IntelliJ that I would like to see syntax highlighting on. How can I turn this on? I can't seem to find it anywhere.
The best solution is to use HTML syntax for *.st files. You can set this in Preference > File types > HTML.
Short answer is - you can't.
Someone must first implement a syntax highlighter plugin for the format.
The StringTemplate author, Terrence Parr, has begun work on such a plugin for String Template 4 but it does not support the older .st file format.
I tried the plugin. Even on .stg files it is not ideal if you use a dark editor theme.
I'm looking for site similar to http://www.manoli.net/csharpformat/ that allows one to put in c# code snippet and it formats the html to post into your blog with a CSS file.
I need one that actually does this for Objective-C.
You want the GeSHi (Generic Syntax Highlighter) library. It's is excellent, has dozens of languages (including Objective-C, with the ability to automatically linkify classes/protocols to the documentation), and support for many popular CMSs (Django, WordPress, Drupal, Joomla, Mambo, etc).
If you'd like to see it in action, you can check out nearly any wiki page on our local CocoaHeads website. For example: http://cocoaheads.byu.edu/wiki/different-nslog
Assuming you're on a Mac, copying code from Xcode will keep the syntax coloring. Any WYSIWYG blog editor should support that.
In case your blog software isn't WYSIWYG, you can paste into TextEdit and save as HTML. It outputs pretty crappy HTML considering it's just highlighted source code, but it's nonetheless compliant HTML.
Other than that, I don't know of an online service for that.
I use pygments (python) to generate syntax highlight for source code examples embedded in blog.
If your entry text is just the source code it will work the same for what you are after, I tested it to highlight Objective-C as well.
I actually use markdown syntax to type plain text blog post in a file and I copy plain text code examples. Then I run the file via markdown processor, which includes pygments for highlight and store it into a file.
It's as simple as:
include markdown
html = markdown.markdown(text,['codehilite'])
See simple script at the link which just takes file name of your plain text file and creates html file.
Then I can copy/paste the code.
You have to include link or copy the css as well to get the syntax highligh but it's easy.
I do this for blogger, see example how to use markdown with pygments to do syntax highlight.