Cabbage

Cabbage

github
twitter
jike

front-end development

终端#

常用命令#

命令行快捷键#

  • 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)与提供特定编程语言特性的服务器之间交互时会用到这个协议。该协议的目标是让编辑器或集成开发环境能支持更多的编程语言

image

特点

  • 转到定义 (go to definition)
  • 查找所有引用 (find all references)
  • hover
  • completion
  • rename
  • format
  • refactor
  • highlight
  • updateImportOnFileMove
  • autoImport

image

  • 用户打开  (工具中称为) 文档 "的文件:该工具通知语言服务器文档已打开 ("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 通常启动每个编程语言的语言服务器。

image

在 VS Code 编辑器中语言服务是一种特殊的扩展,这些扩展可以使编辑器支持多种编程语言。

编辑器内置了很多语言服务器,比如 Typescript/JavaScript、html、css,其他也更多可以通过扩展的形式安装,比如 vetur。

VS Code#

VS Code 扩展#

VS Code 快捷键

Chrome 浏览器#

CSS Debug#

image

  • 使用按键增大和减小属性值大小
    • 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 扩展#

辅助工具#

  • vscodedev - 在线 vscode 编辑器
  • regex - 在线调试正则表达式

参考#

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。