Blog
![Take your workflow to the next level with ESLint fix on save](https://react-japan.dev/assets/blog/eslint-fix-on-save.jpg)
Take your workflow to the next level with ESLint fix on save
Prettier, ESLint, and Stylelint are amazing tools. When used together and fully configured, they dramatically improve the speed and efficiency that you and everyone on your team write code, improve the overall quality of code, reduce bugs, make code reviews quicker, and empower your entire team to focus on what really matters.
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)
![ESLint - Foundation](https://react-japan.dev/assets/blog/eslint-foundation.jpg)
ESLint - Foundation
The following are my recommendations for ESLint, Prettier, Stylelint, etc. These are the plugins with rulesets (with some customization) that will form the foundation of your ESLint setup.
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)
![ESLint - Sorting](https://react-japan.dev/assets/blog/eslint-sorting.jpg)
ESLint - Sorting
The sort order of imports, props, object keys, etc. is entirely subjective and even your own opinion about the best order in a particular context is subject to change over time. Enforcing alphanumeric sorting will keep your code organized and easier to read for everyone on your team.
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)
![ESLint - Situational rules](https://react-japan.dev/assets/blog/eslint-situational-rules.jpg)
ESLint - Situational rules
These ESLint rules are situational, depending on the tools you are using.
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)
![ESLint - Opinionated rules](https://react-japan.dev/assets/blog/eslint-opinionated-rules.jpg)
ESLint - Opinionated rules
These are rules which I did not include in the Foundation because they’re more opinionated. I’ll explain why I use them. Feel free to use them or not.
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)
![Localized link tags for SEO in Remix](https://react-japan.dev/assets/blog/localized-link-tags-for-seo-in-remix.jpg)
Localized link tags for SEO in Remix
There are many aspects to building a site with content localized into multiple languages. To optimize SEO, your page needs link elements that point to the alternate localized versions. The solution is to use Remix’s meta function.
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)
![Empathetic Coding - Button Component](https://react-japan.dev/assets/blog/empathetic-coding-button-component.png)
Empathetic Coding - Button Component
In this article, we’ll be creating a Button component from the ground up using an empathetic approach.
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)
![Empathetic Coding](https://react-japan.dev/assets/blog/empathetic-coding.jpg)
Empathetic Coding
Soft skills are often mentioned in contrast to programming skills. However, soft skills can also be applied to the “hard skills” of programming by following a philosophy called "empathetic coding".
![Steven Sacks](https://react-japan.dev/authors/steven.jpg)