How to add ESLint in Next.js ?
Last Updated :
26 May, 2023
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:
How to add ESLint in Next..js ?
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:
How to add ESLint in Next..js ?
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:
How to add ESLint in Next..js ?
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:
Share your thoughts in the comments
Please Login to comment...