Πώς να ρυθμίσετε τον VSCode για να βελτιώσετε την παραγωγικότητά σας

Οι συντάκτες κώδικα έχουν εξελιχθεί με την πάροδο των ετών. Πριν από λίγα χρόνια, δεν υπήρχε κώδικας Visual Studio (VS Code). Πιθανότατα χρησιμοποιούσατε Sublime Text, Atom, Bracket κ.λπ. Αλλά με την κυκλοφορία του VS Code, έχει γίνει το αγαπημένο πρόγραμμα επεξεργασίας κώδικα των περισσότερων προγραμματιστών.

Γιατί VS Code;

Οι προγραμματιστές το λατρεύουν γιατί

• Είναι προσαρμόσιμο
• Εύκολο εντοπισμό σφαλμάτων
• Έμετ
• Επεκτάσεις
• Ενσωμάτωση Git
• Ολοκληρωμένο τερματικό
• Intellisense
• Θέματα και άλλα…

Τώρα που έχετε δει τα πλεονεκτήματα της χρήσης κώδικα 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 που δεν είναι συγκεκριμένες για έναν χώρο εργασίας βρίσκονται εντός του settings.json. Μπορείτε να διαμορφώσετε τον κωδικό VS για να ταιριάζει στις προτιμήσεις σας.

Για να ξεκινήσετε το settings.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και επιλέξτε Προσθήκη σχολίων σχολίων.

3. ESDoc MDN

Σε ορισμένα σενάρια, τείνουμε να ξεχνάμε πώς λειτουργεί ένα συγκεκριμένο πράγμα. Εκεί γίνεται χρήσιμη αυτή η επέκταση. Δεν χρειάζεται να εκκινήσετε το πρόγραμμα περιήγησης ιστού για να μάθετε τη σύνταξη. Το μόνο που χρειάζεστε είναι να πληκτρολογήσετε

//mdn [object].[method];

4. CSS Peek

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.

Για να χρησιμοποιήσετε ένα από τα προεπιλεγμένα χρώματα, πατήστε CMD + SHIFT + P, πληκτρολογήστε παγώνι και επιλέξτε το θέμα που προτιμάτε. Αυτό αντικαθιστά τις ρυθμίσεις χρώματος στο αρχείο settings.json που ορίζεται για αυτόν τον χώρο εργασίας.

15. Πιο όμορφη

Πάντα πατάτε το πλήκτρο διαστήματος ή το πλήκτρο καρτέλας κατά την κωδικοποίηση; Εδώ έρχεται ο πιο όμορφος στη διάσωση. Διαμορφώνει γραμμές κώδικα και τον καθιστά αναγνώσιμο.

Δείτε τα καταπληκτικά πράγματα που μπορείτε να κάνετε με το Visual Studio Code εδώ.

Μη διστάσετε να αφήσετε αυτό που σας ταιριάζει στην ενότητα σχολίων και να μοιραστείτε αυτό το άρθρο.

Επίσης, ρίξτε μια ματιά στο blog μου για περισσότερα άρθρα.