front-end development

终端#

常用命令#

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 - 在线调试正则表达式

Cabbage

front-end development

终端#

常用命令#

命令行快捷键 #

Vim #

语言服务协议#

VS Code#

VS Code 扩展#

Chrome 浏览器#

CSS Debug #

Chrome 扩展#

辅助工具#

参考#

front-end development

终端#

常用命令#

命令行快捷键#

Vim#

语言服务协议#

VS Code#

VS Code 扩展#

Chrome 浏览器#

CSS Debug#

Chrome 扩展#

辅助工具#

参考#

命令行快捷键 #

Vim #

CSS Debug #