前端開發

終端#

常用命令#

ssh
scp
bat
ack
the_silver_searcher

命令行快捷鍵 #

Ctrl + a 光標移動到開頭
Ctrl + e 光標移動到結尾
Ctrl + u 刪除命令
Ctrl + k 刪除當前光標之後所有的字符
Ctrl + w 向前刪除一個單詞

Vim #

三種模式
基本操作：移動、刪除、複製
編輯器

語言服務協議#

The goal of the protocol is to allow programming language support to be implemented and distributed independently of any given editor or IDE.

語言伺服器協議（Language Server Protocol，LSP）是一個開放的、基於JSON-RPC的網絡傳輸協議，源代碼編輯器或集成開發環境（IDE）與提供特定編程語言特性的伺服器之間交互時會用到這個協議。該協議的目標是讓編輯器或集成開發環境能支持更多的編程語言

特點

轉到定義（go to definition）
查找所有引用（find all references）
hover
completion
rename
format
refactor
highlight
updateImportOnFileMove
autoImport

用戶打開一 (工具中稱為) 文檔 "的文件：該工具通知語言伺服器文檔已打開 ("textDocument/didOpen") 。從現在開始，文檔內容的事實不再在文件系統上，而是由工具保留在內存中。
用戶進行編輯：該工具會通知伺服器文檔更改 ('textDocument/didChange') 並且語言伺服器會更新程序的語義信息。發生這種情況時，語言伺服器會分析此信息，並通知工具檢測到的錯誤和警告 ( textDocument/publishDiagnostics ) 。
用戶對編輯器中的符號執行 "轉到定義"：該工具發送具有兩個參數的 "textDocument/definition" 請求： (1) 文檔 URI 和 (2) 從啟動 "轉到定義" 請求到伺服器的文本位置。伺服器使用文檔 URI 和符號定義在文檔內的位置進行響應。
用戶關閉文檔 (文件 ) ： 從工具發送 "textDocument/didClose" 通知，通知語言伺服器文檔現在不再在內存中，並且文件系統上的當前內容現在是最新的。
JSON-RPC 傳輸協議

The client in that case is typically software intending to call a single method of a remote system. Multiple input parameters can be passed to the remote method as an array or object, whereas the method itself can return multiple output data as well.

request
- method - String
- params - Object or Array
- id
reponse
- result
- error
- id

詳細了解一下 “textDocument/definition” 請求，下面是 C++ 文檔中 “轉到定義” 請求的客戶端工具和語言伺服器之間的有效負載。

這是請求：

{
    "jsonrpc": "2.0",
    "id" : 1,
    "method": "textDocument/definition",
    "params": {
        "textDocument": {
            "uri": "file:///p%3A/mseng/VSCode/Playgrounds/cpp/use.cpp"
        },
        "position": {
            "line": 3,
            "character": 12
        }
    }
}

響應為：

{
    "jsonrpc": "2.0",
    "id": "1",
    "result": {
        "uri": "file:///p%3A/mseng/VSCode/Playgrounds/cpp/provide.cpp",
        "range": {
            "start": {
                "line": 0,
                "character": 4
            },
            "end": {
                "line": 0,
                "character": 11
            }
        }
    }
}

當用戶使用不同的語言時，VS Code 通常啟動每個編程語言的語言伺服器。

在 VS Code 編輯器中語言服務是一種特殊的擴展，這些擴展可以使編輯器支持多種編程語言。

編輯器內置了很多語言伺服器，比如 Typescript/JavaScript、html、css，其他也更多可以通過擴展的形式安裝，比如 vetur。

VS Code#

VS Code 擴展#

VueDX
- Definition
  - Goto component definition
  - Goto prop definition
  - Goto expression definition
- Renaming
  - Rename prop
  - Rename data
  - Rename computed
  - Rename method
  - Rename variables/function in setUp()
  - Rename component or Vue file
File Utils
- New File
- New Folder
- Delete file
- Duplicate
- Rename
- Copy Name
- Move
advanced-new-file
Auto Rename Tag
Color the tag name
Live Preview
Tailwind CSS intelliSense
Volar

VS Code 快捷鍵

Chrome 瀏覽器#

CSS Debug #

使用按鍵增大和減小屬性值大小
- shift + up/down: ±10
- Command(mac)/Ctrl (window)+ up/down: ±100
- Alt(window)/option (mac)+ up/down: ±0.1
捕獲節點截圖（Capture node screenshot）
增加、編輯和刪除 CSS 類。
- .cls
- enter 鍵
h 鍵快速隱藏元素

Chrome 擴展#

OneTab - 所有標籤頁轉換成一個列表
The Great Suspender 冻結長時間不用的網頁，釋放系統資源。
JSON Viewer
Site Palette
wappalyzer
Vimium

輔助工具#

vscodedev - 在線 vscode 編輯器
regex - 在線調試正則表達式

終端#