Repository files navigation

Techmmunity - Style Guide

In this package, you can find theTechmmunity Style Guide. We try to keep a clean and consistent code style, with modern features and using best practices.

This package may not be updated so often, but it not means that it has been abandoned. We do the config in a way to (almost) never have to touch it again, and we only update the package to add new features, what may don't need to happen so often.

[![Style Guide: Techmmunity](https://img.shields.io/badge/style%20guide-Techmmunity-01d2ce?style=plastic)](https://github.com/techmmunity/eslint-config)

[![Style Guide: Techmmunity](https://img.shields.io/badge/style%20guide-Techmmunity-01d2ce?style=flat)](https://github.com/techmmunity/eslint-config)

[![Style Guide: Techmmunity](https://img.shields.io/badge/style%20guide-Techmmunity-01d2ce?style=square)](https://github.com/techmmunity/eslint-config)

[![Style Guide: Techmmunity](https://img.shields.io/badge/style%20guide-TECHMMUNITY-01d2ce?style=for-the-badge)](https://github.com/techmmunity/eslint-config)

• Best practices focused in modern features and principles (SOLID, DRY, KISS, Clean Code)
• Constant maintenance
• Ready-to-go: You don't need any extra config
• Bye bye prettier: You don't need to be using the prettier extension for VSCode if you have this baby on your project
• Direct support: Join our discord community and get your questions answered

yarn add -D @techmmunity/eslint-config eslint prettier

Obs: If you are usingVSCode, you may need/want to do someextra steps.

1 - Create a.eslintrc.json file in the root of your project

2 - Put the following content inside the file:

{"root":true,"extends":"@techmmunity/eslint-config"}

3 - Restart the VSCode, and it's done!

We provide anexample repository, you can give a look at it, orjoin our discord community and make some questions!

Alert: After any change ateslintrc.json file, you must restart VSCode.

Alert: Thecommon module mustALWAYS be extend, and mustALWAYS be the fist one.

This repository contains the best practices divided by libs, frameworks and tools. The currently existent modules are:

{"root":true,"extends":"@techmmunity/eslint-config/common"}

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/jest"]}

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/nextjs"]}

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/react"]}

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/ts-nextjs"]}

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/ts-react"]}

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/typescript"]}

You can safely combine some modules, like this:

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/typescript","@techmmunity/eslint-config/jest"]}

But in some cases, where that module is already imported, it will cause a conflict, like in this case:

{"root":true,"extends": ["@techmmunity/eslint-config/common",// The common module always should be extended!"@techmmunity/eslint-config/nextjs"]}

If you are using the VSCode Prettier Extension, you need to disable it, because this package already configs the prettier and uses it under the hood.

To disable Prettier, you just need to add this to your vscode configs:

{"[javascript]": {"editor.defaultFormatter":null},"[typescript]": {"editor.defaultFormatter":null},"[javascriptreact]": {"editor.defaultFormatter":null},"[typescriptreact]": {"editor.defaultFormatter":null}}

You can access this configs by pressingCtrl + Shift + P and tippingPreferences: Open Settings (JSON).

• UseCtrl + Shift + X
• Search fordbaeumer.vscode-eslint
• Install the extension

• UseCtrl + Shift + P
• Search forPreferences: Open Settings (JSON)
• Click in it
• Add this to the JSON:

// Make ESLint fix all the things that he can on save (like prettier formatting)"editor.codeActionsOnSave": {"source.fixAll.eslint":true},

To test this package:

1. If you are testing and making chances, you may need runyarn unlink, but for your first time, you can ignore this
2. Runyarn lk
3. Go to a big project and runyarn link @techmmunity/eslint-config
4. And it's done! Just give a look at the project and see if everything is working like you want.

Tip: You can usenpx eslint . to lint the project automatically