Guia pràctica de VS Code: trucs i eines imprescindibles per a desenvolupadors eficients

Visual Studio Code (VS Code) és un editor de codi gratuït, de codi obert i multiplataforma, molt popular entre els desenvolupadors. Té una funcionalitat potent, un ric ecosistema d'extensions i una interfície senzilla i fàcil d'utilitzar. Aquest article combinarà les discussions recents a X/Twitter per resumir els trucs pràctics i les recomanacions d'eines de VS Code per ajudar-vos a millorar l'eficiència del desenvolupament.

Quin és l'encant de VS Code?

De la discussió a X/Twitter, podem veure l'entusiasme dels desenvolupadors per VS Code. @@freeCodeCamp va esmentar repetidament la popularitat i la gratuïtat de VS Code, destacant les seves riques funcions. @@chomado va compartir el seu editor preferit i va recomanar funcions d'extensió per a enginyers de frontend.

En resum, els principals avantatges de VS Code inclouen:

• Gratuït i de codi obert: tothom pot utilitzar-lo gratuïtament i participar en el desenvolupament de la comunitat.
• Multiplataforma: admet diversos sistemes operatius com Windows, macOS, Linux, etc.
• Lleuger: velocitat d'inici ràpida, baix consum de recursos.
• Ecosistema d'extensions potent: en instal·lar extensions, podeu millorar la funcionalitat de VS Code per satisfer diverses necessitats de desenvolupament.
• Eines de depuració integrades: admet la depuració de diversos llenguatges de programació, cosa que facilita als desenvolupadors la localització i la resolució de problemes ràpidament.
• Git integrat: facilita als desenvolupadors el control de versions.
• Suggeriments intel·ligents: proporciona funcions com ara la finalització de codi i la comprovació de sintaxi per millorar l'eficiència de la codificació.

Trucs pràctics de VS Code: milloreu la vostra eficiència de desenvolupament

1. Domineu les dreceres de teclat: VS Code ofereix una gran varietat de dreceres de teclat, i dominar-les pot millorar enormement l'eficiència del desenvolupament. A continuació, es mostren algunes dreceres de teclat d'ús habitual:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): obre el panell d'ordres. Aquesta és una de les funcions principals de VS Code i podeu realitzar diverses operacions mitjançant el panell d'ordres.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): obre ràpidament un fitxer.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): salta ràpidament al símbol (funció, classe, etc.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): cerca global.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): selecciona la següent coincidència. Podeu editar diversos textos idèntics alhora.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): copia la línia actual a la línia següent/anterior.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): comenta/descomenta la línia actual o el bloc de codi seleccionat.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): mou cap amunt i cap avall la línia actual o el bloc de codi seleccionat.
   • Ctrl+K Ctrl+S: obre la interfície de configuració de dreceres de teclat, on podeu veure i personalitzar les dreceres de teclat.

2. Feu un bon ús del panell d'ordres: obriu el panell d'ordres mitjançant Ctrl+Shift+P / Cmd+Shift+P per realitzar diverses operacions, com ara:

   • Settings: obre la interfície de configuració.
   • Extensions: Install Extension: instal·la una extensió.
   • Git: Commit: envia els canvis de Git.
   • Format Document: formata el document actual.
   • Go to Symbol in Workspace: salta ràpidament al símbol de l'àrea de treball.

3. Configuració personalitzada: VS Code permet als usuaris personalitzar diverses configuracions, incloent-hi el tema, la font, el mètode d'indentació, etc. Podeu obrir la interfície de configuració mitjançant File -> Preferences -> Settings, o editar directament el fitxer settings.json.

   • Tema: Trieu el tema que més us agradi, pot millorar la comoditat de la codificació.
   • Font: Trieu una font adequada, pot millorar la llegibilitat del codi. Es recomana utilitzar una font monoespaiada, com ara Fira Code, JetBrains Mono, etc.
   • Mètode d'indentació: Configureu el mètode d'indentació segons les especificacions del projecte, podeu utilitzar espais o la tecla Tab.
   • Desat automàtic: Activeu la funció de desat automàtic, podeu evitar la pèrdua de codi per oblidar-vos de desar.

4. Utilització de fragments de codi (Code Snippets): Els fragments de codi us poden ajudar a inserir ràpidament blocs de codi utilitzats habitualment. VS Code té integrats alguns fragments de codi utilitzats habitualment, i també podeu personalitzar els fragments de codi.

   • Obriu el panell d'ordres, introduïu Preferences: Configure User Snippets, trieu l'idioma que voleu editar i, a continuació, podeu editar els fragments de codi.
   • Per exemple, podeu crear un fragment de codi clog per a JavaScript per inserir ràpidament console.log():

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console"
   }
   

5. Ús de l'edició amb múltiples cursors: Manteniu premuda la tecla Alt (Windows/Linux) / Option (macOS) i, a continuació, feu clic amb el ratolí per crear cursors en diverses ubicacions i editar diverses línies de codi simultàniament. També podeu utilitzar Ctrl+D / Cmd+D per seleccionar la següent coincidència i realitzar l'edició amb múltiples cursors.

6. Divisió de l'editor: Podeu dividir l'editor en diverses finestres per visualitzar i editar diversos fitxers simultàniament. Podeu utilitzar l'ordre View -> Editor Layout -> Split Editor per dividir l'editor.

7. Desenvolupament remot: VS Code proporciona l'extensió Remote Development, que us permet editar el codi en un servidor remot localment. Això és molt útil per desenvolupar aplicacions del costat del servidor.

8. Ús de VS Code al navegador: Tal com assenyala @@Prathkum, en visitar vscode.dev, podeu utilitzar VS Code directament al navegador, de manera còmoda i ràpida. Això és molt útil per a l'edició temporal o per treballar en dispositius on no està instal·lat VS Code. El treball de @@CompuIves ha millorat encara més això, ja que ha aconseguit executar VS Code directament al navegador i connectar-lo a l'API de CodeSandbox.

Recomanacions d'eines de VS Code: creeu el vostre IDE exclusiu

La força de VS Code rau en el seu ric ecosistema d'extensions. A continuació, es mostren algunes recomanacions d'extensions d'ús comú:

• Prettier: Eina de format de codi, pot formatar automàticament el codi i mantenir la coherència de l'estil del codi.

  ext install esbenp.prettier-vscode
  

• ESLint: Eina de comprovació de codi JavaScript, pot comprovar els errors i els problemes potencials del codi.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Eina per mantenir la consistència de l'estil del codi entre diferents editors.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Inicia ràpidament un servidor local, convenient per depurar codi frontend. @@ThreatSynop va esmentar una vulnerabilitat de seguretat a Live Server, recordant als desenvolupadors que han de prestar atenció a la seguretat en utilitzar l'extensió.

  ext install ritwickdey.LiveServer
  

• Code Runner: Admet l'execució de diversos llenguatges de programació, convenient per provar ràpidament fragments de codi. De la mateixa manera, @@ThreatSynop també va assenyalar una vulnerabilitat de seguretat a Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: Extensió que millora les funcions de Git, permet veure l'historial de commits del codi, la informació de l'autor, etc.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Coloreja els parells de parèntesis, facilitant la visualització de l'estructura del codi.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Proporcionat per Microsoft) Complementació de codi assistida per IA, que pot proporcionar suggeriments de codi més intel·ligents segons el context.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Proporcionat per GitHub, de pagament) Assistent de codi d'IA, que pot generar fragments de codi, funcions o fins i tot fitxers sencers a partir del teu codi. @@aadhilkh va esmentar l'alta rendibilitat d'utilitzar VS Code Copilot.

• Markdown Preview Enhanced: Un millor connector de vista prèvia de Markdown. @@ThreatSynop també va assenyalar que aquest connector té problemes de seguretat i cal tenir-ho en compte.

  ext install shd101wyy.markdown-preview-enhanced
  

• Paquet d'extensions de desenvolupament remot: Inclou extensions com SSH, Containers, WSL, etc., per facilitar el desenvolupament remot.

Sobre la integració de LLM i VS Code

També hi ha hagut algunes discussions sobre la integració de LLM i VS Code a X/Twitter. @@akshay_pachaar va compartir un mètode per entrenar LLM a VS Code. @@MacopeninSUTABA va esmentar la integració de l'agent de codificació d'IA "Claude Code" d'Anthropic amb VS Code. Tot això prediu que la IA jugarà un paper cada vegada més important en el desenvolupament futur.

Consells de seguretat

Com va esmentar @@ThreatSynop, algunes extensions de VS Code tenen vulnerabilitats de seguretat que poden provocar el robatori de fitxers i l'execució remota de codi. Per tant, en utilitzar extensions, cal tenir en compte els punts següents:

• Trieu extensions oficials o de bona reputació.
• Actualitzeu les extensions regularment.
• Llegiu atentament les instruccions de permisos de l'extensió.
• Instal·leu eines de comprovació de codi, com ara ESLint, que us poden ajudar a detectar problemes potencials al codi.
• Feu un seguiment dels anuncis de seguretat de VS Code i de les extensions, i corregiu les vulnerabilitats a temps.## Resum

VS Code, com a un editor de codi potent, té molts trucs pràctics i un ecosistema d'extensions ric, que pot ajudar els desenvolupadors a millorar l'eficiència del desenvolupament. Dominant les dreceres de teclat, la configuració personalitzada, l'ús de fragments de codi, la instal·lació d'extensions adequades, etc., pots convertir VS Code en el teu IDE exclusiu. Al mateix temps, també has de prestar atenció als problemes de seguretat, triar extensions oficials o de bona reputació i actualitzar les extensions regularment. Espero que aquest article t'hagi estat útil!