How to Set Up VS Code for Next.js Development — App Router, TypeScript, Tailwind CSS, ESLint, Prettier

Simple boilerplate set up to jumpstart your Next.js app development.

Prerequisites

Before you begin, ensure you have the following software installed:

1. Node.js 16.8 or later.
2. macOS, Windows (including WSL), and Linux are supported.
3. VS Code
4. Prettier VS Code extension
5. VS Code extension to fold classes for code readability with Tailwind CSS (Optional)

Steps

1. Create new Next.js app.

npx create-next-app@latest

2. You’ll see the following prompts. These are my preferences.

# Terminal
What is your project named? <project-dir>
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No

3. Move to project dir.

cd <project-dir>

4. Set up project specific VS Code settings.

mkdir -p .vscode && echo '{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }' > .vscode/settings.json

5. Prevent Prettier from conflicting with ESLint rules.

npm i -D eslint-config-prettier
echo '{ "extends": ["next/core-web-vitals", "prettier"] }' > .eslintrc.json

6. Ignore large files from being prettified.

echo '/node_modules\n/.next/' > .prettierignore

7. Add Taiwind CSS Prettier plugin to sort classes.

npm install -D prettier prettier-plugin-tailwindcss
echo '{ "plugins": ["prettier-plugin-tailwindcss"], "pluginSearchDirs": false }' > .prettierrc.json

8. Reload VS Code to ensure prettier-plugin-tailwindcss plugin works.

9. Start development server.

npm run dev

Notes

1. This tutorial automatically sets up Next.js’ base ESLint configuration along with a stricter Core Web Vitals rule-set.

Resources

1. Getting Started: Installation | Next.js