How to add ESLint in Next.js ?
In this article, we are going through the steps to add ESLint to your Next.js project.
ESLint: ESLint is a JavaScript linter that is designed to help identify and correct problems in JavaScript code. ESLint is based on JSHint, but ESLint has more features and is more configurable. ESLint can be used to enforce a coding style, detect errors and potential problems, and help improve code quality.
Steps for Creating a Next.js Application including ESLint
Step 1: First install Nodejs on your computer, you can download it from NodeJS official website.
Step 2: Now open the terminal and navigate to the directory where you want to create your Next.js application.
Step3: After that, run the following command on the terminal to create the Next.js application.
npx create-next-app myapp --typescript --eslint
Here myapp is the name of my application you can change it if you want.
–typescript is a flag to set up the project in Typescript (programming language).
–eslint is a flag to add ESLint in the project.
Project Structure:
Step 4: Move inside the app that you created for that and run the following command on terminal
cd myapp
Step 5: Run the following command on the terminal
npm run dev
Step 6: Open the following file in your “index.js” from your project in any code editor and write the code for the desired output
As you can see a file named “.eslintrc.json” is created which means we have successfully added ESLint to our project.
Example 1:
Javascript
import React from 'react' ; export default function Home() { return ( <main className= "flex flex-col items-center justify-center h-screen" > <h1 className= "text-4xl font-bold text-blue-700 mb-6" >Hello world</h1> <p className= "text-lg text-gray-500" >my first app</p> <div className= "mt-6" > <a href= "#" className= "bg-blue-700 text-white py-2 px-4 rounded hover:bg-blue-800" > Button </a> </div> </main> ) } |
Output:
Example 2:
Javascript
import React from 'react' ; export default function Home() { return ( <main className= "flex flex-col items-center justify-center h-screen" > <h1 className= "text-4xl font-bold text-blue-700 mb-6" >Hello world</h1> <p className= "text-lg text-gray-500" > my first app </p> <div className= "mt-6" > <a href= "#" className= "bg-blue-700 text-white py-2 px-4 rounded hover:bg-blue-800" >Button</a> </div> </main> ) } |
Output:
Example 3: Using Eslint:
Javascript
import React from 'react' function MyComponent() { const unusedVariable = 'This variable is never used' return <div>Hello, world!</div> } export default MyComponent |
Output:
Contact Us