تكوين رمز VS

كيفية إعداد VS Code من الصفر إلى أداة مثالية لتطوير JavaScript

حصلت مؤخرًا على جهاز Mac جديد (جهاز MacBook Air) واضطررت إلى تثبيت رمز VS جديد ، لذلك استغرقت وقتًا لتوثيق ما فعلته لجعل تجربة الترميز الخاصة بي معادلة لجهاز MacBook Pro القديم ، والذي استمر 9 سنين.

انظر بلديمقدمة VS Codeآخر أيضا

هذا ما فعلته:

  1. أنا ركبتكود فيراوقم بتعيينها كعائلة الخطوط الخاصة بي
  2. لقد قمت بتعيين Tab Size على 2 (هذا هو ديني). المساحات. 2 مسافات.
  3. أضفت**/node_modulesإلى "الملفات المستبعدة" لمنعها من الظهور في قائمة الملفات
  4. لقد مكنتتنسيق على لصقوتنسيق على حفظ
  5. ممكنوصلات الخط
  6. تم تعطيل الخريطة المصغرة
  7. ممكنتقليم مسافة بيضاء زائدة
  8. لقد قمت بتثبيتالبرنامج المساعد Sublime Text Keymap. يعطيcmd-K cmd-Bاختصار لإظهار / إخفاء الشريط الجانبي ،cmd-Wلإغلاق ملف والمزيد.

بعد ذلك قمت بتثبيت بعض السمات. ذلك يعتمد على ذوقك. أحب التبديل بين

  • موضوع Palenight
  • نوسترومو
  • بومة الليل
  • آيو

بعد ذلك قمت بتثبيت هذه الملحقات:

  • أجمل
  • IntelliSense لأسماء فئات CSS
  • النية 4 إلى 2
  • ESLint
  • إجراء مكرر
  • Bracket Pair Colorizer 2
  • بابلES6 / ES7
  • رد فعل ES7 /إعادة/GraphQL/ React-Native snippets
  • تسليط الضوء على TODO

هذه مجموعة جيدة لبدء العمل مع JavaScript و React.

هذه هي إعدادات المستخدم الخاصة بي JSON بعد تكوين الكل حسب ذوقي واحتياجاتي:

{
    "editor.fontFamily": "Fira Code",
    "editor.tabSize": 2,
    "editor.wordWrap": "bounded",
    "files.exclude": {
        "**/node_modules": true
    },
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.minimap.enabled": false,
    "workbench.colorTheme": "Tomorrow Night Blue",
    "files.trimTrailingWhitespace": true,
    "workbench.activityBar.visible": false,
    "window.zoomLevel": 2,
    "editor.cursorBlinking": "smooth",
    "editor.fontLigatures": true,
    "prettier.jsxBracketSameLine": true,
    "prettier.jsxSingleQuote": true,
    "prettier.singleQuote": true,
    "prettier.semi": false,
    "[markdown]": {
        "editor.renderWhitespace": "all",
        "editor.acceptSuggestionOnEnter": "off",
        "editor.parameterHints.enabled": false,
        "editor.quickSuggestions": false,
        "editor.snippetSuggestions": "none",
    }
}

ال[markdown]يضيف قسم Markdown التكوين الخاص. في هذه الحالة ، أقوم بتعطيل جميع النوافذ المنبثقة التي تشتت انتباهي أثناء الكتابة ، والتي تكون مفيدة بخلاف ذلك عند الترميز.

هذا هو.

راجع أيضًاإعداد VS Code لتطوير React!

ترميز سعيد!


المزيد من دروس devtools: