![]() Generally each config sources has at least one config item - the root content of configs. overrides and env) in the order of ascending priority. babelrc is overwritten by programmatic options.įor each config source, Babel prints applicable config items (e.g. The root package.json defines the location of the workspaces eslint-config and prettier-config.In other words, is overwritten by. The folder structure of the npm project looks like this. This article does not explain how npm workspaces for monorepos work, but if you’re interested in that, you can follow along my in-detail guide. Therefore, I’m using a monorepo project to facilitate individual publishing of the packages, but it is by no means required to use a monorepo setup. I aim to provide two npm packages to source out ESLint and Prettier configurations into individual npm packages. This configuration deactivates all the formatting rules of ESLint and makes sure that Prettier is used for code beautifying. The ESLint package is, on the one hand, the foundation for this article, as it contains my preferred ESLint configurations that I’ve used in all my React projects for a long time. React project: An example React project that makes use of the shared ESLint ( and Prettier ( packages.The Prettier package demonstrates moving adjustments of the default setup into a shared library (in our case, we change the default double quotes to single quotes) Shared ESLint and Prettier library: This is an npm workspaces project with two packages, one for each ESLint and Prettier configuration.To follow along, take a look the following GitHub projects: Overview of the ESLint and Prettier setup Install custom ESLint and Prettier packages.Using shared libraries in React projects.Shared Prettier configuration ( The package-json.Shared ESLint configuration ( The package.json.Overview of the ESLint and Prettier setup.In this post, we’ll talk about how to bundle your ESLint and Prettier configs for easier use across projects through the following sections: In addition, you can add or override rules, or add configurations that are project-specific. With this approach, you only have to make changes in a single place, publish a new version, and update the dependency version in your projects. When it comes to reducing the amount you have to copy with ESLint and Prettier configs, bundling them in your own custom npm package saves a lot of time and effort. Duplicated code (or other information) is considered an anti-pattern and should be refactored to a unique representation. This is not a DRY approach, which essentially means that every piece of information should have a single source of truth. If you want (or need) to change your rule set regularly, you have to touch all projects and make manually sure that they do not diverge from each other. With each new project, this approach can increasingly contribute to a maintenance problem. ![]() Sure, using the same handy ESLint plugins and configurations is good for consistency, but you have to copy and paste your dependencies from your package.json. If you work on multiple projects, you might end up using the same ESLint and Prettier settings in each of them. Reduce maintenance effort with shared ESLint and Prettier configs My fire for web development still blazes. Sebastian Weber Follow Frontend developer from Germany.
0 Comments
Leave a Reply. |