انتقل إلى المحتوى الرئيسي

التنسيق التلقائي للكود في Cursor

تلميح

يوفر Cursor إمكانيات قوية لتنسيق الكود تساعد في الحفاظ على نمط متناسق للكود عبر مشاريعك.

إعداد أدوات التنسيق​

أداة التنسيق المدمجة​

يأتي Cursor مع أداة تنسيق مدمجة تدعم لغات متعددة. للاستخدام:

  1. افتح لوحة الأوامر (Ctrl/Cmd + Shift + P)
  2. اكتب "Format Document"
  3. اضغط Enter

أدوات التنسيق الشائعة​

# تثبيت Prettier
npm install --save-dev prettier

# إنشاء ملف التكوين
echo {} > .prettierrc.json

ملفات التكوين​

تكوين Prettier​

.prettierrc.json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

تكوين ESLint​

.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

التنسيق عند الحفظ​

تفعيل التنسيق التلقائي​

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

إعدادات خاصة باللغة​

{
  "[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.python"
  },
  "[java]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "redhat.java"
  }
}

اختصارات لوحة المفاتيح​

اختصارات التنسيق الافتراضية:

العمليةWindows/LinuxmacOS
تنسيق المستندShift + Alt + FShift + Option + F
تنسيق التحديدCtrl + K Ctrl + FCmd + K Cmd + F

التكوين المتقدم​

تجاهل الملفات​

.prettierignore
# مخرجات البناء
dist/
build/

# التبعيات
node_modules/

# الملفات المولدة
*.generated.*

تكامل ESLint​

.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

قواعد التنسيق المخصصة​

فرض نمط الكود​

.prettierrc.json
{
  "overrides": [
    {
      "files": "*.component.ts",
      "options": {
        "printWidth": 120,
        "singleQuote": true
      }
    },
    {
      "files": "*.spec.ts",
      "options": {
        "printWidth": 80,
        "semi": true
      }
    }
  ]
}

قواعد خاصة بالمشروع​

.editorconfig
root = true

[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = space
indent_size = 2

[*.{js,ts}]
quote_type = single

[*.py]
indent_size = 4

استكشاف الأخطاء وإصلاحها​

المشاكل الشائعة​

  1. التنسيق لا يعمل

    • تحقق من تثبيت أداة التنسيق
    • تحقق من ملفات التكوين
    • تأكد من أن الملف غير متجاهل

  2. تعارضات بين الأدوات

    .vscode/settings.json
    {
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.format.enable": false
    }

  3. مشاكل الأداء

    {
      "editor.formatOnSaveTimeout": 5000,
      "editor.formatOnPaste": false
    }

أفضل الممارسات​

1. التحكم في الإصدار​

.gitignore
# لا تتجاهل ملفات تكوين التنسيق
!.prettierrc
!.eslintrc
!.editorconfig

# تجاهل ملفات الذاكرة المؤقتة
.prettier-cache
.eslintcache

2. تناسق الفريق​

إنشاء تكوين مشترك:

.vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

3. خطافات ما قبل الالتزام​

package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

تكامل IDE​

اختصارات مخصصة​

keybindings.json
[
  {
    "key": "ctrl+shift+i",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider"
  }
]

إعدادات مساحة العمل​

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true
}
تلميح

تذكر أن تقوم بالالتزام بملفات تكوين التنسيق الخاصة بك لضمان تناسق التنسيق عبر فريقك!

الموارد ذات الصلة​