iT邦幫忙

2023 iThome 鐵人賽

DAY 2
0

簡介

首先第一邊當然是介紹我們的生財工具VS Code啦~相信大家都有自己習慣的環境和模式,今天來分享我的VS Code相關的開發設定。

VS Code概述

VS Code是一個功能豐富的程式碼編輯器,支援多種程式語言,例如JavaScript、HTML/CSS等等。對於軟體開發者來說,它是一個非常靈活且易於使用的工具。

除了強大的基本功能外,VS Code還可以透過安裝套件來擴展其功能。這些套件提供了各種方便的功能,幫助我們更有效率地開發。

背景知識

  • VS Code

內容

(一) VS Code常用基本設置

  1. 自動換行

    • 設置方法:
      • 點擊左下角小齒輪進入設定選單
        圖 0
      • 搜尋欄搜尋 "Wrap"
      • 在 "Word Wrap" 設置中設定成 "On"
        圖 1
    • 效果:
      Before
      圖 2
      After
      圖 3
  2. 括弧顏色:可以協助整理巢狀結構

    • 設置方法:
      • 在設定中找到 "Colorized Bracket Pairs",進入 setting.json,貼上下列程式碼
        圖 4
        "editor.bracketPairColorization.enabled": true, //Bracket Pair Colorizer 協助大中小括號({}、[]、())一的獨立補上不同色彩(不用可以刪掉)
        "editor.guides.bracketPairs": "active", //Bracket Pair Colorizer 協助大中小括號({}、[]、())一一(不用可以刪掉)
        
    • 效果:
      圖 5
  3. 自動儲存格式化(自動排版):可以幫忙整理排的散亂的程式碼

    • 設置方法:
      • 找到下列選項設置 "Format On Save" 打勾,就完成了。
        圖 8
    • 效果:
      Before
      圖 9
      After
      圖 10

(二) 常用套件

  • 效果
    圖 5

3.自動儲存格式化(自動排版):可以幫忙整理排的散亂的程式碼

  • 設置方法
    (1)找到下列選項設置Format On Save打V,就完成了。
    圖 8
  • 效果
    Before
    圖 9
    After
    圖 10

(二) 常用套件

結論

總結而言,VS Code 擁有強大的功能和豐富的套件生態系統,適合各種程式開發需求。透過介紹常用的基本設置,如自動換行、括弧顏色設置以及自動儲存格式化,我們可以提高程式碼的可讀性和整潔性。此外,常用的套件如 Auto Close Tag、Auto Rename Tag、Chinese (Traditional) Language、Code Spell Checker、Git Graph、Indent-rainbow 以及 Live Server 更進一步提升了開發效率,讓我們能更專注於寫程式,而不用花費太多時間處理繁瑣的細節。


上一篇
Day 1 參賽動機以及題目選擇和預計大綱
下一篇
Day 3 查詢陣列的方法-forEach & map
系列文
我轉生成前端貓咪踏入React地獄的那些事25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言