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++ 文档中 “转到定义” 请求的客户端工具和语言服务器之间的有效负载。

这是请求：

Copy
{
"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
}
}
}

响应为：

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

参考

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way

Language Extensions Overview

Language Server Extension Guide

语言服务器协议

Official page for Language Server Protocol - Microsoft Open

neovim LSP configs