You probably saw in one or two projects, aliases on typescript import statements, just like this:

So how can we achieve this kind of import on a NextJS project?

The latest versions of NextJS will have the 

You definitely saw the answer here, right?

I can show you an example of how to use it.

Thank you so much and I am looking forward to seeing you soon. 😉

And if you like content about Git, Linux, Productivity tips, Typescript, and Python please follow me 

Tutorial on using TypeScript aliases on import statements in NextJS projects.

NextJS Typescript Import Alias

Making a new project ready for development can be a little overwhelming, especially if you use React, Typescript, ESLint, and Prettier, but today I am going to help you set up your React project correctly in a simple way.

Usually, the problem is that every time you have to set up ESLint and Prettier you go to the web search for an article, and this article is probably not updated. Usually, they use a lot of plugins and non-default configurations.

We are going to use the basic configuration of ESLint and Prettier to have fewer headaches.

: used to create a ReactJS TypeScript project instead of JavaScript.

ESLint is a JavaScript linting open source project and is used to find problems and syntax issues in your code, it will help us find broken logic that would be found only in run time.

After installing the ESLint we have to initialize the config file:

Here we are going to answer some questions about our project:

Choose ‘To check syntax and find problems’ because later we are going to use Prettier to enforce code style as well.

Choose JavaScript modules mainly because ReactJS uses them.

Choose ‘Browser’ because ReactJS runs on the Browser.

Here you are free to choose any of the options, but I am going to use JSON as my format.

If you are using NPM then just select ‘Yes’, if not select ‘No’ then copy the packages and:

Right now the ESLint package created a .eslintrc file with the format you choose:

Before continuing we have to install TypeScript plugins related to ESLint and to do so:

if everything went well your eslintrc file should look something like this:

Let’s install prettier and then edit the eslint and prettier configuration files.

Prettier is a code style formatter, different from ESLint, Prettier only format the code style, and does not look for syntax problems.

max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style

 are some popular formatting rules in Prettier.

no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors

In this case, I prefer ESLint to search for problems and syntax errors and let the code style for prettier.

After installing you have to create the prettierc file:

At this point you have a blank .prettierrc file and a default eslintrc file, so the next step is to configure the eslintrc file.

If you are going to use or you intend to use Jest in your project add the next lines to your ‘env’:

To use prettier alongside with eslint you need to change the extends object:

The main part of ESLint is the rules objects. Here you can put any rule you think is good for your project and team.

If you want to learn more about ESLint rules you can check out 

To use the plugins we have installed, update the plugins object in the eslintrc file:

The last thing to set up in ESLint is the 

. Just add the settings key in the eslint configuration file.

Lastly, we are going to set up the .prettierrc file created at the begging of the article.

My basic configuration for prettierrc file is:

But if you want to learn more check out the 

Finally, we have to add the scripts in the package.json:

lint: will search for problems, but will not fix

lint fix: will search and try to fix the problems.

format: will call prettier to fix the code style.

At this point, you probably have a fully working ReactJS project with linting. If you encounter some error or problem don’t hesitate in commenting below.

And if you like content about Git, Linux, Productivity tips, Typescript, and Python please follow me on Medium 

If you find this article useful share it with your friends and save it for later.

Making a new project ready for development can be a little overwhelming, especially if you use React, Typescript, ESLint, and Prettier

ESLint + Prettier + Typescript and React in 2022

It has been a year since the day I started working on my actual job, and it was the first work that I need to use git, and from this day on I never stopped using it, it is just so amazing.

But one thing that frustrated me is that in some cases git commands can be very long or not intuitive. Also, some commands would show a lot of information that I did not want to see.

For example, the git status and git log commands would show consecutively something like this:

So I wonder if there is a better way of showing these pieces of information.

Let’s start with the simpler one which is 

, but first, we need to understand how to set git alias.

There are two ways of setting git alias, one of them is by commands in the terminal and another is by editing the 

 improvements with terminal commands would be:

But if you want to set the git alias with a text editor:

This command will open the default editor for git.

You can also open the ~/.gitconfig file with 

So with this new alias set, how can we use it?

Therefore with just a little bit of change in the 

 improvement, we will go a little bit forward and I will show you two types of an alias that I currently have.

This is my favorite of the two because it shows the HASH, Email, Date, and commit message.

You would be asking yourself what is the 

 command. Basically, this command demands an option that can be a placeholder, which is currently our option.

 placeholder stands for color, as you can see inside the parenthesis there is always a color name.

List of placeholders used in this command:

: Show to you which commit is the head of the local and origin.

: Show the subject of the commit message.

 alias, but it is a very good example of an alias because before I would need to write the full command and now I just need to write 

Explaining some of the git aliases that I have

 this means that the command next is Bash or Shell. With this, you can create functions and use operators like 

Where I work we use the staging and main as central branches, so every time I need to start working on something new I need to check out from one or another and this command helps me do this quickly.

This command deserves attention because it is one of the most used commands for me. Most of the time I commit some changes and think that everything is in place, but suddenly I discover that I forgot a console.log, commentaries, and so on.

Basically what he does is to add all changes to the last commit without changing the commit message.

Rename and save work together for me, the thing is that when you have changes they are not really saved and when you commit these changes they are now in a safer place. When working I use save to store information when I am going to leave for some time or stop working, but I always return and rename the last commit because you should never push a commit message 

Restore will simply uncommit the changes, but won’t throw away the changes.

Wipe I do not use a lot, but it is very useful. Wipe will add everything to a commit with a message of 

 and then reset to the commit before the wipe.

Then, if is not here, where can I find it? You can find typing 

And to add the commit content to your working branch:

As you can see git alias is very useful to short and to create new commands, the commands above are aliases that I personally use, but this should not prevent you from improving or creating your own git aliases.

I hope I could make you more productive with the git alias and understand better what it is, how to use it, and edit it.

https://gist.github.com/itsbetma/a350dca5eb20e07e4b90d7372b64da45

https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases

It has been a year from the day I started working on my actual job, and it was the first work that I need to use git, and from this day on…

Itsbetma

NextJS Typescript Import Alias

Going further

ESLint + Prettier + Typescript and React in 2022

NextJS Typescript Import Alias

Productivity with Git aliases