DEV Community: Tiago Vaccari

Project Patterns and Tools - Prettier

Tiago Vaccari — Thu, 03 Sep 2020 19:26:17 +0000

The last tool we are going to configure is Prettier.

Prettier is another tool to make our code format with the same standard for the whole team. It consist in makes your code as the same as the rest of your code. By using Prettier, your team will, or maybe not, skips all disagreements about spacing, semicolons, commas, etc, because Prettier will re-formatt the code as your configuration.

Before we begin the configuration, be aware you will need to remove Prettier - Code Formatter from your VSCode because it can cause some incompatibilities with our configuration.

Starting the configuration

Remember that, all these configuration will be the same for NodeJS, ReactJS and React Native.

We will start with the Prettier package installation by run the command below:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D

Three dependencies will be added to format the code and integrate Prettier with ESLint.

After that instalation, we have to change the files .eslintrc.json adding the lines below in to "extends":

"prettier/@typescript-eslint",
"plugin:prettier/recommended"

and we need to add "prettier" configuration in to "plugins" option:

"plugins": [
        "@typescript-eslint",
        "prettier"
    ]

For "rules" I'm gonna add one line to enable ESLint display all errors where Prettier can not lead the corrections.

"rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ],
        "prettier/prettier": "error"

So, the final file should be like this:

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ],
        "prettier/prettier": "error"
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
      }
}

After all those configurations, chances are you got some conflicts between ESLint and Prettier.

To sort this conflicts out we are going to create a file at the project's root named "prettier.config.js" and add the lines below:

module.export = {
    singleQuote: true,
    trailingComma: 'all',
    arrowParens: 'avoid',
}

Conclusion

Don't bother yourself by manually formatting your code. We know it takes time that can be better spent writing more code and also and can be different from your teammates.

Take advantage of the amazing modern tools out there and set up EditorConfig, ESLint and Prettier for your projects!

That's it, folks!

Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.
Say Hi 👋! on Twitter - Instagram - Facebook - LinkedIn

Project Patterns and Tools - ESLint

Tiago Vaccari — Fri, 28 Aug 2020 15:45:09 +0000

The next tool that help us to go further and keep our code well formatted are ESLint and today we are going to configure this tool to work with TypeScript.

Maybe, ESLint is the most important tool of those three tools (eslint, editorconfig and prettier) to keep our code "under control".

For example, semicolon is not required at the end of the line for JavaScript, also we can use quotation marks or double quotes, it depends on your taste.

With ESLint we can define what kind of format our team need to follow, helping to keep our code readable and avoiding conflicts when we are trying to merge those code.

Installation

First things first, so before we start, we need to install ESLint extension for VSCode.

eslint

We have to set up the option codeActionOnSave on VSCode if you want to format your files when you save the code, you will need to add the code below in the configuration.

Open VSCode's settings.json and add the configuration below:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
}

Then, we can install ESLint as a development dependency for our NodeJS project.

yarn add eslint -D

After the installation, we have to initialize eslint to add the configuration for our project.

yarn eslint --init

Now, we need to select the set up for our project, so I'm gonna select the following configuration as a example (you can select the options you want for your own project):

Steps to configure ESLint

- How would you like to use ESLint? > To check syntax, find problems and enforce code style
- What type of modules does your project use? > JavaScript modules (import/export)
- Which framework does your project use? > None of these (because we are configuring the backend project)
- Does your project use TypeScript? > Yes
- Where does your code run? (Use the space bar to unselect Browser and select Node) > Node
- How would you like to define a style for your project? > Use a popular style guide
- Which style guide do you want to follow? > Airbnb
- What format do you want your config file to be in? > JSON
- Would you like to install them now with npm? > No (In our case, because I'm using yarn, I will need to answer No and then, install the dependencies manually).

Now, we need to run the command below:

yarn add @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 @typescript-eslint/parser@latest -D

Don't forget to create the file .eslintignore and type the configuration below to ignore linting for some files that is not needed.

/*.js
node_modules
dist

Finally, we are going to configure the file .eslintrc.json created when we configured the ESLint initialization.

We need to add the line below inside of "extends" option:

"plugin:@typescript-eslint/recommended"

So, now we have to install one dependency to enable the Node's ability to understand "import" TypeScript.

For that, type the command below and hit enter:

yarn add eslint-import-resolver-typescript -D

and then, add the configuration below for .eslintrc.json file

"settings": {
    "import/resolver": {
      "typescript": {}
    }
  }

Inside "rules", add the configuration below to enable "import" from files type "tsx" without the extensions.

"import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ]

Our file should be like the file below:

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ]
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
      }
}

It's done!

To finish and apply all changes, we need to close and reopen VSCode at the root folder for the project, so we can verify if all changes is working as expected.

If you want, you can try to write a wrong code and ESLint should spot the error.

In the next post, I'm gonna configure Prettier for VSCode with ESLint.

That's it, folks!

Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.

Project Patterns and Tools - Configuring EditorConfig

Tiago Vaccari — Sat, 15 Aug 2020 20:40:39 +0000

Following the previous post, today we are going to configure EditorConfig on VSCode.

That tool can help us to change the code format settings for the IDE configuration.

But how does it work? EditorConfig is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.

Also, this plugin attemps to override user or workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required.

So, let's start to set it up.

The first thing we need to do is install the EditorConfig for VS Code extension.

When the installation has finished, we can right click on the file explorer and select the "Generate .editorconfig" option.

We will create a file named ".editorconfig" with the following content.

Editoconfig Content

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

That file contains the configuration we want to use to keep our code with the same format for our team.

We can find indent style, indent size, charset, insert final newline and a lot of different options.

Now, we are going to change the option trim_trailing_whitespace = false to trim_trailing_whitespace = true and add a new option like this end_of_line = lf.

trim_trailing_whitespace = true will remove any whitespace characters preceding newline characters.

end_of_line = lf will control how line breaks are represented.

As a result of our change the file should be like this now:

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = false
end_of_line = lf

Finally, to make sure our code uses the new format properly, we need to open the project's files and save them again.

That's it!

From now, our code will be formatted with this rules and we can use the same configuration for our team, doesn't matter if they are using VS Code or other IDEs. The only thing we need to do is configure EditorConfig for them using the same configuration file.

If you would like to go deep in EditorConfig check it out at editorconfig.org.

In the next post, I'm going to show how to configure ESLint for VSCode to make our code and life a little bit better.

That's it, folks!

Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.

Project Patterns and Tools

Tiago Vaccari — Sun, 02 Aug 2020 21:01:40 +0000

Did you find yourself stuck in a project simply because the patterns used between your colleagues is different? Probably yes!

Actually, to keep the code patterns and conventions for all companies and development teams is one of the most challenge thing they are facing.
Why does it happens? In simple term, because everyone working on this industry learned to program differently, they had different background, they have their own preferences and habits.

Because that, subjects as clean code, SOLID principles, KISS principles and so on are trends, but is there a way to try to automate or at least keep the code under some patterns defined previously?

In that post I will explain about some tools we can use to help us to keep our code under control and make our life easier when our projects is becoming bigger and more developers is join the project.

For that purpose we can use three tools to keep our code with the same standard. Those tools are EditorConfig, ESLint and Prettier.

EditorConfig

EditorConfig is a tool to help development teams work with the same pattern, doesn't matter if they are working with different IDE's as code editor.

Can you imagine if a team is working with different IDE's as VSCode, Atom, Sublime or other one? Probably they are working with different text configuration as well, so in the end of the day, we will get every sort of inconsistency in our code when we are trying to merge our code and also, when we are trying to build it.

EditorConfig can help us by given a set of configurations as the type of indentation, which charset we need to use, the end of line and so on.

If would you like to go deep in EditorConfig check it out at editorconfig.org.

ESLint

I can say ESlint maybe is one of the most important tool to automate code convention. We can use it for projects using NodeJS, ReactJS, React Native and more.

For example, ";" is optional for Javascript at the end of line and that is not a problem to run the code. But when we are creating an object, we can use "," at the last item of the object but it is optional.

With ESLint we can keep just one pattern for our team.

You can find out more at eslint.org.

Prettier

Finally, we have Prettier! That tool is used to customize our code format. It means Prettier will remove all original styling code and ensures that all outputted code conforms to a consistent style.

Prettier enforces a consistent code style across our entire codebase by parsing it away and re-printing the parser with its own rules that take the maximum line length into account, wrapping code when necessary.

If you want to get more information about it, check it out at prettier.io.

In the next post, I will show how to configure EditorConfig for VSCode and start to keep our code under control.

That's it, folks!

Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.