Next.js base project setup
por Inna Koss
1. .eslintrc
1.1. add plugin name if you want to enable specifil rules manually { "plugins": ["tailwindcss"], "rules": { "tailwindcss/classnames-order": "warn", "tailwindcss/no-custom-classname": "off" } }
1.2. to use default best practices add /reccomended in
2. create project: npx create-next-app@latest
2.1. be careful with plugins you add on some of them might be incompatible
3. eslint
3.1. comes already installed in project
3.1.1. for comprehensive collection of eslint rules install @typescript-eslint/eslint-plugin
3.1.1.1. add it to the extends section of .eslintrc.json
3.2. execute 'yarn eslint .' to see linting errors
3.3. to display eslint errors in VS Code plugin needed 'ESLint Plugin'
3.4. to autocorrect eslint errors in VS Code upon saving, create .vscode/settings.json
3.5. to verify vscode settings were set add rule to the settings.json and try to write incorrect code, then save and see
4. prettier
4.1. needs to be installed 'prettier' and ' eslint-config-prettier' to avoid conflict with eslint rules
4.2. create settings file .prettierrc.json
4.3. add 'prettier' to the .eslintrc.json file 'extends' section
4.4. to format our ode automatically based on our prettier configuration file when we save the file, install VS Code Prettier plugin
4.5. to format on save add "editor.formatOnSave": true and "editor.defaultFormatter": "esbenp.prettier-vscode" to .vscode/settings.json
5. how to
5.1. add Prettier: yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss
5.2. add TypeScript support for ESLint: yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
6. tailwind css
6.1. postcss (by default)
6.1.1. transforms tailwindcss classes to css
6.2. autoprefixer?
6.2.1. support older browsers
7. plugins
7.1. prettier
7.2. prettier-plugin-tailwindcss
7.2.1. - prettier plugin for tailwindcss - automatically sorts tailwindcss classes (recommended class order)
7.2.1.1. should not be included into .prettierrc.json ✅ not eslint.config.mjs ❌
7.3. eslint-plugin-prettier
7.3.1. runs Prettier as an ESLint rule.
7.4. eslint-config-prettier
7.4.1. disables ESLint rules that conflict with Prettier formatting.
7.5. eslint-plugin-tailwindcss
7.5.1. add linting rules for Tailwind
7.6. eslint-config-next (by default)
7.6.1. includes rules from: - eslint-plugin-react - eslint-plugin-react-hooks - eslint-plugin-next
7.7. typescript-eslint/eslint-plugin
7.7.1. add rules for TypeScript (ESLint by deafult designed for JavaScript)