This is a short blog on setting up a project with NextJS, EsLint, prettier and husky.
Next.js is a React framework that gives you building blocks to create web applications.
EsLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
Prettier is an opinionated code formatter that supports many different programming languages, like JavaScript. JSON. JSX.
Husky improves your git commits and more 🐶 woof!
01 Setting up Nextjs with typescript
npx create-next-app [project-name] --typescript
this will setup nextjs project for you
02 Setting up Eslint in the project
eslint comes pre-setup through npx create-next-app we don't have to install eslint simply run the below command in your terminal
npm init @eslint/config
which will guide you through a series of configuration settings
a. How would you like to use ESLint?
- To check syntax only
- To check syntax and find problems
- To check syntax, find problems, and enforce code style
To check syntax, find problems, and enforce code style
since we not only want to find problems in our code we want to enforce a common code style (Airbnb)
b. What type of modules does your project use?
- JavaScript modules (import/export)
- CommonJS (require/exports)
- None of these
JavaScript modules (import/export)
Note JavaScript modules (import/export): The ES module format is the official standard format to package JavaScript code for reuse and most modern web browsers natively support the modules.
Note Node.js, however, supports the CommonJS module format by default. CommonJS modules-load using require(), and variables and functions export from a CommonJS module with module.exports.
c. Which framework does your project use?
- React
- Vue.js
- None of these
React
d. Does your project use TypeScript?
- yes/no
yes
e. Where does your code run?
- Browser
- Node
Browser
f. How would you like to define a style for your project?
- Use a popular style guide
- Answer questions about your style
Use a popular style guide
Since Airbnb is the most popular style guide and industry standard in most companies.
g. What format do you want your config file to be in?
- JavaScript
- YAML
- JSON
JSON
We will select JSON because it is preferred over other file formats
h. Would you like to install them now?
- No / Yes
Yes
i. Which package manager do you want to use?
- npm
- yarn
- pnpm
npm
03 Now let's Setup prettier
First lets install necessary packages for setting up prettier in our project
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
Then go to .eslintrc.json file and add following configurations to "extends" property and "plugins" property
NOTE The extends property value is either: a string that specifies a configuration(either a path to a config file, the name of a shareable config, eslint: recommended, or eslint: all ) or an array of strings where each additional configuration extends the preceding configurations.
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"next/core-web-vitals",
"airbnb",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {}
}
- Now let's create a local prettier configuration file
touch .prettierrc
- And then add the following configuration to the
.prettierrcfile.
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": false,
"trailingComma": "es5",
"printWidth": 80
}
Install prettier in your local code editor in my case I'm using vscode.
Then go to vscode settings and search forDefault Formatterchange it toPrettier-Code formatter.after that make sure
format on saveis turned on in your vscode settings this will format your code every time you save your file.
04. Now let's configure eslint rules to our liking
first, let's install the package for Airbnb typescript configuration
npm install eslint-config-airbnb-typescript --save-dev
- Then add configurations to the
.eslintrc.jsonfile
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"next/core-web-vitals",
"airbnb",
"airbnb-typescript",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {
// suppress errors for missing 'import React' in files
"react/react-in-jsx-scope": ["off"],
// gives warning if spread props getting passed to component ex. (...props)
"react/jsx-props-no-spreading": ["warn"],
// suppress errors for Function component is not a function declaration turning off allows us to use arrow functions
"react/function-component-definition": ["off"]
}
}
- Now add scripts in our
package.jsonfile
{
"name": "final",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"check-format": "prettier --check .",
"check-lint": "eslint . --ext ts --ext tsx --ext js",
"check-types": "tsc --pretty --noEmit",
"format": "prettier --write ."
},
"dependencies": {
"next": "12.1.6",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"@types/node": "17.0.40",
"@types/react": "18.0.12",
"@types/react-dom": "18.0.5",
"@typescript-eslint/eslint-plugin": "^5.27.0",
"@typescript-eslint/parser": "^5.27.0",
"eslint": "^8.17.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-config-next": "12.1.6",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.30.0",
"eslint-plugin-react-hooks": "^4.5.0",
"prettier": "^2.6.2",
"typescript": "4.7.3"
}
}
- Now let's add
.eslintignoreand.prettierignorefile at the root of our project
touch .eslintignore .prettierignore
- Then ignore the following files and folder in both files
/node_modules
next.config.js
.next
- Now run scripts to check if any error is being thrown
npm run format
npm run check-format && npm run check-lint
If all things went well no error should be thrown.
05. Now, let's set up husky in our project.
First, run the following command in terminal
npx husky-init && npm install
This should setup husky in our project
- Now add some configuration to our
pre-commitfile under.huskyfolder.
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo '🏗️👷 Styling, testing and building your project before committing'
# Check Prettier standards
npm run check-format ||
(
echo '🤢🤮🤢🤮
Yaaaaaccccccckkkkkkkkkk 🤢🤮🤢🤮
Prettier Check Failed. Please Run npm run format, add changes and try commit again.';
false;
)
# Check ESLint Standards
npm run check-lint ||
(
echo '😤🏀👋😤 Bla Bla Bla Bla 😤🏀👋😤
ESLint Check Failed. Make the required changes listed above, add changes and try to commit again.'
false;
)
# Check tsconfig standards
npm run check-types ||
(
echo '🤡😂❌🤡 Failed to check the types. 🤡😂❌🤡
Please Make the changes required above.'
false;
)
# If everything passes... Now we can commit
echo '🤔🤔🤔🤔... Alright.... Code looks good to me... Trying to build now. 🤔🤔🤔🤔'
npm run build ||
(
echo '❌👷🔨❌ Send Help Build has failed ❌👷🔨❌
Next build failed: View the errors above to see why.
'
false;
)
# If everything passes... Now we can commit
echo '✅✅✅✅ Yo you got this... I am committing this now. ✅✅✅✅'
- Now try to commit the following checks should be automatically done in our project before committing
git add .
git commit -m 'test'
If all went well you should be able to commit your changes to your file
Top comments (2)
Nice guide!
thanks man :)