I'm looking for an alternative extension for prettier, I don't care about the formatting looks. My one and only issue is that prettier messes up .min.js and .min.css on save, and the only way to prevent that is to add prettierignore in the root folder of every project.
I have at least 100 projects I work on, between my work and other projects, creating prettierignore isn't even an option at that point. Is there any other extension?
Not to mention that I can't even create prettierignore even if I want to, because some of my projects have sub folders and sometimes every sub folder is its own project and I might need to open every sub folder alone sometime, so I'd end up with 5 prettierignore in 1 project.
Videos
Not a fan of Prettier in VS Code, the extension installed ok, but the command line parts of the installation didn't work quite right (got it to only work temporarily for local, not global). Also don't like how it puts each argument on its own line, far to the left, very unreadable. Tried to adjust printwidth to 120, caused yet more errors .. argh.
Is there an alternative formatter anyone can recommend? Uncrustify? I'm currently working through
https://trailhead.salesforce.com/content/learn/modules/unit-testing-on-the-lightning-platform/generate-data-for-tests
and all of the sample code is formatted in column 1 without an indentation (why?) .. I don't want to re-format it manually in VS Code :-/
Thanks.
In my experience, the best combination is all 3, and here's why:
EditorConfig: This helps your editor produce code that looks like your style guide as you go. While this isn't strictly necessary in order to achieve your goals, it's nice if you're always looking at code that follows the same coding styles. Otherwise if you don't have EditorConfig, as you're typing your editor will auto-format differently to the rest of the code base, which is confusing. Of course if you've set up prettier it'll fix it before it goes into your code base, but still, why would you want to look at it in one format while you're writing it and then have it switch when you go to commit? Might as well be consistent.
Prettier: Automatically formats your code. I like to set it up to do this when I stage my files for a commit, so that it's physically impossible for me to commit code that doesn't match my style guide.
ESLint: So why would you want a linter too? Because ESLint does more than just style. It picks up when you declare variables you don't use, or reference things that aren't defined, amongst a few other niceties. So while its role diminishes somewhat compared to the days before prettier, it's still useful to have in a project to catch the other errors.
Prettier
It removes all original styling and ensures that all outputted code conforms to a consistent style.
- It changes your code after writing your code.
- For example
- on save with the Visual Studio Code editor
- with a CLI like
prettier --write .
Editorconfig
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
- It applies your rules before writing code
- For example
- When you press TAB, it leaves four spaces.
- For example
ESLint
ESLint statically analyzes your code to quickly find problems.
- ESLint finds problems in your code
To summarize:
- EditorConfig changes your editor settings.
- Prettier updates your code with your rules to reshape your code.
Finally:
- They have some common features in order to do the same things.
- I also agree with KevinBrownTech to use three of them. Especially if you are working with a team.
Useful sources for who want to dive into:
- Feross Aboukhadijeh: Write Perfect Code With Standard And ESLint - JSConf.Asia 2018
- JavaScript Standard Style
Also look at the React framework's repository:
