In trying to get vim to indent .html files properly, I followed the examples set out here.
Given the following file index.html:
<html>
<body>
<p>
text
</p>
</body>
</html>
I tried opening it like so (ignoring my .vimrc to make sure it isn't interfering negatively)
vim -u NONE index.html
Then I set the options to enable automatic indenting:
:filetype plugin indent on
:set filetype=html # abbrev - :set ft=html
:set smartindent # abbrev - :set si
And then I indented the entire file with gg=G, and this is the result:
<html>
<body>
<p>
text
</p>
</body>
</html>
I checked to make sure that the html.vim file existed, and it's definitely there
$ head -2 ~/.vim/after/ftplugin/html.vim
" Vim syntax file
" Language: HTML
$ head -2 ~/.vim/ftplugin/html.vim
" Vim syntax file
" Language: HTML
My version of vim is 7.4:
$ vim --version | head -1
VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Sep 23 2013 16:12:20)
And it includes smart indent:
$ vim --version | grep smartindent
-ebcdic +mouse +smartindent +xim
I'm at a loss as to why the indentation isn't working! Any clues or ideas to research this problem further?
FWIW, I'm running Ubuntu 13.04.
As mentioned in Cory's answer, the currently distributed version is Vimscript 2075. If you go to that plugin page you can see documented all the tags that by default will increase indent.
None of the tags you gave in your example are in this default list, but there are plenty of them.
Since indentation of HTML is very open to user preference, the plugin maintainer has included an option to add or remove tags to or from the list of tags that increases indent. See :help html-indent, where it suggests:
You can add further tags with:
:let g:html_indent_inctags = "html,body,head,tbody"
Between versions 7.3 and 7.4, the bundled html.vim file located in $VIMRUNTIME/indent changed. The currently distributed version is actually Vimscript #2075, and it doesn't indent some html tags by default.
I recommend Ben's solution above, but alternatively you can revert to a previous version of the distributed html.vim file.
To do this, just replace the existing 7.4 html.vim file with the one from 7.3.
wget ftp://ftp.vim.org/pub/vim/unix/vim-7.3.tar.bz2
tar jxf vim-7.3.tar.bz2
cp vim73/runtime/indent/html.vim ~/.vim/indent/
As of 7.4.52
within vim:
:let g:html_indent_inctags = "html,body,head,tbody"
:call HtmlIndent_CheckUserSettings()
else in .vimrc:
let g:html_indent_inctags = "html,body,head,tbody"
I wanted to just to add this to a comment on the top answer, to give back, after spending too much time not getting the answer to work, but apparently don't have enough reputation :(
The first troubleshooting step is to run :scriptnames. If you don't see .../indent/html.vim, then that means the plugin is not loaded correctly and indenting won't work properly. It will probably just left indent every line. (The problem is that vim doesn't give an error, so it seems like the indenting is doing an awful job.)
The most reliable way to get it working is to put this line in your ~/.vimrc.
filetype plugin indent on
Then open the file with vim again, and run :scriptnames. You should see .../indent/html.vim now. Then type gg=G to autoformat the entire file.
One important note that tripped me up for a while: If you don't put it in ~/.vimrc and just type :filetype plugin indent on after you've opened the file, you will have to re-open the file again with :e. The indent plugin has to be loaded before you open the file. Run :scriptnames to confirm.
Side note: you don't need to worry about smartindent or autoindent settings, those are for something else.
Related
Is there any way to render LaTex in README.md in a GitHub repository? I've googled it and searched on stack overflow but none of the related answers seems feasible.
For short expresions and not so fancy math you could use the inline HTML to get your latex rendered math on codecogs and then embed the resulting image. Here an example:
- <img src="https://latex.codecogs.com/gif.latex?O_t=\text { Onset event at time bin } t " />
- <img src="https://latex.codecogs.com/gif.latex?s=\text { sensor reading } " />
- <img src="https://latex.codecogs.com/gif.latex?P(s | O_t )=\text { Probability of a sensor reading value when sleep onset is observed at a time bin } t " />
Which should result in something like the next
Update: This works great in eclipse but not in github unfortunately. The only work around is the next:
Take your latex equation and go to http://www.codecogs.com/latex/eqneditor.php, at the bottom of the area where your equation appears displayed there is a tiny dropdown menu, pick URL encoded and then paste that in your github markdown in the next way:
![equation](http://latex.codecogs.com/gif.latex?O_t%3D%5Ctext%20%7B%20Onset%20event%20at%20time%20bin%20%7D%20t)
![equation](http://latex.codecogs.com/gif.latex?s%3D%5Ctext%20%7B%20sensor%20reading%20%7D)
![equation](http://latex.codecogs.com/gif.latex?P%28s%20%7C%20O_t%20%29%3D%5Ctext%20%7B%20Probability%20of%20a%20sensor%20reading%20value%20when%20sleep%20onset%20is%20observed%20at%20a%20time%20bin%20%7D%20t)
I upload repositories with equations to Gitlab because it has native support for LaTeX in .md files:
```math
SE = \frac{\sigma}{\sqrt{n}}
```
The syntax for inline latex is $`\sqrt{2}`$.
Gitlab renders equations with JavaScript in the browser instead of showing images, which improves the quality of equations.
More info here.
Let's hope Github will implement this as well in the future.
My trick is to use the Jupyter Notebook.
GitHub has built-in support for rendering .ipynb files. You can write inline and display LaTeX code in the notebook and GitHub will render it for you.
Here's a sample notebook file: https://gist.github.com/cyhsutw/d5983d166fb70ff651f027b2aa56ee4e
Readme2Tex
I've been working on a script that automates most of the cruft out of getting LaTeX typeset nicely into Github-flavored markdown: https://github.com/leegao/readme2tex
There are a few challenges with rendering LaTeX for Github. First, Github-flavored markdown strips most tags and most attributes. This means no Javascript based libraries (like Mathjax) nor any CSS styling.
The natural solution then seems to be to embed images of precompiled equations. However, you'll soon realize that LaTeX does more than just turning dollar-sign enclosed formulas into images.
Simply embedding images from online compilers gives this really unnatural look to your document. In fact, I would argue that it's even more readable in your everyday x^2 mathematical slang than jumpy .
I believe that making sure that your documents are typeset in a natural and readable way is important. This is why I wrote a script that, beyond compiling formulas into images, also ensures that the resulting image is properly fitted and aligned to the rest of the text.
For example, here is an excerpt from a .md file regarding some enumerative properties of regular expressions typeset using readme2tex:
As you might expect, the set of equations at the top is specified by just starting the corresponding align* environment
**Theorem**: The translation $[\![e]\!]$ given by
\begin{align*}
...
\end{align*}
...
Notice that while inline equations ($...$) run with the text, display equations (those that are delimited by \begin{ENV}...\end{ENV} or $$...$$) are centered. This makes it easy for people who are already accustomed to LaTeX to keep being productive.
If this sounds like something that could help, make sure to check it out. https://github.com/leegao/readme2tex
Since May 2022, this has been officially supported:
Inline:
Where $x = 0$, evaluate $x + 1$
Blocks:
Where
$$x = 0$$
Evaluate
$$x + 1$$
One can also use this online editor: https://www.codecogs.com/latex/eqneditor.php which generates SVG files on the fly. You can put a link in your document like this:
![](https://latex.codecogs.com/svg.latex?y%3Dx%5E2) which results in:
.
I test some solution proposed by others and I would like to recommend TeXify created and proposed in comment by agurodriguez and further described by Tom Hale - I would like develop his answer and give some reason why this is very good solution:
TeXify is wrapper of Readme2Tex (mention in Lee answer). To use Readme2Tex you must install a lot of software in your local machine (python, latex, ...) - but TeXify is github plugin so you don't need to install anything in your local machine - you only need to online installation that plugin in you github account by pressing one button and choose repositories for which TeXify will have read/write access to parse your tex formulas and generate pictures.
When in your repository you create or update *.tex.md file, the TeXify will detect changes and generate *.md file where latex formulas will be exchanged by its pictures saved in tex directory in your repo. So if you create README.tex.md file then TeXify will generate README.md with pictures instead tex formulas. So parsing tex formulas and generate documentation is done automagically on each commit&push :)
Because all your formulas are changed into pictures in tex directory and README.md file use links to that pictures, you can even uninstall TeXify and all your old documentation will still works :). The tex directory and *.tex.md files will stay on repository so you have access to your original latex formulas and pictures (you can also safely store in tex directory your other documentation pictures "made by hand" - TeXify will not touch them).
You can use equations latex syntax directly in README.tex.md file (without loosing .md markdown syntax) which is very handy. Julii in his answer proposed to use special links (with formulas) to external service e.g . http://latex.codecogs.com/gif.latex?s%3D%5Ctext%20%7B%20sensor%20reading%20%7D which is good however has some drawbacks: the formulas in links are not easy (handy) to read and update, and if there will be some problem with that third-party service your old documentation will stop work... In TeXify your old documentation will works always even if you uninstall that plugin (because all your pictures generated from latex formulas are stay in repo in tex directory).
The Yuchao Jiang in his answer, proposed to use Jupyter Notebook which is also nice however have som drawbacks: you cannot use formulas directly in README.md file, you need to make link there to other file *.ipynb in your repo which contains latex (MathJax) formulas. The file *.ipynb format is JSON which is not handy to maintain (e.g. Gist don't show detailed error with line number in *.ipynb file when you forgot to put comma in proper place...).
Here is link to some of my repo where I use TeXify for which documentation was generated from README.tex.md file.
Update
Today 2020.12.13 I realised that TeXify plugin stop working - even after reinstallation :(
For automatic conversion upon push to GitHub, take a look at the TeXify app:
GitHub App that looks in your pushes for files with extension *.tex.md and renders it's TeX expressions as SVG images
How it works (from the source repository):
Whenever you push TeXify will run and seach for *.tex.md files in your last commit. For each one of those it'll run readme2tex which will take LaTeX expressions enclosed between dollar signs, convert it to plain SVG images, and then save the output into a .md extension file (That means that a file named README.tex.md will be processed and the output will be saved as README.md). After that, the output file and the new SVG images are then commited and pushed back to your repo.
I just published a new version of xhub, a browser extension that renders LaTeX (and other things) in GitHub pages.
Cons:
You have to install the extension once.
Pros:
No need to set up anything.
Just write Markdown with math
Display math:
```math
e^{i\pi} + 1 = 0
```
and line math $`a^2 + b^2 = c^2`$.
(Syntax like on GitLab.)
Works on light and dark background. (Math has text-color)
You can copy-and-paste the math just like text
As an example, check out this GitHub README:
You can get a continuous integration service (e.g. Travis CI) to render LaTeX and commit results to github. CI will deploy a "cloud" worker after each new commit. The worker compiles your document into pdf and either cuses ImageMagick to convert it to an image or uses PanDoc to attempt LaTeX->HTML conversion where success may vary depending on your document. Worker then commits image or html to your repository from where it can be shown in your readme.
Sample TravisCi config that builds a PDF, converts it to a PNG and commits it to a static location in your repo is pasted below. You would need to add a line that fetches pdfconverts PDF to an image
sudo: required
dist: trusty
os: linux
language: generic
services: docker
env:
global:
- GIT_NAME: Travis CI
- GIT_EMAIL: builds#travis-ci.org
- TRAVIS_REPO_SLUG: your-github-username/your-repo
- GIT_BRANCH: master
# I recommend storing your GitHub Access token as a secret key in a Travis CI environment variable, for example $GH_TOKEN.
- secure: ${GH_TOKEN}
script:
- wget https://raw.githubusercontent.com/blang/latex-docker/master/latexdockercmd.sh
- chmod +x latexdockercmd.sh
- "./latexdockercmd.sh latexmk -cd -f -interaction=batchmode -pdf yourdocument.tex -outdir=$TRAVIS_BUILD_DIR/"
- cd $TRAVIS_BUILD_DIR
- convert -density 300 -quality 90 yourdocument.pdf yourdocument.png
- git checkout --orphan $TRAVIS_BRANCH-pdf
- git rm -rf .
- git add -f yourdoc*.png
- git -c user.name='travis' -c user.email='travis' commit -m "updated PDF"
# note we are again using GitHub access key stored in the CI environment variable
- git push -q -f https://your-github-username:$GH_TOKEN#github.com/$TRAVIS_REPO_SLUG $TRAVIS_BRANCH-pdf
notifications:
email: false
This Travis Ci configuration launches a Ubuntu worker downloads a latex docker image, compiles your document to pdf and commits it to a branch called branchanme-pdf.
For more examples see this github repo and its accompanying sx discussion, PanDoc example,
https://dfm.io/posts/travis-latex/, and this post on Medium.
I have been looking around and found that this answer in another question works best for me. i.e. use githubcontent math renderer, e.g. to display:
Use this link
Beware of the latex needs to be url encoded, but otherwise work quite well for me.
If you are having issues with https://www.codecogs.com/latex/eqneditor.php, I found that https://alexanderrodin.com/github-latex-markdown/ worked for me. It generates the Markdown code you need, so you just cut and paste it into your README.md document.
You may also take a look on my tool latexMarkdown2Markdown which convert LaTeX to SVG and generate a table of content with chapter numbering.
Good news!
According to this blogpost, now GitHub supports Mathjax in readme files.
You can use in-line LaTeX inspired syntax using $ delimiters, or in-blocks using $$ delimiters.
Writing inline expressions:
This sentence uses $ delimiters to show math inline:
$\sqrt{3x-1}+(1+x)^2$
Writing expressions as blocks:
The Cauchy-Schwarz Inequality
$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2
\right) \left( \sum_{k=1}^n b_k^2 \right)$$
Source: https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/writing-mathematical-expressions
You can use markdowns, e.g.
![equ](https://latex.codecogs.com/gif.latex?log(y)=\beta_0&space;+&space;\beta_1&space;x&space;+&space;u)
Code can be typed here: https://www.codecogs.com/latex/eqneditor.php.
Edit: As germanium pointed out, it does not work for README.md but other git pages though no explanation is available.
My quick solution is this
step 1. Add latex to your .md file
$$x=\sqrt{2}$$
Note: math eqns must be in $$...$$ or \\(... \\).
step 2. Add the following to your scripts.html or theme file (append this code at the end)
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
Done!. See your eq. by loading the page.
Is it possible to format HTML automatically with a tool in a similar way that eslint formats javascript? Why does it seem that there isn't many customizable options that you can integrate as part of your development pipeline?
I would wish to format HTML in the following way automatically with a command ran from the terminal:
<input
class="input-style"
placeholder="Replace me!"
/>
So for example I could npm run html-lint and it would fix the syntax in html files and warn about cases it cant fix.
js-beautify also works on HTML.
npm install js-beautify
js-beautify --type html file.html
Notice all this beautifying makes the file size increase substantially. The indentation is great for revision and editing, not so much for hosting. For that reason you might find html-minifier equally useful.
I personally think tidy is a fantastic options for tidying up HTML files. Checkout Tidy
maybe what you are looking for is prettier, this also supports CLI, even you can also make config, see the complete documentation here. Prettier CLI
I hope this helps.
I Googled for "Package json pretty print html" and got the following:
https://www.npmjs.com/package/pretty
(It's not clear whether this can be included in package.json)
There's also this (appears to be a command-line tool):
https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
My local development environment based on Windows and my production environment based on Linux.
I have an issue about "line separators (CR, LF, CRLF)". Every time I got blank lines in my code.
Which line separator type to should I choose for prevent the blank lines?
I am working in this exact environment as well, except my development environment is also in Linux.
The aggravating problem I have run into is editing CRLF text files in the Linux environment, whether they were Apache files, or shell scripts. Mainly, I couldn't easily edit them in Linux through vi, which is unhappy with the CR. If you never do that, then it may not be a problem for you. But if you see blank lines in your code, it might be something similar.
For HTML and PHP, Apache running in the Linux environment has never complained when serving up files or reading configuration files in CRLF.
The other side of it, was that it was hard to wrangle PHPStorm. The related post #LazyOne provided works, but PHPStorm is stubborn if you have been using CRLF as I had when I switched this setting. I found I still needed to change files by hand at times, which you can do along the bottom right of the editor window. You will see CR, LF or CRLF and you can click and change the setting for the particular file loaded in the editor:
As a side note, if you use git, you can set up a .gitattributes file in the project directory with this:
# Set the default behavior to always be linefeed for linux
* text eol=lf
Which causes git to normalize to LF as it states in the git documentation:
Set to string value "lf"
This setting forces Git to normalize line endings to LF on checkin and
prevents conversion to CRLF when the file is checked out.
Just getting started with Vim and am writing a basic HTML file. In SublimeText you could just right click and open in browser, but i'm having trouble finding how to do the same with Vim. I have Ubuntu and I want to preview the code in Chrome.
Thanks!
You can use :! to execute external commands within vim (see :help :!). The % sign in an :ex command expands to the current file name (see :help :_%). That being said, you can use the following to first save the file and then open it in the browser of your choice
:w|!google-chrome %
If you'd rather use firefox or chromium, use firefox or chromium, respectively, in place of google-chrome. If you're on mac or linux you could also use the open or xdg-open commands, respectively, to open the file in its default application. Don't want to type that out every time? Make your own command or mapping in your .vimrc.
command! ViewInBrowser :w|!google-chrome %
nnoremap <leader>b :ViewInBrowser<cr>
Is there a keyboard shortcut to format code in Notepad++ ?
I'm mainly working with HTML, CSS and Python code.
For example:
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="/media/style.css" type="text/css" media="screen" />
</head>
To:
<head>
<title>
{% block title %}
{% endblock %}
</title>
<link rel="stylesheet" href="/media/style.css" type="text/css" media="screen" />
</head>
I remember Visual Studio doing it with Ctrl+K+D and NetBeans having the feature too but can't find it within Notepad++, if it can even do it.
TextFX -> HTML Tidy -> Tidy: Reindent XML
Remember to have the HTML code selected before you do this.
there is such a plugin as UniversalIndentGUI, it can be installed right from the plugin manager and has possibilities to reindent the most used programming languages.
If you go to TextFX menu and go to TextFX Edit, you will see a menu item Reindent C++ Code.
That will also format C# code.
ANSWER AS OF June 2019
Install the XML Tools plugin from the Plugin Admin (in Notepad++ 7.7 at least)
Then click Plugins -> XML Tools -> Pretty Print (XML Only with Line breaks)
That did it for me.
Here is a list of the available shortcuts in Notepad++.
In case your desired functionality is not available, you are able to define own macros and assign them to a custom shortcut (i am not used to use macros).
UPDATE: I will post the shortcuts here in case the link gets invalid:
Shortcut Command
Ctrl-C Copy
Ctrl-X Cut
Ctrl-V Paste
Ctrl-Z Undo
Ctrl-Y Redo
Ctrl-A Select All
Ctrl-F Launch Find Dialog
Ctrl-H Launch Find / Replace Dialog
Ctrl-D Duplicate Current Line
Ctrl-L Delete Current Line
Ctrl-T Switch the current line position with the previous line position
F3 Find Next
Shft-F3 Find Previous
Ctrl-Shft-F Find in Files
Ctrl-F3 Find (volatil) Next
Ctrl-Shft-F3 Find (volatil) Previous
Ctrl-Shft-I Incremental Search
Ctrl-S Save File
Ctrl-Alt-S Save As
Ctrl-Shft-S Save All
Ctrl-O Open File
Ctrl-N New File
Ctrl-F2 Toggle Bookmark
F2 Go To Next Bookmark
Shft-F2 Go To Previous Bookmark
Ctrl-G Launch GoToLine Dialog
Ctrl-W Close Current Document
Alt-Shft-Arrow keys or Alt + Left mouse click Column Mode Select
F5 Launch Run Dialog
Ctrl-Space Launch CallTip ListBox
Alt-Space Launch Word Completion ListBox
Tab (selection of several lines) Insert Tabulation or Space (Indent)
Shft-Tab (selection of several lines) Remove Tabulation or Space (outdent)
Ctrl-(Keypad-/Keypad+) or Ctrl + mouse wheel butto Zoom in (+ or up) and Zoom out (- or down)
Ctrl-Keypad/ Restore the original size from zoom
F11 Toggle Full Screen Mode
Ctrl-Tab Next Document
Ctrl-Shft-Tab Previous Document
Ctrl-Shft-Up Move Current Line Up
Ctrl-Shft-Down Move Current Line Down
Ctrl-Alt-F Collapse the Current Level
Ctrl-Alt-Shft-F Uncollapse the Current Level
Alt-0 Fold All
Alt-(1~8) Collapse the Level (1~8)
Alt-Shft-0 Unfold All
Alt-Shft-(1~8) Uncollapse the Level (1~8)
Ctrl-BackSpace Delete to start of word
Ctrl-Delete Delete to end of word
Ctrl-Shft-BackSpace Delete to start of line
Ctrl-Shft-Delete Delete to end of line
Ctrl-U Convert to lower case
Ctrl-Shft-U Convert to UPPER CASE
Ctrl-B Go to matching brace
Ctrl-Shft-R Start to record /Stop recording the macro
Ctrl-Shft-P Play recorded macro
Ctrl-Q Block comment/uncomment
Ctrl-Shft-Q Stream comment
Ctrl-Shft-T Copy current line to clipboard
Ctrl-P Print
Alt-F4 Exit
Ctrl-I Split Lines
Ctrl-J Join Lines
Ctrl-Alt-R Text Direction RTL
Ctrl-Alt-L Text Direction LT
F1 About
The latest plugin is tidy2, which can be installed through Plugins>Plugin Manager>Show Plugin Manager.
I suggest editing config 1 and setting quote-marks: no, especially if you have script that makes use of quotes.
Also, tidying more than once can result in inserting ampersands the first time and then replacing the ampersands the second time. You may want to play with the config to get it to where you need it.
For JavaScript Formatting I use Notepad ++ JSMin Plugin.Quite Handy
This isn't quite the answer you were looking for, but it's the solution I came to when I had the same question.
[update - I'm using vscode now for everything. I think it works better in a lot of cases.]
I'm a pretty serious Notepad++ user, so don't take this the wrong way. I have started using NetBeans 8 to develop websites in addition to Notepad++ because you can set it to autoformat on save for all your languages, and there are a ton of configuration options for how the formatting looks, down to the most minute detail. You might look into it and find it is a worthy tool to use in conjunction with notepad++. It's also open source, completely free, and has a bunch of plugins and other useful things like automatically compiling Sass if you use that too. It's definitely not as quick as NP++ so it's not great for small edits, but it can be nice for a long coding session.
In my notepad++, it seems TextFX needs a perl environment to format HTML files. Tidy2 demands nothing so I think it's more handy.
If all you need is alignment, try the plugin called Code Alignment.
You can get it from the built-in plugin manager in Notepad++.
We can use the following shortcut in the latest version of notepad++ for formatting the code
Alt + Ctrl + Shift + B
In Plugins > Plugin Admin > Search 'XML Tools' > Install.
The window will restart and install XML Tools under plugins.
Open your file and click Ctrl + Alt + Shift + B
No. Notepad++ can't format by itself. Formatting can easily be accomplished in many IDEs like Eclipse, NetBeans, Visual Studio [Code].
Another Potential Solution
Okay, so it's been 12 years since this question was asked. I think that I've found a another acceptable solution, that is perhaps better for formatting files, using Prettier.
What is Prettier?
Prettier is described as: "an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary."
Prettier Supports the Following Languages
HTML
CSS, Less, and SCSS
JavaScript
TypeScript
JSX, Angular, Vue
JSON, Markdown, YAML
And a few others.
If You Want to Use Other Languages, You Can Either Use:
Plugins made by the community to Prettier, which allow support for other formats such: Java, Rust, PHP, SQL, and others.
Non-Prettier formatters supporting other languages such as clang-format (npm version) (C / C++ / Java / JavaScript / JSON / Objective-C / Protobuf / C#), or Black (Python).
How To Install
You're going to need to install Node.js for this tutorial.
Note: There may be other work arounds for using the subsequent
mentioned software without using Node.js. But to keep this tutorial
simple and the fact that Node.js already carries widespread
familiarity among developers, I'm going to be using this software
without explaining how to install it.
After installing Node.js, install prettier globally to your system, allowing yourself to run prettier anywhere from the command line.
# NPM is the package manager used by Node.js
# And --global allows you to use prettier anywhere on your local computer.
npm install --global prettier
# To install other plugins (example):
npm install --g prettier-plugin-rust prettier-plugin-java
# To Install clang-format using NPM
npm install -g clang-format
# Usage Examples
prettier --write jquery-min.js # Formatting a JavaScript file
clang-format -i Test.cpp # Formatting C++ file
On Notepad++, install a plugin called NppExec from Menu> Plugins Admin...> Available> NppExec.
You can now run NppExec by either pressing F6 or by clicking Menu > Plugins > NppExec > Execute NppExec Script...
Now you should have a window pop up, giving you the option of executing a command.
You can either use prettier on a (1) specific file or (2) all files in a folder or (3) all files in a directory recursively.
You can always reload a file after it's better overwritten by Prettier using Ctrl+R, and enabling the following setting: Menu > MISC. > Update silently.
Commands and Screenshots of NppExec + Prettier.
REM Using Prettier on Current File (use cmd or powershell /c)
cmd /c prettier --write "$(FULL_CURRENT_PATH)"
REM Using Prettier on Current Folder (a single asterisk)
pwsh /c prettier --write "$(CURRENT_DIRECTORY)\*"
REM Using Prettier on Current Directory Recursively (double asterisk)
pwsh /c prettier --write "$(CURRENT_DIRECTORY)\**"
Install NppExec Plugin
Running NppExec Plugin
Executing Commands on NppExec
NPP+ v7.9.1 with the latest version of XMLTools can't format exported VBA code from Office 2016/2019 Word. It puts all the code on the same line since it strips the CRLF out. Moreover, when you enable "auto validation" it errors out on the first VBA line that is, Attribute VB_Name = "The VBA module name". So any of the xml tool validations apparently can't be used for VBA validation.