Ubuntu 24.04 安裝 Visual Studio Code 與 laravel packages 的過程記錄

安裝 apt 儲存庫和簽章金鑰

sudo apt-get install wget gpg

wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg

sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg

echo "deb [arch=amd64,arm64,armhf signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" |sudo tee /etc/apt/sources.list.d/vscode.list > /dev/null

rm -f packages.microsoft.gpg

安裝Visual Studio Code
sudo apt install apt-transport-https
sudo apt update
sudo apt install code

安裝laravel套件

Auto Close Tag、beauty、EditorConfig for VS Code、Laravel 5 Snippets、Laravel Blade Snippets、DotENV、Laravel Artisan、PHP Debug、PHP Intellisense、PHP Namespace Resolver、git history、GitLens、Material Icon Theme

資料來源：
1.在 Linux 上安裝 VS Code
https://code.visualstudio.com/docs/setup/linux
2.Laravel for Visual studio code 的開發環境設置
https://polinwei.com/laravel-for-visual-studio-code-development-environment-setup/

在 CentOS 7 桌面版Visual Studio Code 安裝編寫php所需的套件(Extensions)

 為了要在CentOS 7 寫php程式，開始要了解 CentOS 7 桌面環境、編輯器與相關php套件。

前篇：

1.用shell在CentOS 7 安裝編輯器 Geany 1.37.1、Leafpad、Bluefish、Visual Studio Code、Sublime Text 3、Phpstorm 2020.3

2.用shell 快速安裝CentOS 7 桌面環境、遠端桌面環境

接下來，就開始安裝Visual Studio Code 安裝編寫php所需的套件(Extensions)

1.繁體中文化

    動作：F1->Configure Display Language->安裝其他語言

2.安裝Fira Code 字型

$sudo yum install -y git

$git clone https://github.com/tonsky/FiraCode.git

$mv ~/FiraCode/distr/ttf /usr/share/fonts/FiraCode

$sudo chmod 755 /usr/share/fonts/FiraCode -R

$sudo fc-cache -v

$sudo fc-cache-64  -v

$sudo rm ~/FiraCode -rf

在VSCode 設定

現在我們將其寫成shell

檔案名稱：CentOS7FiraCode.sh

檔案內容：

#!/bin/bash

yum install -y git

git clone https://github.com/tonsky/FiraCode.git

mv ~/FiraCode/distr/ttf /usr/share/fonts/FiraCode

chmod 755 /usr/share/fonts/FiraCode -R

fc-cache -v

fc-cache-64  -v

rm ~/FiraCode -rf

如何使用

$sudo chmod 777 CentOS7FiraCode.sh

$sudo sh CentOS7FiraCode.sh

3.套件名稱與功能

EditorConfig for VS Code

統一專案中檔案的編輯風格

ESLint

編輯器會自動幫你檢查 coding style，需搭配 .eslintrc 檔

Git History

方便查看 Git 紀錄以及檔案歷史，包括 Line History，並可直接連結到變更的檔案。

Git Lens

版本控紀錄，一目了然誰在什麼時間點修改檔案

Path Intellisense

輸入 / 編輯器會自動查詢該目錄底下建議路徑

Path Autocomplete for Visual Studio Code

路徑自動補完

Preview on Web Server

前端開發時預覽的好幫手

vscode-icons

幫你 VS Code 檔案與資料夾 icon 美化

DotENV

讓 .env 檔也有 syntax 效果

Markdown All in One

一應俱全的 Markdown 工具，包括 highlight、快速鍵、自動補完、預覽

Docker

方便管理及操作 Docker Image、Container 的官方工具

YAML

讓 VSCode 支援 YAML 格式

Guides

在程式開關符號（例如左右大括號）拉一條線，方便識別程式區塊

Auto Close Tag

自動把右括號或結束標籤補上

4.遠端開發

資料來源：
1.小克的 Visual Studio Code 必裝擴充套件（Extensions）私藏推薦
2.[Day-2] 安裝 Visual Studio Code 與擴充套件設定
3.利用VSCode做PHP開發的必備外掛和配置
4.VSCode插件安裝位置
5.vsCode安裝使用教程和插件安裝

6.利用VSCode做PHP開發的必備外掛和配置

7.[ Tools ] 於 Visual Studio Code 中使用 FiraCode 教學

8.如何在Linux系統上安裝字體

9.[CENTOS7] 安裝中文字型

10.使用VSCode Remote透過 SSH 進行遠端開發