כיצד להגדיר VSCode לשיפור הפרודוקטיביות שלך

עורכי הקוד התפתחו עם השנים. לפני כמה שנים לא היה קוד Visual Studio (VS Code). ככל הנראה השתמשת בטקסט נשגב, אטום, סוגר וכו '. אולם עם שחרורו של קוד VS הוא הפך לעורך הקוד המועדף על רוב המפתחים.

למה קוד VS?

מפתחים אוהבים את זה כי

• זה ניתן להתאמה אישית
• ניפוי באגים קל
• אמט
• הרחבות
• שילוב גיט
• מסוף משולב
• אינטליגנציה
• נושאים ועוד ...

כעת, לאחר שראית את היתרונות של שימוש בקוד VS, מאמר זה יכסה את הגדרת קוד VS והרחבות הדרושות בעת שימוש בקוד VS לצורך פרודוקטיביות מרבית.

מָסוֹף

אתה יכול להגדיר את המסוף שלך לשימוש ב- iTerm2 ו- ZSh ולהגדיר את מסוף ה- VS Code שלך ​​לשימוש בו.

לאחר הגדרת התצורה של Zsh, הפעל את המסוף המשולב VS Code Terminal > New Terminaland והפעל את הפקודה

source ~/.zshrc

אוֹ

. ~/.zshrc

לביצוע התוכן של קובץ התצורה .zshrc במעטפת.

גוֹפָן

FiraCode נראה מגניב בגלל התמיכה בקשירות. הורד והתקן את FiraCode ואז הוסף אותו settings.jsonלקובץ שלך .

"editor.fontFamily": "Fira Code","editor.fontLigatures": true,

הפעלה משורת הפקודה

השקת קוד VS מהטרמינל נראית מגניבה. לשם כך, לחץ על CMD + SHIFT + P, הקלד פקודת מעטפת ובחר התקן פקודת קוד בנתיב . לאחר מכן, נווט לכל פרויקט מהטרמינל והקלד code .מהספריה להפעלת הפרויקט באמצעות קוד VS.

תְצוּרָה

תצורות קוד קוד VS שאינן ספציפיות למרחב עבודה ממוקמות בהגדרות.json. אתה יכול להגדיר את קוד VS כך שיתאים להעדפותיך.

להפעלת ההגדרות.json, לחץ על

CMD + ,

העתק והדבק את הקוד למטה בתוך הקובץ settings.json:

{ "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": true, "editor.wordWrap": "bounded", "editor.trimAutoWhitespace": true, "editor.fontFamily": "Fira Code", "editor.fontLigatures": true, "editor.fontSize": 14, "editor.formatOnSave": true, "files.autoSave": "onFocusChange", "emmet.syntaxProfiles": { "javascript": "jsx" }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact" ], "javascript.validate.enable": true, "git.enableSmartCommit": true, "files.trimTrailingWhitespace": true, "editor.tabSize": 2, "gitlens.historyExplorer.enabled": true, "diffEditor.ignoreTrimWhitespace": false, "workbench.sideBar.location": "right", "explorer.confirmDelete": false, "javascript.updateImportsOnFileMove.enabled": "always",}

הרחבות

להלן הרחבות שימושיות שיכולות לשפר את חוויית המפתח שלך בעבודה על בסיס קוד.

כדי לגשת לתוספים אלה,

• עבור אל View -> Extensions
• חפש הרחבות בשוק
• לחץ על התקן

1. ייבוא ​​אוטומטי

עם סיומת זו, אינך צריך לייבא קבצים באופן ידני. אם אתה עובד על פרויקט מבוסס רכיבים, פשוט הקלד את שם הרכיב והוא יובא אוטומטית.

2. הוסף הערות jsdoc

זה מוסיף חסימת הערות לקוד. כדי להשתמש בו, סמן את השורה הראשונה של הפונקציה, לחץ CMD + SHIFT + Pובחר הוסף הערות Doc.

3. ESDoc MDN

בתרחישים מסוימים, אנו נוטים לשכוח כיצד פועל דבר מסוים. כאן התוסף הזה הופך להיות שימושי. אינך צריך להפעיל את דפדפן האינטרנט שלך כדי לברר את התחביר. כל מה שאתה צריך זה להקליד

//mdn [object].[method];

4. הצצה ל- CSS

As the name implies, this helps you peek on rules applied by a defined style within a codebase and its specificity. It comes in handy when working on legacy codebases.

5. GitLens

GitLens boosts what you can achieve with Git. It helps you to do a lot more, such as seamlessly exploring Git repositories, peeking into code revisions, authorship and much more.

6. ESLint

This integrates ESLint into VS Code to lint your codes. The project you are working on needs to have ESLint installed either locally or globally to take advantage of the features this extension offers.

To install ESLint locally, run

npm install eslint

or globally using

npm install -g eslint

You would also need to create .eslintrc configuration file. If you installed ESLint locally, run

./node_modules/.bin/eslint --init

or

eslint --init

for global installation.

7. Debugger for Chrome

This lets you debug your JavaScript code right from the Google Chrome browser

8. Google Fonts

Adding Google fonts just got easier with this extension. You no longer need to search for fonts in the browser. To access a list of fonts, pressCMD + SHIFT + P and search for Google fonts to proceed.

9. TODO Highlight

With a lot to work on which needs to be prioritized, sometimes you may tend to forget tasks yet to be completed. TODO highlight makes these easily seen by highlighting them.

10. Docker

You can create Dockerfiles on the fly with this extension. It also provides syntax highlighting, intellisense and much more.

Press CMD + SHIFT + P and search for Add Docker files to workspace.

11. Code Spellchecker

This comes in handy to identify typographical errors within the codebase.

12. Import Cost

Import Cost shows the impact of imported packages within the code. It helps measure performance bottlenecks.

13. HTMLHint

This extension validates your HTML helping you to write standards-compliant code.

14. Peacock

This extension gives you the ability to change the colour of your workspace. It is ideal when you have multiple VS Code instances and you want to quickly identify a particular instance.

After installing Peacock, click on the settings icon > settings, select workspace settings tab, click on {} and paste the code below.

{ "workbench.colorCustomizations": { "activityBar.background": "#e90b8d", "activityBar.foreground": "#fff", "activityBar.inactiveForeground": "#b5b5b5", }, "peacock.affectedElements": [ "activityBar", ]}

You can also add titleBar and statusBar to the affectedElements and add color customizations for them within the colorCustomizations section.

To use one of the default colors, press CMD + SHIFT + P, type peacock and select your preferred theme. This overrides the color settings within the settings.json file defined for that workspace.

15. Prettier

Do you always press the spacebar or tab key when coding? Here comes Prettier to the rescue. It formats lines of code and makes it readable.

Check out the awesome things you can do with Visual Studio Code here.

Feel free to drop what works for you in the comment section and share this article.

Also, check out my blog for more articles.