Skip to main content

Configs

Prettier​

npm install --save-dev --save-exact prettier prettier-plugin-tailwindcss
.prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindFunctions": ["clsx", "cn", "cva"],
  "overrides": [
    {
      "files": ["framework/saleor/**/*"],
      "options": {
        "printWidth": 120
      }
    }
  ]
}

Eslint​

Ở .eslintrc.js: extends dùng các config-name dc lấy từ các eslint-config-<config-name> trong file package.json

Sự khác nhau giữa extends và plugins: plugins phải tự add rules vào, extends là tổng hợp các configs sẵn.

npm i eslint eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier -D
npm init @eslint/config

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser -D
npm i eslint-config-next -D

tsconfig.json (or jsconfig.json)​

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".", // hoặc "src", depends on project structure
    "paths": {
      // Cách 1: @/components/...; @/lib/...
      "@/*": ["*"],
      // Cách 2: @components/...; @lib/...
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["src/stories/**/*"] /* Exclude stories from build */
}

Tailwind​

tailwind.config.js​

module.exports = {
  theme: {
    extend: {
      screens: {
        '2xl': '1440px', // Replace the value of `2xl`
        '3xl': '1600px', // Adds a new `3xl:` screen variant
      },
      // These values are inherited by the padding, margin, width, height, maxHeight, flex-basis, gap, inset, space, translate, scrollMargin, scrollPadding, and textIndent core plugins.
      spacing: {
        px: '1px',
        18: '4.5rem',
      },
      fontSize: {
        base: ['16px', '20px'], // font size 16px & line height 20px
      },
    },
    // No `extend`: All default configuration for that key will be overwritten, e.g. in this case no more `text-red-500`...
    colors: {
      primary: {
        DEFAULT: '#FF5A5F',
        500: '#F47920',
        900: '#FEE6D3',
      },
    },
  },
}

index.css​

Order: base → components → utilities → Our custom CSS.
The reason to use @layer is that we can use modifiers e.g. dark, responsive like lg, hover,...

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1,
  .h1 {
    @apply text-[40px] -tracking-[0.03em] lg:text-[64px] lg:leading-[72px];
  }
}

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-600;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
}

.our-layout {
  padding-left: max(24px, calc((100vw - 1152px) / 2));
  padding-right: max(24px, calc((100vw - 1152px) / 2));
}

VSCode​

{
  ,"editor.fontFamily": "monolisa",
  "editor.fontWeight": "400",
  "editor.fontSize": 12,
  "editor.lineHeight": 1.4
}

Node version manager​

nvm install 14
nvm use 14.19.3
nvm list
nvm use newest
node -v

Update all dependencies​

npm i -g npm-check-updates
ncu -i --format group --target minor

# "react-..."
ncu -i --format group react-*

Install beta (or alpha, rc) version​

npm view package-name dist-tags // { latest: '1.0.0', beta: '1.0.1-beta.0',... }
package.json
{
  "dependencies": {
    "package-name": "beta"
  }
}

npm, npx, yarn​

  • package.json: ~1.2.3 < 1.3.0 || ^1.2.3 < 2.0.0
  • npm i / npm i -g: Project Dependencies / Global Dependencies.
  • npm i [--save-dev / -D]: Development Only (devDependencies) → Không có trong Production.
  • npx: Chỉ execute chứ ko cài → Dùng cho các lib chỉ chạy 1 lần trong vòng đời dự án như create-react-app.
  • yarn: Chạy song song + cached so với Chạy tuần tự + ko cached của npm.

Husky & lint-staged​

npm install husky --save-dev
npm set-script prepare "husky install"
npm run prepare
npx husky add .husky/pre-commit "npx --no-install lint-staged"
git add .husky/pre-commit

npm install --save-dev lint-staged