eslint-config-prettier VS ESLint

As I was reading the Prettier documentation I stumbled upon this blob which talks about how to make ESLint and Prettier play nicely with each other. It instructed to install eslint-config-prettier dependency in my project using the command npm install --save-dev eslint-config-prettier. Then I added prettier as part of the .eslintrc.cjs' extends array making prettier dependency part of the linting process. Lastly, I ran its cmd line helper npx eslint-config-prettier path/to/main.js to check if there were any ESLint rules which are unnecessary or would conflict with Prettier. The test results came out fine with no unnecessary or conflicting rules. The use case on how it works and why to use it is mentioned here.

I wouldn’t say they’re arguing something completely different. A large subset of linting rules are by nature purely formatting rules. You can enforce line length with either prettier or a linter and both can auto fix the issue.

Because of this things like [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) exist to ensure conflicting eslint formatting rules are disabled if they can be handled by prettier.

If you use Prettier you should disable any and all eslint formatting rules. It's just not worth the hassle trying to make them "compatible". Fortunately there's an easy way to do that with a plugin.

Also add this eslint plugin, which makes eslint play nice with prettier: https://github.com/prettier/eslint-config-prettier

If you don’t care about the diagnostics, you should be using this instead. Prettier even says so.

Linting is an important step in maintaining code quality, The React Library Builder uses ESLint and eslint-config-prettier for linting. You can modify linting rules by overriding them in the .eslintrc file.

eslint-config-prettier: An ESLint configuration which disables the formatting rules in ESLint that Prettier is going to be responsible for handling, hence avoiding any clashes.

You can use both Eslint and Prettier if you care greatly about both linting and code formatting. Prettier had a plugin to disable Eslint's formatting rules.

The eslint-config-prettier package disables all ESLint rules that might conflict with Prettier. This lets us use ESLint configurations without letting it get in the way when using Prettier. We can then use the eslint-plugin-prettier package to integrate Prettier rules into ESLint rules. Finally, we must set the Prettier rules in the ESLint configuration file. Add the following configuration to the .eslintrc file in the root directory of the application:

Repository: ESLint

For ESLint + TypeScript ESLint, with the new flat config eslint.config.js:

ESLint: JavaScript linting.

But what is a symbolic link exactly? It comes from programming and I often liken symbolic links to basic redirects but with greater stability. However, not every package needs a place in .bin. Packages like nodemon, webpack, gulp, eslint and create-vue are found in .bin because they need to be executed. On the other hand, packages like animate.css, swiper and express operate at the application layer, so you won't find them in .bin after installation. How does npm determine whether a package is executable or not? It's simple: by using the bin property in your package.json to specify the executable path. If your package is executable, you can set it accordingly. Let's take a look at prettier's package.json file

Eslint: It analyzes our code to quickly find problems. We will use the default setup provided by Vite.

A big part of my work revolves around JavaScript tooling, and as such it's important to keep an eye on the ecosystem and see where things are going. It's no secret that recently lots of projects are native-ying (??) parts of their codebase, or even rewriting them to native languages altogether. Esbuild is one of the first popular and successful examples of this, which was written in Go. Other examples are Rspack and Turbopack, which are both Rust-based alternatives to Webpack, powered by SWC ("Speedy Web Compiler"). There's also Rolldown, a Rust-based alternative to Rollup powered by OXC ("The JavaScript Oxidation Compiler"), but Rollup itself is also native-ying (??) parts of their codebase and recently started using SWC for parts of their codebase. And finally, there are Oxlint (powered by OXC) and Biome as Rust-based alternatives for Eslint and Prettier respectively.

Let's be honest - setting up tools for a new project can be a frustrating process. Especially when you want to jump straight to coding part. This is often the case with ESLint and Prettier, two popular tools in the JavaScript ecosystem that can sometimes interfere with each other when it comes to code formatting. Fortunately, there's a simple solution to this process, and it's called eslint-plugin-prettier.

Do you have the need to find and fix problems in your JavaScript? Then ESLint is for you. With over 120 million downloads each month, it's definitely one of the most popular projects out there. The latest version introduces a new configuration system, designed to simplify available configuration options. Old and deprecated rules have been removed, and a new configuration inspector has been added. Check out the blog for all the highlights, and a migration guide.

ESLint: A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.

Automating code checks with static code analysis allows us to enforce code styling effectively. By integrating tools into our workflow, we can identify errors at an early stage, while coding instead of blocking us at the end. For instance, flake8 checks Python code for style and errors, eslint performs similar checks for JavaScript, and prettier automatically formats code to maintain consistency.