How to Set Up VS Code for Next.js Development — App Router, TypeScript, SASS, 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

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? No
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. Install SASS as a dev dependency.

npm i -D sass

8. 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
2. Configuring: ESLint | Next.js (nextjs.org)
3. Styling: Sass | Next.js (nextjs.org)