Dylan Vassallo

Posted on May 31, 2021

Getting Started with Next.js - VSCode, ESLint and Prettier

#vscode #nextjs #javascript #npm

Getting Started with Next.js

"Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed." - as stated on Next.js home page.

Why use Next.js?

Setting up Next.js

Note: We will be using Visual Studio Code as a code editor, but feel free to use any code editor you are most comfortable with when writing code.

First we need to install some prerequisites:

Node.js
yarn - Package Manager,

You can also use npm as a package manager. In this guide, we will make use of yarn.

We then execute the following command to create a new Next.js app.

# Replace $PROJECT with your project name
yarn create next-app $PROJECT
# Or using the TypeScript flag for a TypeScript project
yarn create next-app --typescript $PROJECTNAME

The previous command will create a basic project. In this newly created project, you will find a file called package.json. This file consists of metadata information related to the project, for example; scripts, version and dependencies.

{
    "name": "$PROJECT",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev", 
        "build": "next build",
        "start": "next start"
    },
    "dependencies": {
        "next": "10.2.3",
        "react": "17.0.2",
        "react-dom": "17.0.2"
    }
}

The scripts section consists of three different scripts, which when we execute using yarn will:

yarn dev : Run the application locally
yarn build : Build the application for production
yarn start : Starts the production version of the application

Liniting using ESLint

We will be using ESLint as a linter. The main reasons for using this tool is that;

It helps us to catch bugs (by statistically analysing code)
It helps us to write code in a consistent style

Installing ESLint extenstion on VSCode

Go to the extensions tab (or use CTRL+SHIFT+X), type in ‘ESLint’ and click install.

Setting up ESLint

To set up ESLint, we need to execute the following command (make sure you're in the root location of the project).

# This will add eslint as a dev dependency. 
# If open package.json you will see this new dev dependency added 
# to the project (once executed). 
yarn add eslint --dev

The next step is to configure our linter. We need to run the following command to be able to create a new configuration file for ESLint.

yarn run eslint --init

After executing the previous command, you will be prompted with a set of questions. In our set up we selected the following:

How would you like to use ESLint? To check syntax, find problems, and enforce code style
What types of modules does your project use? Javascript modules (import/export)
Which framework does your project use? React
Does your project use TypeScript? No
Where does your code run? Browser
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 (In this guide we use this style as it is our personal preference)
What format do you want your config file to be in? JSON
When prompted to install dependencies select ‘yes’.

After answering all the questions, a new file will be created called .eslintrc.json. This file holds the configuration for our linter. It is worth noting that we can also specify files that should be ignored by ESLint. This could be done by creating a .eslintignore file. In our projects, we usually ignore the following directories:

# .estlintignore file
.next
dist
node_modules/

See Airbnb JavaScript styling guide and the ESLint configuration docs for more information.

Well done, we managed to set up ESLint using Airbnb’s JavaScript styling guide to our newly created Next.js project. You could have used another popular styling guide like Google, Standard, or even create your own to your liking.

Formatting using Prettier

We will be using Prettier as a code formatter. The main reason for using a code formatter is that it helps us maintain consistency throughout our codebase.

Installing Prettier extenstion on VSCode

Go to the extensions tab (or use CTRL+SHIFT+X), type in ‘Prettier’ and click install.

Make sure to set "editor.formatOnSave": true into your user settings in VSCode to autoformat code when saving a file (CTRL+SHIFT+P -> Open Settings (JSON) -> Paste Configuration).

Setting up Prettier

To install prettier to our application, we need to execute the following command:

yarn add --dev --exact prettier

Next up is to create an empty configuration file for prettier called .prettierrc.json. The one shown below is the default configuration we mainly use for our apps, but feel free to set up your own rules.

{
    "singleQuote": true, # Use single quotes instead of double quotes
    "tabWidth": 2,       # Number of spaces per indentation level
    "semi": true         # Print semicolons
}

Now since some prettier configs may conflict with ESLint, we need to turn off conflicting rules. This can easily be done by adding eslint-config-prettier:

yarn add --dev eslint-config-prettier

Then, add "prettier" to the "extends" array in your .eslintrc.json file. Make sure to put it last, so it gets the chance to override other configs. The file should then look like the one below:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["plugin:react/recommended", "airbnb", "prettier"],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react"],
    "rules": {}
}

Similar to the previous step when configuring ESLint, we may wish to ignore files from being “prettified” in our app. To do so, create a new file called .prettierignore.

It is normally advised to base the .prettierignore on .gitignore and .eslintignore.

Well done, we managed to set up Prettier to our newly created Next.js project to help us maintain consistency throughout our codebase.

Conclusion

If you made use of Airbnb’s styling guide, you may notice that some JavaScript files which were created when we executed the create-next-app command, are highlighted with errors. This is because the code generated by that command does not follow Airbnb’s styling guide conventions. So how do we fix these errors?

Prop spreading is forbidden react/jsx-props-no-spreading

Explicitly state what props are to be received by the component.
JSX not allowed in files with extension '.js' react/jsx-filename-extension

Change file from '.js' to '.jsx'
'React' must be in scope when using JSX react/react-in-jsx-scope

Add React import to the file import React from 'react';
Expected indentation of 2 spaces but found 4 indent:

If you followed the previous steps when configuring the prettier extension, save the file and it will auto-format the code. This issue will be solved, as we set the "tabWidth:2" in .prettierrc.json.

As stated previously, see the Airbnb styling guide and react specific linting rules, to better understand the errors outputted by the linter. You may also want to disable specific rules which are not to your liking or do not follow your coding standards.

Happy Coding! Feel free to leave any feedback.